HyunJun 기술 블로그

Dart, Flutter Mac M1 개발 환경 구축 본문

Flutter

Dart, Flutter Mac M1 개발 환경 구축

공부 좋아 2023. 6. 20. 09:13
728x90
반응형

1. Flutter SDK 설치

https://docs.flutter.dev/get-started/install에 접속 -> macOS 클릭

 

Apple Silicon으로 설치.

2. 환경 변수 등록.

터미널 실행 후, 쉘 확인

@MacBook-Pro ~ % echo $SHELL
/bin/zsh

 

Flutter를 설치한 폴더로 이동

@MacBook-Pro Documents % cd /Users/hyunjun/Library/Mobile\ Documents/com~apple~CloudDocs/IT/Flutter/libraries/flutter/

 

bin 폴더로 이동 후 현재 폴더 경로 복사 후 메모장에 저장.

@MacBook-Pro flutter % cd bin 
@MacBook-Pro bin % pwd
/Users/hyunjun/Library/Mobile Documents/com~apple~CloudDocs/IT/Flutter/libraries/flutter/bin

 

vi 에디터로 .zshrc를 열어준다.

@MacBook-Pro bin % vi ~/.zshrc

 

환경 변수 관련 아래의 내용 추가, pwd에서 나온 결과를 $PATH: 다음에 넣고 저장 후 종료. 

export PATH="$PATH:/Users/hyunjun/Library/Mobile Documents/com~apple~CloudDocs/IT/Flutter/libraries/flutter/bin"

 

환경 변수 적용.

@MacBook-Pro bin % source ~/.zshrc

 

적용 확인

n@MacBook-Pro bin % echo $PATH

 

flutter 동작 확인.

@MacBook-Pro bin % which flutter
/Users/hyunjun/Library/Mobile Documents/com~apple~CloudDocs/IT/Flutter/libraries/flutter/bin/flutter

 

 

3. Xcode 설치

 

 

커맨드 라인 터미널에 붙여 넣기.

 

@MacBook-Pro bin % sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
sudo xcodebuild -runFirstLaunch

 

 

-license 실행

sudo xcodebuild -license

 

space를 눌러 맨 아래로 이동.

 

agree 입력 후 엔터.

4. Simulator

open -a Simulator

 

 

5. IDE로 사용할 Android Studio 설치

https://developer.android.com/studio

 

Apple Chip 용으로 다운로드 (M1)

다운로드된 파일로 설치

 

 

6. Android Studio 실행

기본 설정 및 추가 설치 파일 다운로드.

 

Plugins에서 Flutter 설치

 

 

Flutter는 Dart 기반이므로 Install 클릭.

설치 후 안드로이드 스튜디오 재실행.

 

 

New Flutter Project 클릭

 

Flutter SDK가 설치된 폴더 설정 후 Next 클릭

 

Project name과 location 설정 후 Create 클릭

 

 

 

아래와 같은 게 나오면 설치.

 

7. Android Device 설정

Device Manager 클릭 후, Create device 클릭

 

원하는 Device 클릭 후, Next 클릭

 

원하는(Tiramisu) Android SDK 설치

 

설치가 다 되면 Finish 클릭 후, Tiramisu, Next 클릭

 

AVD 설정 후, Finish 클릭

 

AVD 실행 및 확인

 

Settings에 들어가서 sdk 검색 후, 아래의 것들 설치확인 후 설치가 안 돼있으면 체크 후 OK 클릭(설치)

  • Android SDK Build-Tools 34
  • Android SDK Command-line Tools
  • Android Emulator
  • Android SDK Platform-Tools 

8. flutter doctor 확인

@MacBook-Pro ~ % flutter doctor

flutter doctor를 확인하여 flutter 개발 환경의 문제점을 찾고 해당하는 문제점 수정하기.

 

Android toolchain 관련 문제로 아래의 명령어 실행.

flutter doctor --android-licenses

license 관련하여 y/N 선택지가 여러 번 나오는데, 전부 y를 입력 후 엔터

 

다시 한번 flutter doctor 확인

9. cocoapods 설치

flutter doctor에서 "[!]"였던 CocoaPods를 설치해야 한다.

 

1) Homebrew 설치

그전에 먼저 패키지 관리자인 Homebrew를 설치해야 한다.

https://brew.sh/index_ko

 

아래의 문구를 터미널에 입력하여 설치.

 

명령어를 터미널에 입력하면 아래와 같이 뜨는데 엔터를 눌러 진행한다.

 

설치가 다 되면, eval로 시작하는 (드래그 된) 문구를 복사하여

터미널에 입력한다.

 

brew를 이용하여 cocoapods 설치 명령어 실행.

@MacBook-Pro ~ % brew install cocoapods

10. 아이폰 연결

안드로이드 스튜디오 프로젝트에서 info.plist를 찾아 들어가 Open iOS module in Xcode를 클릭한다.

 

Xcode가 뜨게 되는데, Runner -> Signing & Capabilities -> Add Account.. 클릭.

 

본인의 Apple ID로 로그인

로그인을 하게 되면 Team이 생기고 자신의 이름을 설정한다.

위의 Team 설정은 프로젝트를 실행할 때마다 진행해야 한다.

 

 

맥에 아이폰을 연결하게 되면 아래와 같이 연결해서 아이폰 기기를 통해 플러터 프로젝트를 확인할 수 있다.

처음 아이폰을 연결하면 여러 가지 설정이 필요할 수 있는데 Flutter 프로젝트 생성 및 아이폰 연결하기 글을 참고

728x90
반응형
Comments