맥북에 Flutter 한방에 설치하기 (feat. 앱 만들기)

앱을 만들어 봅시다

눈쨔람을 만들어보겠뜹니다~ / 한입 와앙

기존에 잘 쓰던 어플이 하나 있는데 문제가 생겼다

앱 들어갈 때마다 3초씩 광고를 봐야함...

그래서 직접 앱을 만들어 보기로 했다

Flutter를 고른 이유는 iOS와 Android를 한번에 커버할 수 있는 편의성 때문이었음!!!

---

1. Flutter 설치

- 일단 sdk 저장할 디렉토리 만들기

mkdir -p ~/sdk

- 메뉴얼 다운로드 사이트에서 OS 환경에 맞게 SDK 다운로드 한다

https://docs.flutter.dev/install/manual

Install Flutter manually

unzip flutter_macos_arm64_3.38.5-stable.zip
mv flutter ~/sdk

- 이제 환경변수에 flutter 경로추가

# flutter 환경변수 추가
echo 'export PATH="$HOME/sdk/flutter/bin:$PATH"' >> ~/.zshrc

# 쉘 설정 다시 로드
source ~/.zshrc

# 확인
which flutter
flutter --version

- 잘 설치되었으면 누락된 부분 체크하기 위해 아래 명령어 실행

flutter doctor

- 여기서 해야하는 두가지는 안드로이드 스튜디오(APK)와 X-Code(iOS) 설치

---

2. 안드로이드 스튜디오 설치

- 앱 다운로드 받고 설치하기

- 설치할 때 에뮬레이터랑 빌드 툴 등등 설치한다

- 이제 기초적인거 설치하고 앱을 실행시켜보면 command-line이 누락되어있을 수 있음

- 그럼 아래처럼 체크하고 apply 눌러서 설치해주면 된다

- flutter에 라이센스 주면 됨 (질문 뜨는거 전부 y)

flutter doctor

- 안드로이드 관련 에러가 사라졌음을 확인

- 아래 명령어를 통해 연결된 기기를 확인해보자

- 참고로 안드로이드 기기를 연결할 것이라면 개발자 옵션에 가서 'USB 디버그 모드'를 켜줘야한다

flutter devices

- 아래처럼 SM-G998N (갤럭시 S21 울트라)가 연결된 것을 볼 수 있음

- 이제 아래 명령어로 테스트 앱  실행해보면 된다

(혹시 맨 처음 시작이라면 가만히 냅두면 된다 꽤나 시간 걸림)

flutter run

- 그럼 이제 아래 사진처럼 좔좔좔 실행됨

- 그리고 스마트폰에서의 동작에 따라 로그가 남는다

- fltter가 run 된 상태로 코드 수정하고 r 누르면, 바로 앱에 적용되는게 정말 좋았다

---

3. X-Code 설치

- Only 나만 쓸거고, 갤럭시 유저라서, 더군다나 x-code는 용량(15GB)도 겁나 잡아먹어서 설치를 안했다...

- 나중에 필요할지도 모르니까 방법과 순서를 기록해두겠다 (틀린 과정이 있을 수 있음 주의)

- 우선 App Store에서 욕을 오지게 먹고 있는 x-code를 설치한다

- 이후에 다 설치되면 터미널에서 명령어 두개 실행

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

- 이후엔 Cocoapod이란걸 설치한다

brew install cocoapods

- 잘 설치됐나 확인

pod --version

- 이후에 다시 flutter doctor로 확인하면 끝