[모바일 / Flutter] 플러터 개발환경 세팅하기

회사에서 프론트엔드 뿐만 아니라 모바일 개발도 맡게 되었습니다ㅎ...

평소 모바일 개발도 해보고 싶었던지라 좋은 기회라 생각하고 수락했습니다!

 

회사 내 모바일 개발자가 없고 외주사를 통해 앱 개발을 진행했던지라

버전만 달랑 명시되어 있고 혼자 머리 깨져가며 세팅한 과정과 에러를 공유합니다.

1. Xcode 설치

앱스토어에서 설치했다고 끝이 아님!!

반드시 앱을 한 번 실행 시켜서 마저 다운로드

 

맥북이 업데이트 됨에 따라 CommandLinTools를 해당 경로로 설정해주는게 좋다고 합니다.

// 경로 확인
xcode-select -p
// 경로가 Library/Developer/CommandLineTools로 나오면 아래 실행
sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
// 경로가 /Applications/Xcode.app/Contents/Developer로 나와야 됨

 

라이센스 동의

sudo xcodebuild -license

// agree 입력

 

이렇게 나오면 라이센스 동의까지 완료

버전 확인

// Xcode 설정
sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

// 설정2
sudo xcodebuild -runFirstLaunch

Xcode 14.2 버전 설치

세아웍스 Xcode는 14.2에서 정상 작동함

앱스토어에서 제공하는 Xcode는 최신버전이라 에러발생

Xcodes app 다운로드

애플 Developer에서 다운로드도 가능하지만 저는 Xcodes라는 버전 관리툴을 사용해서 진행했답니다

brew install --cask xcodes

 

모바일 버전은 14.2 버전으로 실행이 가능해서 해당 14.2 버전 다운로드 

다운 받은 Xcode를 Xcode-14.2.0.app으로 이름 변경

 

Xcode 14.2.0 버전 실행 할때

터미널에서 아래 명령어 실행 후 프로젝트 실행

모바일 프로젝트 > ios 폴더 실행

/Applications/Xcode-14.2.0.app/Contents/MacOS/Xcode

 

2. 코코아팟, 자바, 루비 설치

회사 앱 플러터 버전이 2.10.5이라 코코아팟도 해당 플러터 버전과 호환되는 버전으로 설정

// 코코아팟 설치
sudo gem install cocoapods -v 1.11.3

// 설치 확인
pod --version

// 자바 설치
brew install openjdk@11

java --version

// 설치된 자바 버전 확인
/usr/libexec/java_home -V

// 원하는 버전으로 변경
export JAVA_HOME=$(/usr/libexec/java_home -v 11.0.22)
source ~/.bash_profile

아니면

// .zshrc 파일에서 환경변수 설정
export JAVA_HOME=/Users/루트디렉토리/Library/Java/JavaVirtualMachines/azul-11.0.22/Contents/Home

//Ruby 설치
brew install rbenv ruby-build
rbenv install 3.0.6
rbenv global 3.0.6
ruby --version

//환경변수 설정
//편집기 실행
vi ~/.zshrc

// Ruby PATH 추가
[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

//저장 후 적용
source ~/.zshrc

 

3. 플러터 설치

공식 문서 있는 설치 방법대로 따라하기

https://docs.flutter.dev/get-started/install/macos/desktop?tab=download

Start building Flutter native desktop apps on macOS

환경변수 설정

// 기본 쉘 사용할 경우
vim ~/.zshrc vim

//경로
export PATH="$PATH:/Users/나의폴더명/flutter/bin"


// 전부 볷붙
export ANDROID_HOME="/Users/나의폴더명/Library/Android/sdk"
export PATH="$PATH:$ANDROID_HOME/tools\:$ANDROID_HOME/tools/bin:$ANDROID_HOME/platform-tools"
 
export PATH="$PATH:/Users/나의폴더명/workspace/flutter/bin"

설정 후 터미널 껐다가 flutter --version 입력

 

flutter 버전 변경

회사 앱은 플러터 2.10.5 버전이라 아래 과정을 거침 

flutter 디렉토리로 이동 후 아래 명령어

git checkout 2.10.5

flutter --version
// flutter 버전 2.10.5 잘나오는지 확인

flutter doctor

 

4. Android Studio 설치

공홈에서 다운로드 받아주세요

https://developer.android.com/studio?hl=ko

Android 스튜디오 및 앱 도구 다운로드 - Android 개발자  |  Android Studio  |  Android Developers

실행 후 플러그인 dart, flutter 설치

 

Android SDK cmdline-tools 설치

Android Studio 프로젝트 > SETTINGS > Language & Frameworks > SDK Tools > Android SDK Command-line Tools 체크

 

Android SDK Build-Tool 33.0.1 체크

• Android Studio 프로젝트 > SETTINGS > Language & Frameworks > SDK Tools > Android SDK Build-Tool 33.0.1 체크

Android SDK Command Line-Tool 8.0 체크

Android Studio 프로젝트 > SETTINGS > Language & Frameworks > SDK Tools > Android SDK Command Line-Tool 8.0 체크

 

커맨드라인 도구를 설치한 후 아래 명령어 실행

// 안드로이드 라이센스 허가
flutter doctor --android-licenses

 

플러터 닥터 명령어로 현재 상황 확인해보기

flutter doctor

 

Dart / Project 환경 세팅

flutter 버전 확인

 

다트 / 프로젝트 세팅

 

5. flutter 의존성 설치

// 라이브러리 설치 명령어실행
flutter pub get

 

정상적으로 설치 완료 시

Build & Run

flutter pub run build_runner build --delete-conflicting-outputs