[Flutter] 플러터(Flutter) 설치 및 환경설정 - Mac

 

플러터(Flutter) 설치하기

 

 

참고 : https://flutter-ko.dev/get-started/install/macos

 

[개발환경]

- MacBook M3

 

Rosetta 설치하기

---

sudo softwareupdate --install-rosetta --agree-to-license

 

Password 입력 후 설치가 진행됩니다.

 

[설치 로그]

 

 

brew로 플러터(flutter) 설치하기

---

brew install --cask flutter

 

[설치 로그]

 

플러터(flutter) 설정 확인

---

flutter doctor

 

[설정확인 로그]

 

 

XCode 설치

---

App Store에서 xcode 검색 후 설치

 

MacOS XCode 설치 커맨드

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

 

XCode 실행

 

상단 메뉴 Window > Devices and Simulators 선택

 

아무것도 설치된 것이 없습니다. Simulators 탭 하단에 + 버튼을 클릭 합니다.

 

OS Version > Dowmload more simulator rentimes 선택

 

ios 버전 옆 [Get] 버튼을 클릭하여 설치

 

설치 완료 후 Simulators에 목록이 생깁니다.

Android Studio 설치하기

---

구글 검색창에서 Android Studio 검색

 

[Android 스튜디오 다운로드] 버튼 클릭

 

동의 체크 후 [Mac with Apple chip] 선택 후 다운로드

 

왼쪽 아이콘을 Applications로 드래그하여 설치

 

Android Studio을 실행하여 아래 창이 나올 때까지 설치 진행

 

좌측 Siderbar 메뉴 Plugins 클릭 > Markerplace 에서 dart 검색 후 install 버튼을 클릭하여 설치

 

Markerplace 에서 flutter 검색 후 install 버튼을 클릭하여 설치

 

Flutter 설치 완료 후 Restart IDE 버튼을 클릭하여 Android Studio 재시작

 

Flutter 프로젝트 생성 버튼이 추가된 걸 확인할 수 있습니다.

 

More Actions > SDK Manager 선택

 

Android SDK Location 에 경로가 없으면 Edit를 눌러 설치

Android API 34가 설치되어 있지 않으면 체크 후 Apply를 눌러 설치

 

SDK Tools 탭 > 하단 5개 체크 후 Apply를 눌러 설치

More Actions > SDK Manager 선택

 

Android SDK Location 경로 복사

 

터미널에서 설정창 편집 명령어 입력

vi ~/.zshrc

 

Android SDK 경로 추가

export ANDROID_HOME=/Users/hyeseo/Library/Android/sdk

 

 

Flutter 설정 이슈

---

 

flutter doctor

 

설정 중에서 2가지가 부족합니다.

 

1. [!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)

flutter doctor --android-licenses

명령어 실행 후 y를 눌러 설치 완료하면 해결 됩니다.

 

2번째 문제

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

 

코코아팟 설치

brew install cocoapods

 

 

설치 완료 후 Flutter 설정을 다시 확인합니다.

flutter doctor

 

모든 설정이 완료 되었습니다!

 

Android Emulator 세팅하기

---

Flutter Project 클릭

 

Flutter SDK path에 아무 것도 없다면 경로 확인을 해야 합니다.

 

터미널에서 아래 명령어를 입력합니다.

flutter doctor -v

 

맨 위로 스크롤 하여 Flutter의 경로를 복사합니다.

 

복사한 경로 붙혀넣기 후 Next 버튼 클릭

 

Project location 우측 ... 버튼을 클릭

 

파인더 창에서 Desktop 클릭 후 New Folder 선택 후 폴더 생성

 

폴더 생성 후 우측 하단 Open 버튼 클릭

 

우측 하단 Create 버튼을 클릭하여 프로젝트 생성

 

좌측 Dvice Manager 클릭

 

좌측 + 버튼 클릭 > Create Virual Device 클릭

 

Phone > Pixel 7 Pro 선택 후 Next 버튼 클릭

(다른 Phone을 선택해도 되지만 Pixel과 Play Store에 마크가 있는 기종으로 선택 )

 

API Level 34를 다운로드 한다.

 

설치 완료 후 Next 버튼 클릭

 

애뮬레이터 이름을 변경합니다.

 

Startup orientation 에서 Portrait 선택 후 하단 Show Advanced Settings 버튼 선택

 

Internal Storage를 2048 MB -> 8 GB 로 변경

 

Finish 버튼 선택

 

Device Manager에 방금 만든 Flutter Study가 추가된 걸 확인할 수 있습니다.

 

좌측 상단 메뉴 Android Studio > Settings 선택

 

emulator 검색 후 Tools 탭의 Emulator Launch in the Rumming Devices tool window 체크 해제

Apply 하여 저장 후 OK

 

 

Device Manager의 Flutter Study 에뮬레이터를 실행

 

에뮬레이터 ... 클릭 > Settings 클릭 > Emulator always on top 활성화를 하면 에뮬레이터가 항상 위에 나타납니다.

 

Device 에서 Flutter Study(mobile) 선택 후 좌측 ▶︎ 버튼을 눌러줍니다.

 

console에 출력되며 완료될 때까지 기다립니다.

 

아래 화면이 나오면 완료 입니다!

 

iOS Emulator 세팅하기

---

Device > Open iOS Simulator 을 누르면 iOS Simulator가 실행 됩니다.

 

iOS Simulator를 클릭한 상태에서 상단 메뉴 window > Stay On Top을 누르면 iOS Simulator가 항상 위에 있습니다.

 

현재 실행중인 iOS Simulator와 동일한지 확인 후 ▶︎ 을 눌러줍니다.

 

console 창에서 출력됩니다.

 

iOS Simulator가 Flutter로 변경된 걸 확인하면 끝!