Flutter macOS Setup

Flutter macOS Setup

 

 

macOS에서 Flutter를 Setup하는 방법을 알아보겠습니다.

1. https://flutter.dev/ 또는 https://flutter.dev/에 접속합니다.
2. ‘Get started’ button을 click 합니다.
3. macOS를 선택하면 flutter setup을 위한 설명이 나오며, 아래 내용과 같이 단계별로 따라서 실행합니다.
4. ‘Flutter를 설치하기 위한 시스템 요구 사항’ 확인 및 설정

System requirements

To install and run Flutter, your development environment must meet these minimum requirements:

• Operating Systems: macOS (64-bit)
• Disk Space: 700 MB (does not include disk space for IDE/tools).
• Tools: Flutter depends on these command-line tools being available in your environment.
• bash
• curl
• git 2.x
• mkdir
• rm
• unzip
• which

• git를 제외한 command-line tools은 일반적으로 Mac에서 기본적으로 사용가능하므로, git는 별도 설치가 필요합니다.
• Google에서 ‘git download’로 검색해서 'https://git-scm.com/downloads'로 접속합니다.
• ‘Mac OS X’를 선택해서 설치 프로그램을 download합니다. (이번 실습에서는 2019-02-27에 released된 2.21.0 version이 download되었습니다.)
• download된 git-2.21.0-intel-universal-mavericks.dmg file을 click해서 git을 설치합니다.
• git-2.21.0-intel-universal-mavericks.dmg file을 click하면 보이는 git-2.21.0-intel-universal-mavericks.pkg file에서 마우스 오른쪽 click - 다음으로 열기 - 설치 프로그램(기본)

 

5. Flutter SDK download 및 설정

• flutter setup page에 안내된 flutter SDK download link를 click해서 zip file을 download합니다.
• flutter SDK download link(현재 기준) : ‘flutter_macos_v1.5.4-hotfix.2-stable.zip

(실습자께서는 실습 시점의 version에 대한 download link를 click하면 됩니다.)

• download된 file을 two click하면 압축이 해제되고 flutter라는 folder가 생성됩니다.
• flutter folder는 flutter를 이용해서 software(=flutter app)를 개발하기 위한 SDK(=Software Development Kit)이며, flutter가 필요로하는 많은 dependencies를 포함하고 있습니다. 개발자가 원하는 위치에 flutter를 복사해서 넣으면 됩니다.
• 이번 실습에서는 user-[my_user_home]의 최상위에 development 라는 folder를 생성하고 그 안에 위의 과정에서 압축을 해제한 flutter folder를 복사해서 넣겠습니다.
• flutter SDK folder 경로 : xxxmain - 사용자 - xxxmac - development - flutter
• flutter SDK는 우리가 flutter app 개발시 command line에서 불러와 사용하게 되기 때문에 flutter SDK 관련 경로를 Mac OS의 global variable인 path에 추가해 주어야 합니다. path에 추가된 tool 또는 program은 flutter 또는 다른 program에서 command line을 통해 접근할 수 있게 됩니다.
• path를 설정하기 위한 파일(.bash_profile)은 ‘숨김’ 상태이므로 보여지도록 설정합니다.(finder에서 ‘shift+command+.’을 동시에 누릅니다.)
• user_home(실습에서는 hxmac)에 ‘.bash_profile’ file이 보이지 않는다면 만들어 줍니다.
• ‘.bash_profile’ file(환경변수 파일) 만들기

development

development

1. 응용 프로그램 - 유틸리티 - 터미널
2. ls -a : 모든 file과 folder를 보여줍니다. (.bash_profile file이 있는지 확인합니다.)
3. .bash_profile file이 없다면 아래 명령어를 입력해서 .bash_profile file을 생성합니다.
4. 명령어 : touch .bash_profile

• flutter path 설정

1. .bash_profile file을 open
2. flutter setup page에 안내된 code를 복사/붙여넣기

붙여넣을 code : export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

1. [PATH_TO_FLUTTER_GIT_DIRECTORY] 부분에 실제 개발 환경의 경로를 넣습니다.

(터미널에서 development directory(folder)로 이동 후 pwd 명령어를 이용해서 현재 위치 경로를 얻습니다.)

—> 현재 위치 경로 : /Users/xxxmac/development

1. 최종 code : export PATH=“$PATH:/Users/xxxmac/development/flutter/bin” —> file 저장 & 닫기
2. Path 경로가 제대로 설정되었는지 확인 : terminal open - ‘flutter doctor’ 입력 - enter

(flutter doctor는 flutter가 제대로 작동하기 위한 setup이 제대로 되었는지를 check해서 결과를 알려줍니다.)

• 설정에 이상이 있는 경우 : -bash: flutter: command not found
• 설정이 정상적으로 된 경우 : Doctor summary (to see all details, run flutter doctor -v): ……….

 

6. Flutter SDK 설정을 완료한 후 iOS app과 Android app 개발을 위한 software를 설치하고 관련 설정을 해야 합니다.

 

7. iOS app 개발을 위해서는 native app을 개발하는 경우든 flutter iOS app(=not native code)을 개발하는 경우든 항상 Apple사의 development IDE인 Xcode를 설치해야 합니다. Xcode 프로그램은 Apple사의 컴퓨터인 Mac에만 설치가 됩니다. 따라서 window PC로는 Android app 개발만 가능하며, Mac으로는 iOS app과 Android app 모두 개발이 가능합니다.

 

8. Xcode 설치 : flutter setup page에 안내된 링크(Mac App Store)를 click해서 아래 주소로 이동해서 Xcode를 설치합니다.

https://itunes.apple.com/us/app/xcode/id497799835

(자신의 Mac이 최신 OS가 아니라면 최신 버젼의 Xcode 설치가 불가능 할 수도 있습니다. 이럴 경우는 OS version을 업그레이드 할 수 없다면 하위 version의 Xcode를 설치해야 합니다.)

(현재는 Xcode 10.2 version으로 설치 링크가 연결되었습니다.) 

 

* Mac OS version별 설치 가능한 Xcode version 정보 : ~~~

• 하위 version의 Xcode를 설치하는 방법 : ~~~
• 이번 실습시 사용한 Mac OS는 High Sierra version이며, 설치 가능한 최상위 version의 Xcode인 10.1 version을 설치했습니다.

————————

 

9. Flutter doctor를 실행해서 iOS 관련 설정을 진행합니다.

* Flutter doctor 실행

• iOS toolchain 항목 느낌표 해결

brew update —> 오류 -bash: brew: command not found

ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

 

위 명령어로 homebrew를 install한 후 다시 brew update 명령어 실행

hxui-MacBook-Pro:~ xxxmac$ brew update

Already up-to-date.

 

brew install --HEAD usbmuxd

brew link usbmuxd

brew install --HEAD libimobiledevice

brew install ideviceinstaller

brew install ios-deploy

Download brew at https://brew.sh/. (위에서 homebrew를 download했으므로 이 과정은 생략합니다.)

 

———————————

 

Flutter doctor 재실행

[!] iOS toolchain - develop for iOS devices

    ✗ Xcode installation is incomplete; a full installation is necessary for iOS

      development.

      Download at: https://developer.apple.com/xcode/download/

      Or install Xcode via the App Store.

      Once installed, run:

        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

    ✗ CocoaPods not installed.

        CocoaPods is used to retrieve the iOS platform side's plugin code that

        responds to your plugin usage on the Dart side.

        Without resolving iOS dependencies with CocoaPods, plugins will not work

        on iOS.

        For more info, see https://flutter.dev/platform-plugins

      To install:

        brew install cocoapods

        pod setup

 

Xcode를 이미 설치했으므로 위 내용 중

sudo xcode-select --switch /Applications/Xcode.app/Contents/

만 실행함.

 

brew install cocoapods

pod setup

 

——————————————

 

Flutter doctor 재실행

 

hxui-MacBook-Pro:~ xxxmac$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.13.6 17G7024,

    locale ko-KR)

[✗] Android toolchain - develop for Android devices

    ✗ Unable to locate Android SDK.

      Install Android Studio from:

      https://developer.android.com/studio/index.html

      On first launch it will assist you in installing the Android SDK

      components.

      (or visit https://flutter.dev/setup/#android-setup for detailed

      instructions).

      If the Android SDK has been installed to a custom location, set

      ANDROID_HOME to that location.

      You may also want to add it to your PATH environment variable.

 

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)

[!] Android Studio (not installed)

[!] Connected device

    ! No devices available

 

————————————————————————-

 

10. 아래 사이트에 접속해서 Android studio를 설치합니다.

https://developer.android.com/studio

설치 과정 중 ‘Android Virtual Device’ checkbox를 선택합니다.

(SDK경로는 기본값 유지 : /Users/xxxmac/Library/Android/sdk)

설치가 완료된 화면에서 Mac 왼쪽 상단 'Android Studio - Preferences - Plugins’를 선택하면 나오는 상단 검색창에서 flutter를 검색합니다. --> install을 눌러서 flutter를 설치하고, flutter 설치 과정에서 안내하는대로 dart도 설치합니다. --> Restart IDE를 선택해서 Android studio를 재시작하면 초기 화면에 ‘Start a new Flutter project’ 항목이 새로 나타납니다.

(설치 과정의 마지막 단계에서 Android app 개발 관련 SDK와 tool이 download되면서 시간이 꽤 소요되는데, 이 file들은 flutter를 이용해서 android app 개발을 하기 위해서도 역시 필요한 것들입니다.)

 

• flutter doctor를 실행해서 아래와 같은 결과를 확인합니다.

hxui-MacBook-Pro:~ xxxmac$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.13.6 17G7024,

    locale ko-KR)

 

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

    ✗ Android licenses not accepted.  To resolve this, run: flutter doctor

      --android-licenses

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)

[✓] Android Studio (version 3.4)

[!] Connected device

    ! No devices available

 

• 명령어 실행 : flutter doctor —android-licenses —> 모든 라이센트 항목에 대하여 accept(y) 선택 —> 완료 메세지(=All SDK package licenses accepted)

 

• flutter doctor를 재실행해서 결과를 확인합니다.(1개 항목 느낌표만 남으면 정상입니다.)

hxui-MacBook-Pro:~ xxxmac$ flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.13.6 17G7024,

    locale ko-KR)

 

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)

[✓] iOS toolchain - develop for iOS devices (Xcode 10.1)

[✓] Android Studio (version 3.4)

[!] Connected device

    ! No devices available

 

—> ‘Start a new Flutter project’ 를 실행해서 신규 project를 생성하고 상단의 button들을 이용해서 iOS simulator와 Android emulator를 각각 실행하고, 각 OS 종류 선택 후 play button을 눌러서 app을 빌드하고 실행시킵니다.

 

• iOS simulator 화면이 나오지 않는 문제가 발생함.

확인해보니 Xcode에서 iOS simulator를 설치하지 않아서 발생한 문제였음.

• 확인 : Xcode - Contents - Applications 위치에 iOS simulator가 있어야 하는데 현재 없었음.
• 해결 : Xcode - Mac 좌상단 Preferences - Components - iOS 10.1 Simulator 다운로드

참고

https://hackernoon.com/manually-install-ios-simulators-in-xcode-f7e4bbe50753

simulator download 주소

https://devimages-cdn.apple.com/downloads/xcode/simulators/com.apple.pkg.iPhoneSimulatorSDK11_4-11.4.1.1527703358.dmg

—> 위와 같이해도 해결이 되지 않았었지만 Xcode 9.4.1 version을 설치하고나니, 9.4.1 version과 10.1 version에서 모두 simulator가 정상적으로 작동하게 되었음.

(전에는 10.1 version만으로도 정상적으로 작동한 경우가 있었음.)

 

이제 개발 환경 설정이 완료되었습니다.

 

————————————————————————————————

 

*** 개발환경은 두 가지 방법으로 사용할 수 있습니다.

1. Android studio를 code editor로 사용하는 방법 : 가장 기본적인 방법이나 hot reloading 기능 사용이 불가함.
2. Visual Studio Code 또는 자신이 좋아하는 editor를 사용하는 방법 : hot reloading 기능 사용 가능.

(앞으로의 실습에서는 2번 방법을 사용하겠습니다.)

 

————————————————————————————————-

 

*** Visual Studio Code editor를 이용하는 개발환경 setup 방법

 - 사용자 Home에 앞으로 여러가지 flutter app들을 만들게 될 flutter_apps folder를 만들겠습니다.

위치 : /Users/xxxmac/flutter_apps

 - terminal에서 flutter_apps folder로 이동해서 아래 명령어를 실행해서 연습용 flutter app(sample flutter app)을 만듭니다.(project name에는 공백이나 대시(‘-‘) 등이 들어가면 안되고 대신 underscore 사용은 가능합니다.)

명령어 : flutter create sample_flutter_app

 - 만들어진 Project folder로 이동 : cd sample_flutter_app

 - flutter app 실행 명령 : flutter run —> No connected devices(flutter app을 실행하기 전에 사용할 device를 연결해야 합니다.)

 - device 연결 : iOS simulator 또는 Android emulator를 실행한 상태에서 flutter run 실행

 - Visual Studio Code 설치 : https://code.visualstudio.com 에 접속해서 설치 —> flutter extension 설치(flutter extension이 설치되는 과정에서 dependencies로서 dart extension도 함께 설치됩니다.)

 - Visual Studio Code의 extension으로 app UI design을 위해서 필요한 Material Icon Theme도 찾아서 설치합니다.

 - Code 수정 및 반영 여부 test하기 : VScode에서 sample_flutter_app 폴더를 open —> lib의 main.dart file 내용을 수정 : _counter++를 _counter=_counter + 3으로 수정

 - terminal에서 hot reloading을 실행(r을 누릅니다.) —> simulator에 실행된 app의 + button을 누를 때 숫자가 1씩 증가했던 것이 이제는 3씩 증가하는 것을 확인합니다.

 

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild

state), press "R".

 

 - virtual device 용어 구분 : iOS(simulator), Android(emulator) (실습 project 진행시는 용어가 혼동될 수 있으니 특별한 언급이 없는 한 virtual device로 통일하겠습니다.)

 - 연결된 모든 device에서 flutter app을 실행시키는 명령어 : flutter run -d all (all 대신 device ID를 넣으면 특정 device를 선택적으로 실행 가능합니다.)

 

*** 개발환경 setup이 끝난 후 flutter app을 실행시키고 개발을 시작하기 위한 과정 요약

1) iOS simulator 실행 : Xcode 실행 - Mac 하단 application bar - 실행된 Xcode에서 마무스 오른쪽 click - Open Developer Tool - Simulator 실행 —> Xcode는 close

2) Android emulator 실행 : Android studio 실행 - Open an existing Android Studio project - 작업할 flutter app folder를 선택해서 project open - 상단 menu bar에서 Tools - AVD manager 실행 - emulator 실행 —> Android studio는 close

(위의 과정 중 필요한 virtual device만 실행해도 됩니다.)

3) terminal open —> flutter doctor 명령어로 flutter 개발환경 이상 여부를 점검 —> terminal에서 작업 대상 project folder로 이동한 후 flutter run 또는 flutter run -d all(연결된 device가 여러개일 때) 명령어 실행 —> flutter app이 virtual device에서 실행되는 것을 확인.

4) Visual studio code를 실행 - 대상 project folder를 open

5) VScode에서 code 수정 —> terminal에서 r 또는 R을 입력해서 hot reload 또는 hot restart를 사용하면서 flutter app 개발을 진행합니다.