Mac 환경에서 Flutter 설치하고 기본 어플 실행해보기!

안녕하세요. 오늘은 Flutter 를 Mac 환경에서 설치해보려고 합니다. Flutter는 아래와 같은 프레임워크입니다.

플러터는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크이다. 안드로이드, iOS용 애플리케이션 개발을 위해, 또 구글 퓨시아용 애플리케이션 개발의 주된 방식으로 사용된다.(출처 : wikipidea)

Flutter는 ios와 Android를 한 번에 만들 수 있는 프레임워크(Framework)로 한 번에 아이폰(iphone)과 안드로이드(Android)를 모두 개발할 수 있다는 점에서 매우 장점을 가진 프레임워크입니다. 아이폰과 안드로이드를 한 번에 개발할 수 있는 프레임워크로는 React Native와 Xmarin(자마린)과 같은 다른 도구들도 있습니다. Facebook에서 만든(현재는 meta) React Native가 가장 인기는 많은 것 같습니다.

아래의 링크를 참조하여 flutter 를 하나하나 설치해보았습니다. https://flutter-ko.dev/docs/get-started/install/macos

1. 설치하기

1.1. Flutter SDK 다운로드 & Run flutter doctor

위에서 말한 link가 작성 당시(21년 11월 21일 새벽 2시)에 failed 가 뜨는 에러가 발생했습니다. Google도 가끔 실수를 하는 것 같군요. 따라서, 미국 flutter 사이트에 가서 아래의 설치파일을 다운받았습니다. https://docs.flutter.dev/get-started/install/macos

이후 압축 파일을 원하는 위치로 옮긴 후, 아래의 명령어를 터미널에 입력하여 압축을 해제해줍니다. 이후 아래의 export 명령어를 입력하여줍니다.(현재 터미널 창에 대해서만 PATH 변수를 설정합니다. 영구적으로 사용하려면 링크를 클릭해주세요)

$ unzip ~/Downloads/flutter_macos_2.5.3-stable.zip
$ export PATH="$PATH:`pwd`/flutter/bin"

설치가 완료되고 아래의 명령어를 입력하여 현재 컴퓨터에서 어떤 파일들을 설치해야되는지 확인해봅니다.

$ flutter doctor

저의 경우는 Android toolchain과 Xcode가 설치되어 있지 않습니다.

2. 필요 SW 설치하기

2.1. Xcode 설치하기

AppStore(Apple Store)에 들어가서 Xcode를 설치해줍니다. 기본적인 설치시간이 매우 오래걸립니다.

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

설치가 완료되면 위의 명령어를 입력해줍니다.

$ MacBookPro flutter % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[!] Xcode - develop for iOS and macOS
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.

설치 완료 이후 CocoaPods 설치를 요구하여 아래의 명령어를 이용하여 정상적으로 모든 flutter에 필요한 요소들을 준비했습니다.

$ MacBookPro ~ % sudo gem install cocoapods

$ MacBookPro flutter % flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] IntelliJ IDEA Community Edition (version 2021.1.3)
[✓] VS Code (version 1.58.2)
[✓] Connected device (3 available)

2.2. Android Studio 설치하기

https://developer.android.com/studio 에서 안드로이드 스튜디오 최신판을 설치해줍니다.

설치 후 실행하면 안드로이드 스튜디오 SDK를 자동으로 설치해줍니다.

MacBookPro flutter % flutter doctor                                               
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale ko-KR)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.

---생략---

저의 경우는 설치 후에 Android cmdline-toolschain 으로 추가로 설치해야 될 요소들이 있었습니다. Preference의 Android SDK 메뉴에 들어가서 cmdline-tools 를 설치해줍니다.

설치 이후 아래의 명령어를 입력하여 라이센스를 동의해주면, 성공적으로 Android 인식이 됩니다.

flutter doctor --android-licenses

MacBookPro flutter % flutter doctor                   
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.5.3, on macOS 11.6 20G165 darwin-x64, locale ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✗] Xcode - develop for iOS and macOS
    ✗ 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
        sudo xcodebuild -runFirstLaunch
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your
        plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install see https://guides.cocoapods.org/using/getting-started.html#installation for instructions.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2020.3)
[✓] IntelliJ IDEA Community Edition (version 2021.1.3)
[✓] VS Code (version 1.58.2)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.