Flutter 튜토리얼 시작하기 - 1

Android 프레임워크 중 하나인 Flutter의 공식 튜토리얼을 같이 따라 해봅시다! 이번 포스트에서는 Flutter와 Android SDK 및 Studio 설치에 대해 다루겠습니다. 진행에 관련된 모든 소스는 Github에서 확인 할 수 있습니다!

(이번 튜토리얼 시리즈는 편의상 반말로 진행하겠습니다)

환경 체크

필자의 OS는 Window 10을 사용하고 있으므로 본 튜토리얼은 Window기반으로 진행된다.

다른 환경의 튜토리얼을 진행하고 싶을 시 https://flutter.dev/docs/get-started/install 를 참고 하길 바란다.

Install

Flutter가 요구하는 사양은 

• OS : Windows 7 SP1 or later (64bit)
• Disk Space : 400MB (IDE / Tool을 제외한 SDK만의 용량이다. 주의하자)
• Tools
  • Windows PowerShell 5.0 or newer (윈도우10 설치 시 같이 설치된다.)
  • Git for Windows 2.x (프롬프트에서 Git명령어를 사용할 수 있는 옵션이 필요하다고 한다, Git을 설치하면 알아서 사용할 수 있으니 참고)

Flutter SDK 설치

작성 할 때의 버전은 1.9.1버전이다. 튜토리얼의 경우 버전을 가리지 않을 것이니 웬만하면 최신버전을 받아 사용하자

https://flutter.dev/docs/development/tools/sdk/releases

Flutter SDK releases

zip파일로 다운로드 된다. 압축해제 후 추출되는 flutter 폴더를 원하는 위치에 옮겨 놓기만하면 된다. 공식 사이트에서는 C:\src\flutter 에 설치하였고 필자는 C:\flutter에 설치하였다.

(경로는 별 상관이 없지만 공식사이트에는 윈도우 권한이 필요한 곳 C:\program files\ 와 같은 경로는 안된다고 한다. 주의하자)

환경변수 추가

시스템 환경변수 설정을 위해 제어판-시스템-고급 시스템 설정-환경 변수 또는 시작-검색에 "시스템 환경 변수 편집" 입력 후 환경 변수 창을 띄운다.

환경변수 창

시스템 변수나 사용자 변수의 Path 환경 변수에 Flutter/bin 경로를 추가해야 한다. 시스템이나 사용자의 차이는 시스템 전역으로 쓸것인지 로그인한 사용자에 한하여 사용할 것인지의 차이이니 환경에 맞게 사용하길 바란다.

 

Path 변수가 없을 시엔 추가하여 사용한다. 필자는 C:\ 루트에 flutter를 설치하였으므로 C:\flutter\bin을 path 변수에 추가 하였다.

 

flutter doctor 실행

CMD를 열고(시작-실행-cmd) Flutter directory에 들어가서 flutter doctor 명령어를 실행한다.

C:\flutter>flutter doctor

이 명령어는 사용 환경을 체크하여 Flutter 설치 상태를 화면에 출력한다.

C:\flutter>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.9.1+hotfix.2, on Microsoft Windows [Version 10.0.18362.267], locale ko-KR)

[-] Android toolchain - develop for Android devices
    • Android SDK at D:\Android\sdk
    ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed
[!] Android Studio (not installed)
[!] Connected device
    ! No devices available

 

위의 결과는 환경마다 다를 수 있으니 실행결과를 확인하여 설치해야할 다른 소프트웨어나 작업(굵은 글씨로 표시되는)을 신중히 확인하자.

 

Android Studio나 SDK 미설치 부분은 밑에서 진행하니 그 외의 설치나 작업을 진행하길 바란다. 작업이 완료 되었으면 다시한번 flutter doctor 명령어를 입력하여 실행결과가 올바른지 확인 하자.

 

Android 설치

1. Android Studio를 다운로드하고 설치한다.(필자는 경로외엔 다른 부분은 기본값으로 진행하였다.)
2. Android Studio를 실행하면 'Android Studio Setup Wizard'창이 뜨고 SDK 컴포넌트들을 설치한다. 참고로 Flutter가 필요로 하는 컴포넌트는 Android SDK, Android SDK Platform 이므로 기본적으로 설치된다.
3. 계속 Next를 눌러 설치를 진행하자.

SDK 컴포넌트 설치

참고로 필자와 같이 Android SDK 설치 위치를 변경하였으면 환경변수 설정을 해주어야 한다. 해당 설정 방법은 Android SDK Path 설정을 참조.

Android emulator 설정

공식 튜토리얼에는 Android device에 대한 설정도 다루지만 이 시리즈에서는 추후에 필요시 다루도록 하겠다. 에뮬레이터로의 개발로도 충분하기 때문이다.

 

1. 개발 환경의 VM acceleration(VM 가속)을 활성화 한다 (Android developer 사이트의 User guide를 참고하자.)
2. Android Studio > Configure> AVD Manager 를 실행한다.  AVD Manager(Android Virtual Device Manager) 창이 실행되면 Create Virutal Device 버튼을 누른다.(기존에 AVD가 설치되어 있을 수도 있다 필자는 삭제하고 진행했다.)
   기존에 프로젝트가 존재하면 Welcome 화면이 아니므로 Studio 상단의 Tools > Android > AVD Manager로 접근한다.
3. 원하는 Device를 선택하는데 필자는 Pixel 2를 선택하였다.
4. System image를 선택하는 화면이 나오고, Android 버전은 원하는 것을 선택하고, image는 X86 이나 X86_64를 추천한다.(필자는 5.1버전의 Lollipop X86_64 image를 선택했다.) 해당 이미지가 다운로드 안 되어 있으면 이름 옆의 Download를 누른 후 설치하고 다음으로 넘어가자.
5. Emulated Performance 부분은 하드웨어 가속을 위해 Hardware - GLES 2.0을 선택한다.
6. Finish를 눌러서 마치자.
   더 많은 AVD 설정은 https://developer.android.com/studio/run/managing-avds 에서 확인 하도록 하자
7. AVD Manager로 돌아와 설치된 Device를 확인하고 Actions의 ▶를 눌러 실행 시키자, 아래와 같은 AVD Emulator가 띄워지면 성공이다. 화면 구성은 선택한 OS와 장치에 따라 다를 수 있다

AVD Emulator

여기까지 진행했으면 기본적인 Flutter와 Android SDK 그리고 Android Studio 설치는 끝난 것이다, 다음 포스트에서는 Android Studio에 Flutter와 Dart 플러그인을 세팅하는 법을 다루도록 하겠다.