플알못 Flutter 0. 개발환경 구축(MacOS)

Flutter

Flutter(플러터)는 하나의 언어(Dart)로 멀티 플랫폼(모바일, 웹, 데스크톱) 개발이 가능한 크로스플랫폼 프레임워크입니다. 정식으로 지원하던 플랫폼이 Android와 iOS였던 것과 달리 얼마 전 발표된 Flutter 2.0에서는 Windows, MacOS, Linux 및 Web으로 확장되었다길래 한번 배워보고자 합니다.

Flutter의 특징

개발자가 작성한 코드는 Flutter API와 Dart 코드를 활용하여 Flutter SDK가 컴파일하여 각 플랫폼별 네이티브 코드로 변환됩니다.

UI 디자인은 구글에서 제창한 Materia 디자인과 애플에서 제창한 Cupertino 디자인을 사용할 수 있습니다. Flutter 자체적으로 UI를 렌더링하므로 두 디자인 모두 플랫폼과 상관없이 사용할 수 있습니다.

Flutter는 Platform Primitives(플랫폼 별 API를 호출하는 것)를 사용하지 않습니다.

  • 예를 들어 Flutter에서 RaisedButton() 함수를 호출하면 iOS의 UIButton, 안드로이드의 widget.Button을 각각 호출하지 않고 Flutter가 직접 버튼을 구현합니다.
  • 이렇게 함으로써 각 플랫폼 별 제약에서 벗어날 수 있으며, 플랫폼 별로 UI가 다르게 보여지도록 구현하는 과정에서 발생하는 손실이 없어지게 됩니다.

Flutter 개발환경 구축(MacOS)

자세한 개발환경 구축 방법은 https://flutter-ko.dev/docs/get-started/install/macos 링크를 참고합니다.

SDK 다운로드

먼저 https://flutter.dev/docs/get-started 에서 OS별 SDK를 다운받은 후 압축을 해제한 후 원하는 곳으로 이동시킵니다. 저는 /users/[USER_NAME]/Library/ 경로에 이동시켰습니다.

그 다음 사용하는 쉘 종류에 따라 프로파일에 flutter SDK 경로를 추가합니다. 보통 MacOS 카탈리나 버전 이전은 bash, 이후는 zsh(Z Shell)이지만, 정확히 알아내려면 터미널에서 echo $SHELL 명령어를 실행해보면 됩니다.

➜  ~ echo $SHELL
/usr/local/bin/zsh

홈 디렉토리(/users/[USER_NAME])에 있는 쉘 프로파일에 아래 내용을 추가합니다. bash쉘은 .bash_profile, zsh은 .zprofile 파일입니다.

PATH="$PATH:/Users/[USER_NAME]/Library/flutter/bin"
export PATH

Flutter 개발을 위한 프로그램 설치

flutter doctor 명령어를 실행하여 flutter 개발환경이 갖춰져 있는지 확인합니다.

➜  ~ flutter doctor
Running "flutter pub get" in flutter_tools...                    1,882ms
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.3 20D91 darwin-x64, 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/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.

[✗] 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 (not installed)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

! Doctor found issues in 3 categories.

모든 이슈 사항이 발생하지 않도록 안내에 따라 조치해줍니다.

  • CocoaPods는 물리 iOS 장비를 연결하기 위해 설치합니다. https://flutter.dev/docs/get-started/install/macos 링크의 Deploy to iOS devices 메뉴를 참고합니다.
  • XCode는 iOS 및 MacOS 앱 빌드 및 테스트를 위해 설치합니다. 앱스토에서 검색하여 설치할 수 있습니다.
  • Chrome 브라우저는 웹 앱 실행을 위해 설치합니다.
  • Android Studio 안드로이드 앱 빌드 및 테스트를 위해 설치합니다. 설치한 후 적어도 한 번 실행해줘야 합니다. https://developer.android.com/studio 링크에서 다운로드 받아 설치합니다.
  • VS Code는 Dart 언어로 코딩을 하기 위해 설치합니다. https://code.visualstudio.com 링크에서 다운로드 받아 설치합니다.
  • Android SDK file not found (android.jar) 에러 발생 시 Android Studio 실행 ➜ Configure ➜ SDK Manager ➜ 이미 설치된 Android SDK를 삭제 후 재설치해주면 됩니다.
➜  flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.2, on macOS 11.2.3 20D91 darwin-x64, locale
    ko-KR)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.54.2)
[✓] Connected device (1 available)

• No issues found!

에뮬(시뮬)레이터 실행

iOS 시뮬레이터는 open -a Simulator 명령어로 실행할 수 있습니다.

안드로이드 에뮬레이터는 Android Studio를 실행한 후 Configure ➜ AVD Manager에서 실행할 수 있습니다. 최초 실행 시 가상 안드로이드 기기를 생성해줘야 합니다.

Flutter 프로젝트 생성

flutter create [PROJECT_NAME] 명령어를 실행하면 현재 경로에 PROJECT_NAME 이름의 폴더가 생성되며, 그 안에 Flutter 프로젝트 관련 파일이 생성됩니다.

➜  flutter flutter create first_app
Creating project first_app...
  # (대충 파일 생성 내용...)
Running "flutter pub get" in first_app...                        2,431ms
Wrote 78 files.

All done!
In order to run your application, type:

  $ cd first_app
  $ flutter run

To enable null safety, type:

  $ cd first_app
  $ dart migrate --apply-changes

Your application code is in first_app/lib/main.dart.

flutter run 명령어를 실행하여 Flutter 앱이 잘 실행된다면 개발환경이 성공적으로 구축된 것입니다.

  • 에뮬레이터가 실행 중이지 않다면 크롬 브라우저에 웹앱이 실행됩니다.
  • 에뮬레이터가 여러 개 실행 중이라면 어떤 에뮬레이터에서 실행하지 선택할 수 있습니다.
Flutter
아이폰, 아이패드 및 Pixel 가상머신에 띄워본 Flutter 앱