본문 바로가기
Mobile Programming

Flutter - open-source UI SDK Flutter 소개와 설치 ( For Windows )

by 맑은안개 2020. 3. 7.

2016년도 즈음에 모 캐피탈사에서 모바일 앱을 개발하던 때가 생각난다.

그 당시 금융업권 모바일 시스템 고도화 사업이 많았는데 인기 있던 Hybrid UI Toolkit은

앵귤러 + 아오오닉(ionic)과 리액트 네이티브 였다. 

 

시장에서 요구하는 앱 수요 대비 네이티브 개발자의 공급은 원활치 않았고 자연히 네이티브 개발자가 아니여도 UI를 구성할 수 있는 대체 플랫폼이 필요해진덕에 Hybrid UI의 종류는 많아 졌고 현재 기준 10여가지의 플랫폼이 존재한다.

 

그 플랫폼에 Google도 합류하였는데, 2017년도에 Hybrid UI Build를 지원하는 UI SDK, Flutter를 내놓았다. 

 

1. Flutter 소개

Flutter는 Google이 만든 오픈소스 UI 소프트웨어 개발 킷이다. 

Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Windows, Mac, Linux, Google Fuchsia and the web.

Full native  performance ( iOS and Android ) 를 장점으로 내새운다.

 

Flutter 공식사이트

https://flutter.dev/

 

Flutter - Beautiful native apps in record time

Flutter is Google's UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open sour

flutter.dev

2. Flutter 설치 For windows

아래 공식 사이트에 접속하여 Windows 버튼을 클릭하여 설치를 진행한다.

https://flutter.dev/docs/get-started/install

 

Install

How to set up your code editor.

flutter.dev

2.1 Flutter SDK Install 시 유의사항 

Program Files위치에 설치하지 말 것.

 

2.2 환경변수 등록

 - 환경변수를 SDK 압축 푼 디렉토리의 bin까지 설정해준다.

 

2.3 Flutter doctor 실행

 - 환경변수 등록후 Flutter가 설치된 디렉토리에서 아래 명령어를 실행한다. Flutter 개발환경을 전반적으로 검토, 진단해주는 기능으로 보이는데 그래서 doctor인가보다. ( 구글의 센스.. )

의사의 진단 결과 

Android SDK를 사용할 수 없는상태이고 아래 [!] 는 Flutter 개발 IDE에 도움되는 plug-in을 설치하라는 안내멘트가 출력되었다. 

 

2.4 Android Studio 설치

 - Android SDK는 Android Studio를 설치하면 실행하면서 점검, 설치해준다. 이때 주의 할 것은 설치되는 Path에 공백이 있으면 안된다.

 - Android Studio 설치는 Flutter 개발에 있어 필수요소는 아니지만 사용시 모든 기능을 사용할 수 있는데서 장점이 있으므로 Android Studio로 개발하도록 한다.

 

설치 경로에 공백이 없도록 유의한다

 

2.5 App 동작 및 테스트 환경 구성을 위한 준비

Android Studio 설치 후 File > Settings > Android SDK, Google USB Driver를 설치한다.

AVD Manager 설치

 - 프로젝트 생성해서 들어와 있는 경우 IDE 오른쪽 상단에 AVD Manager 버튼을 클릭하여 실행한다.

 설치 할 디바이스 스펙은 Default Pixel2 로 설치했다. System image 선택도 동일하게 추천되는 R 버전으로 선택하였다.

 

2.6 Android Studio Plug-in 설치

 

3. Flutter Application 실행

 - Flutter SDK Path는 위에 초반에 설치한 Path로 잡아준다.

 

오른쪽 상단 Run 아이콘 실행

 - Counter App 실행 확인!

 

< 실행시 오류사항 >

no devices 상태로 실행할 수 없는 경우 Event log가 아래와 같다면 안드로이드 SDK Path 설정을 확인하여야 한다.

Unable to connect to adb daemon on port: 5037

File > Project Structure에서 Project SDK를 설정해준다. NO SDK인 경우 위와 같은 에러 발생

 

마치며..

Android Studio 설치에 조금 애먹은것을 빼곤 수월하게 설치가 진행됐다. 애뮬레이터도 과거 안드로이드 버전과는 다르게 실행속도가 상당히 빠르다. 애뮬 실행 속도 때문에 기운빠지게 만들었던 기억이 나는데 많은 발전이 이루어진것 같아 기쁘다. 

하지만 애뮬레이터와 IDE가 가벼운 자원으로 돌아가는것은 아니기에 여전히 무거운 느낌이고 매끄럽지 않은 부분이 있다. ( 애뮬레이터 종료시 버벅이는 문제등.. )

현재 베타서비스로 제공중인 Web 실행환경도 실행해보고 추후 Android Studio와 어떤것이 다른지 확인해보도록 하겠다. 

 

 

반응형