설치

Flutter

설치환경

• 최소 700MB의 용량이 필요한데 10GB는 있어야 원활한 개발이 가능
• iOS에서는 Mojave이상의 운영체제에서 설치가능

설치방법

참고사이트: https://docs.flutter.dev/get-started/install

1. flutter_macos_3.16.5-stable.zip을 다운받으세요 (CPU가 Intel인경우).

2. 압축을 풀면 flutter폴더가 생성되는데 이것을 home 폴더에 Developer라는 임의의 폴더를 하나 생성하고 그 안으로 이동시킵니다.

3. 이제 PATH 환경변수에 flutter 실행파일 경로를 추가해서 시스템에 flutter명령어를 실행할 파일의 위치를 알려줍니다.

.zshrc 파일을 열어 아래 명령어를 추가합니다.

export PATH="$PATH:$HOME/Developer/flutter/bin"

터미널을 재실행하여 PATH설정이 잘 되었는지 확인합니다.

$ which flutter
/Users/slim/Developer/flutter/bin/flutter
$ flutter --version
Flutter 3.13.4 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 367f9ea16b (3 months ago) • 2023-09-12 23:27:53 -0500
Engine • revision 9064459a8b
Tools • Dart 3.1.2 • DevTools 2.25.0

.zshrc에 위 명령어를 추가해도 터미널 재실행시 flutter가 인식되지 않으면 iOS버젼이 낮은거에요. .bash_profile에 넣으면 될거에요

flutter를 실행하기 위해 빠진것이 없는지 확인하기 위해 flutter docker를 실행합니다.

$ flutter doctor

┌─────────────────────────────────────────────────────────┐
│ A new version of Flutter is available!                  │
│                                                         │
│ To update to the latest version, run "flutter upgrade". │
└─────────────────────────────────────────────────────────┘
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.4, on macOS 12.7.1 21G920 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] Connected device (3 available)
[✓] Network resources

• No issues found!

flutter가 사용하는 언어 dart는 flutter를 설치하면 자동으로 함께 설치가 되기 때문에 별도로 설치하지 않아도 됩니다.

만약 flutter docker가 아래와 같이 뭔가 추가로 설치하라고 지시하면 지시대로 해당 모듈을 설치하여 flutter를 실행하는데 필요한 모든 모듈들을 모두 설치해주세요.

[-] Android toolchain - develop for Android devices
    • Android SDK at /Users/dash/Library/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://docs.flutter.dev/setup/#android-setup for detailed instructions.

Android Studio

참고사이트: https://developer.android.com/studio

위의 사이트에서 Android Studio를 다운로드하고 설치합니다.

Android Studio를 열면 새프로젝트를 시작할수 있는 Welcome 화면이 뜹니다. 새로운 프로젝트를 시작하기 전에 Android Studio가 flutter를 잘 인식하고 있는지 확인해볼게요.

왼쪽 사이드바에서 Plugins를 클릭하면 오른쪽 패널에 함께 설치된 각종 라이브러리 목록이 뜹니다. 검색창에 flutter를 쳐서 Flutter Plugin을 설치해주세요. 그리고 Android Studio를 재실행하면 아래와 같이 체크박스에 on이 들어옵니다.

새로운 flutter 프로젝트를 시작해볼게요. New Flutter Project를 클릭하면 아래와 같이 뜨는데요. 여기서 Flutter SDK path가 정확한지 확인합니다.

Next버튼을 누르면 프로젝트의 이름 및 파일들의 저장위치를 지정할수 있는 화면으로 이동합니다.

프로젝트 이름을 적절히 변경하고, 각종 파일들의 위치를 지정한 뒤 create버튼을 클릭하면 아래와 같이 새 프로젝트가 생성됩니다.

Android Emulator

상단 메뉴에서 Device Manager 아이콘을 클릭합니다. Device Manager 패널의 상단에 Create Device버튼을 클릭하여 시뮬레이션을 하고 싶은 Device를 선택한뒤 Next버튼을 클릭합니다.

System Image를 선택하는 화면에서 Pie를 선택합니다. Pie 옆에 다운로드 버튼을 눌러 다운로드한 뒤 선택할수 있습니다.

옵션을 다 선택했으면 최종적으로 애뮬레이터 이름을 정한뒤 Finish버튼을 클릭합니다.

Device Manager패널에 새로운 Android 애뮬레이터가 추가 되었습니다. 프로젝트를 실행하기에 앞서 ▶버튼을 눌러서 애뮬레이터를 실행해줍니다.

Android Studio의 상단메뉴에서 애뮬레이터를 선택하고 main.dart파일을 선택한뒤 ▶실행 버튼을 누르면 맨 아래 Console창이 열리면서 컴파일 진행상태를 보여줍니다. 새 프로젝트의 첫 실행은 시간이 걸릴수 있습니다.

Device Manager의 애뮬레이터에 Sample프로젝트가 실행되었습니다.

iPhone Simulator

Install Xcode

참고자료: https://docs.flutter.dev/get-started/install/macos#ios-setup

여러분의 맥북에서 App Store 를 열고 Xcode를 검색해서 설치합니다. 설치가 끝나면 LaunchPad에 Xcode 아이콘이 보이고 그걸 열면 Xcode의 Welcome화면을 볼수 있습니다.

터미널에서도 xcode가 새로이 설치한 Xcode를 사용하도록 설정해줍니다.

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

# agreement
sudo xcodebuild -license

iOS 시뮬레이터 설정

iOS 시뮬레이터 다운로드

xcodebuild -downloadPlatform iOS

simulator.app을 search하거나 open -a Simulator 명령어를 통해서 시뮬레이터를 실행하면 상단에 Simulator메뉴가 나타나는데 거기에서 File > Open Simulator를 클릭해서 원하는 시뮬레이터를 실행할수 있습니다.

시뮬레이터를 실행한 상태에서 Android Studio를 확인하면 시뮬레이터가 메뉴에 들어와 있는 것을 확인할수 있습니다.