Android Studio와 Visual Code로 Flutter Project 프로젝트 생성

Flutter 개발 환경을 설정하고, 프로젝트를 생성하는 과정을 설명합니다. Flutter Project는 Android Studio (IntelliJ), Visual Code, Terminal CLI를 사용할 수 있습니다. 개인적으로 익숙한 IDE를 사용하면 됩니다. Android Studio가 다소 기능이 복잡하지만 다양한 기능을 사용할 수 있고, Visual Code는 다양한 Extention을 활용할 수 있어 코드 생산성이 높습니다.

Android Studio (IntelliJ)
Visual Code
Terminal CLI(Command Line Interface)

Android Studio에서 Flutter Project 생성하기

Android Studio에서는 Flutter Plugin을 반드시 설치해야 합니다. Flutter Plugin이 설치되어 있지 않다면, 먼저 설치하고 Android Studio를 재 실행하여 Flutter Application 메뉴를 확인할 수 있습니다.

IDE를 실행하고 Start a new Flutter project를 선택합니다.
프로젝트 타입으로 Flutter Application을 선택 후 Next을 클릭합니다.
Flutter SDK 위치에 맞게 경로가 설정되어 있는지 확인합니다. 아래 경로는 Home Brew로 설치한 경로입니다. Flutter 텍스트 필드가 비어 있으면 $ which flutter로 symlink의 원본 위치(/usr/local/Caskroom/flutter/2.8.0/flutter)를 확인하면 됩니다. Flutter SDK가 설치 되어 있지 않은 경우에는 Install SDK…를 선택합니다.
프로젝트 이름을 입력합니다. (예, myapp).
Android App을 생성하는 경우 Project의 고유한 Package Name을 선택해야 합니다.
Dart 언어 Transcompile하여 생성하는 Android와 I-OS의 프로그램 언어를 선택합니다. Java와 Kotlin은 1:1 변경이 가능하고, I-OS는 Swift가 성능상 유리하다고 합니다.
Finish를 클릭하세요. Android 스튜디오가 SDK를 설치하고 프로젝트를 생성할 때까지 기다립니다.

Android Studio 에서 Flutter App 실행하기와 Hot Reload

Android Tool Bar에서 Target selecor를 선택, main.dart를 선택하고 Run 버튼을 실행합니다. 초기 빌드 시간은 1~2분 정도 소요되고 이후부터는 변경 부분만 재 성성하고 빌드됩니다. Androiid AVD, I-OS Simulator, Chrome 브라우저를 실행할 수 있습니다.

실행하면 아래와 같은 Demo App을 빌드하고 하단 Floating App Button을 클릭하면 중앙의 Text의 State가 업데이트됩니다. 실제로 변경해야 하는 소스 코드의 위치는 lib/main.dart 파일입니다. main.dart 파일을 수정하고 파일을 저장하면 재 빌드와 설치를 자동으로 진행하는 Hot Reload가 실행됩니다.

Visual Code에서 Flutter Project 생성하기

Visual Code에서는 Android Studio와 동일한 방법으로 Flutter Project를 생성할 수 있습니다. Visual Code에서도 Flutter Extention은 사전에 설치되어 있어야 합니다.

View > Command Paletter(Ctrl+Shift+P)를 실행하고, 'Flutter'를 검색합니다.
Flutter: New Project를 선택합니다.
Flutter Template에서는 Application을 선택합니다.
Flutter 생성이 완료될 때가 기디라고, main.dart를 수정합니다.

Visual Code에서 Project를 생성하면 아래와 같이 소스 코드와 하단에 Status 표시줄을 표시합니다. Target 프로젝트 (아래 그림에서는 Web)을 선택하고 실행합니다.

Terminal Command Line Interface로 Flutter Project 생성하기

일반적으로 IDE를 많이 사용하기 때문에 Terminal 명령어만 간단하게 확인하도록 하겠습니다. $ flutter create 명령어와 함께 project name, android language, i-os language를 설정할 수 있습니다.

Flutter App 생성

$ flutter create [myapp]

Flutter app 실행

$ cd [myapp]
$ flutter run

Chrome에서 실행

$ flutter run -d chrome

Html render로 Chrome 실행

$ flutter run -d chrome --web-renderer html

Terminal Command Line Interface로 Flutter Project 생성하기

Flutter Web App에 대한 분석

Android나 I-OS는 Native Code로 Transcompile 되기 때문에 분석이 어렵지만, Web App인 경우에는 Chrome 개발자 메뉴에서 쉽게 확인이 가능합니다. Flutter App은 canvas kit과 html 렌더링을 지원하고 기본 값은 canvaskit을 사용합니다.

index.html에서 main.dart.js를 포함하고 실행함
Html은 Shadow DOM으로 object를 생성하고, GUI Component는 Canvas에 각종 Widget을 직접 업데이트합니다.
Flutter에 생성하는 Widget component, Rendering 엔진은 Java script파일로 배포함
dart.sdk, requred.js, web entry point.js, canvaskit.js 포함, canvaskit.wasm (Web Assembly)로 파일 구성