Flutter 개발환경 셋팅하기 (Mac mini)

https://docs.flutter.dev/get-started/install/macos

macOS install

 

# 시작하기 전에

 

# Flutter SDK 다운로드

2020년 말에 출시된 특정 모델부터 Intel 프로세서에서 Apple Silicon이 탑재되기 시작했습니다. Intel 프로세서가 탑재된 Mac의 경우, '이 Mac에 관하여' 화면에 '프로세서'라는 항목이 나타나고, Apple Silicon이 탑재된 경우 '프로세서'대신 '칩' 항목이 나타납니다.

 

# PATH 추가

터미널에 echo $SHELL을 입력하여 현재 사용중인 shell을 확인합니다. 저는 zsh을 사용하고 있기 때문에, $HOME/.zshrc를 열어 아래와같이 PATH를 추가해줍니다. 이때 [PATH_OF_FLUTTER_GIT_DIRECTORY]는 Flutter git repo가 위치한 곳으로 적절히 수정해주어야 합니다.

export PATH="$PATH:[PATH_OF_FLUTTER_GIT_DIRECTORY]/bin"

 

source $HOME/.zshrc 혹은 새로운 터미널 윈도우를 열어서 변경사항이 적용될 수 있도록 해줍니다. 아래 두가지 커맨드를 통해 위의 변경사항이 적용되었는지 여부를 확인할 수 있습니다.

echo $PATH
which flutter

 

# Flutter doctor 실행

매뉴얼의 순서를 따라 flutter doctor를 실행한 모습입니다. 설정을 완료하는데 필요한 플랫폼 의존성이 있는지 확인하기 위함이며, 내 개발환경을 체크한 결과를 터미널 창에 보여줍니다. 출력된 내용을 꼼꼼히 읽어보면 설치해야 할 다른 소프트웨어가 있는지 혹은 수행해야할 추가 작업이 있는지를 확인할 수 있습니다.

 

세상에 쉬운 일이 없습니다.  그 중 하나는 개발환경 셋팅하기 입니다. flutter doctor가 리포트한 두가지를 준비해봅시다.

 

1) Android toolchain - develop for Android devices

[✗] 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/docs/get-started/install/macos#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

https://developer.android.com/studio에서 설치가 가능하고

https://docs.flutter.dev/get-started/install/macos#android-setup에서 자세한 가이드를 얻을 수 었습니다.

 

안드로이드 스튜디오를 설치한 뒤 flutter config --android-sdk /Users/[   ]/Library/Android/sdk를 통해 안드로이드 SDK의 위치를 지정해주었습니다. SDK 위치를 확인하기 어렵다면 아래와같이 Preferences 창에서 확인 가능합니다.

그 후 발생한 license 관련 문제는 다음 블로그를 참고해서 Android SDK Command-line Tools, Android SDK Tools (Obsolete)를 다운로드하여 해결했습니다. https://calvinjmkim.tistory.com/60

 

 

2) Xcode - develop for iOS and macOS

[!] Xcode - develop for iOS and macOS (Xcode 13.4.1)
    ✗ 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.

Xcode를 설치해줍니다. 원래 깔려있었던 것 같은데 안 쓸거라 속단하고 지워버린 과거의 제가 원망스럽습니다.

다운받은 후 다시 doctor 커맨드를 수행하니 CocoaPods가 설치되어 있지 않다고 합니다.

URL에 있는 가이드를 따라 쉽게 설치할 수 있었습니다.

 

 

드디어 No issues found!

 

# iOS 시뮬레이터

iOS 시뮬레이터를 실행하는 방법은 1) Spotlight로 Simulator 검색

혹은 2) 커맨드에 open -a Simulator 입력

 

 

# 간단한 Flutter 앱 만들고 실행하기

flutter create my_app
cd my_app
flutter run

위 명령어들을 수행한 결과입니다.

 

 

이렇게 해서... Flutter 가이드 페이지의 첫번째 장을 무사히 넘겼습니다. 다음은 VSCode에 Flutter 개발 환경을 마저 구축한 뒤 한 주 정도 예제와 튜토리얼을 따라해보려고 합니다. 그 후 카카오톡 클론코딩으로 파인애플톡을 만들어 보겠습니다.