9Cells

설치

이 문서는 flutter 개발환경을 설치하고 간단한 예제를 실행하는 과정을 설명합니다. 다음의 순서대로 진행합니다.

이미 일부 환경을 갖추고 계신 분들은 상황에 맞게 필요한 것들을 설치해주세요.

Flutter SDK 설치

file:000 Flutter SDK는 releases 페이지에서 직접 다운로드 방법도 있지만 특정 버전을 정하여 사용하는 것을 원치 않는다면 github를 통해 다운받을 수 있습니다.

C:\flutter>git clone https://github.com/flutter/flutter.git sdk -b stable

위와같이 git clone 명령으로 flutter를 받습니다. 이 예제에서는 루트 디렉토리에 flutter 디렉토리를 만들고 그 안에서 sdk 디렉토리로 clone 되도록 명령하여 결과적으로 C:\flutter\sdk에 SDK가 설치되도록 했습니다.

file:001 환경변수에 FLUTTER_HOME을 추가합니다.

file:002 Path%FLUTTER_HOME%\bin을 추가합니다.

file:003 설정한 환경변가 적용되도록 새로운 콘솔창을 열어 flutter 명령을 실행합니다. 최초 실행에서는 뭔가를 다운로드 받고 설치가 진행됩니다.

명령이 실행되지 않는다면 환경변수가 제대로 설정되지 않은 것일 수 있습니다. SDK가 설치된 디렉토리 주소를 확인하고 앞의 과정을 진행해주세요.

콘솔 윈도는 남은 설치과정을 진행하면서 설치가 잘 됐는지 검사하는 용도로 계속 사용되므로 닫지 말아 주세요.

file:004 flutter doctor를 실행하여 설치 상태를 확인합니다. Android Studio 설치가 필요합니다.

Android Studio 설치

file:005 Android Studio를 설치합니다.

file:009 설치를 완료하고 flutter doctor를 실행해보면 Android Studio가 설치된 것으로 바뀝니다.

Android SDK 설치

file:006 Android Studio 설치 끝에 Android SDK가 없다는 설명이 나옵니다. 설치합니다.

file:007 기본 설정으로 설치했습니다.

file:008 설치...

file:010 Android SDK 설치 완료.

file:011 flutter doctor로 확인합니다. 설치상태가 바뀌었지만 license 동의가 필요하다고 합니다.

file:012 flutter doctor --android-licenses 명령을 실행하여 동의 여부를 밝힙니다.

file:013 동의 후 flutter doctor로 Android SDK 설치를 확인합니다.

AVD 생성

file:018 Android Studio의 메뉴 Tools > AVD Manager 에서 AVD(Android Virtual Device)를 설치할 수 있습니다.

AVD는 개발 PC에 가상의 스마트폰을 설치하여 flutter 프로젝트를 PC에서 설치하고 실행하는 용도로 사용됩니다.

file:019 이 문서에서는 기본으로 선택되어있는 환경으로 설치를 진행했습니다.

file:020 생성...

file:021 생성...

file:022 Virtual Device 실행 화면.

file:024 flutter doctor로 확인하니 모든 설치가 완료되었습니다. 콘솔창을 닫아도 좋습니다.

Flutter 플러그인 설치

file:014 Android Studio에서 flutter 플러그인을 설치합니다. 메뉴에서 File > Settings > Plugins 를 선택하여 플러그인을 설치할 수 있습니다.

flutter 플러그인을 설치하면 Dart 플러그인도 설치할 것인지를 묻는데 역시 설치합니다.

예제 프로젝트

file:015 Android Studio의 메뉴 File > New > New Flutter Project... 메뉴를 선택하면 flutter 프로젝트를 생성할 수 있습니다.

Flutter Application을 선택하여 만듭니다.

file:016 Flutter SDK path는 이 문서 처음에 sdk를 설치한 위치로 설정합니다.

file:017 Package name은 Android에서 패키지 이름으로 쓰이고 iOS에서는 번들 ID로 쓰입니다. 앱이 한 번 출시되면 바꿀 수 없으므로 잘 정합니다.

file:023 예제 프로젝트가 자동으로 생성됩니다.

file:025 Android Studio의 툴바에서 실행한 AVD를 선택하고 Run을 클릭하면 프로그램이 설치되고 실행됩니다.

Flutter는 hot reload를 지원합니다. 개발의 과정 중 대부분의 시간은 코드를 수정하고 결과를 확인하는 것에 사용됩니다. Flutter의 hot reload 기능을 사용하면 매번 프로그램을 재시작 할 필요 없이 변경을 확인할 수 있습니다. Android Studio에서 코드를 수정하고 저장하면 바로 변경사항이 반영되는 것을 확인할 수 있습니다. 텍스트 메세지 같은 단순한 코드를 변경하여 hot reload의 작동을 확인해보세요.