MacBook M1에 iOS와 Android를 위한 Flutter 개발 환경 만들기

MacBook M1에서 iOS와 Android를 위해 Flutter 개발 환경을 만든 과정을 다루고 있습니다.

2022. 5. 29  최초작성

1. Android Studio를 설치합니다.

 

MacBook M1에 Android Studio 설치하기

https://webnautes.tistory.com/2026 

2. Xcode를 설치합니다.

 

MacBook M1에 Xcode 설치하기

https://webnautes.tistory.com/2024

3. Chrome 웹브라우저를 설치합니다.

 

https://www.google.co.kr/chrome/

4. Macbook M1은 Rossetta 2부터 설치해야 합니다.

 

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

 

참고 https://github.com/flutter/flutter/wiki/Developing-with-Flutter-on-Apple-Silicon  

 

5. Flutter SDK를 설치합니다. 다운로드 받아 원하는 위치에 압축을 풀어두면 됩니다. 본 글에서는 압축풀린 flutter 디렉토리를 홈디렉토리인 /User/사용자 이름에 복사해두었습니다.

 

아래 링크에서 Apple Silicon 항목에 있는 압축파일을 다운로드하면 됩니다. 

https://docs.flutter.dev/get-started/install/macos 

Flutter의 bin 디렉토리를 환경변수 PATH에 추가해주고 환경을 적용합니다.

 

echo "export PATH=\"\$HOME/flutter/bin:\$PATH\"">> ~/.zshrc

source ~/.zshrc

6. Android Studio와 Visual Studio Code에서 Flutter 프로그래밍을 하기 위한 준비를 할 차례입니다.

Android Studio 초기화면에서 Plugins를 선택한 후, flutter를 검색하여 찾은 항목의 install을 클릭합니다. 

 

Accept를 클릭합니다. 

 

추가 플러그인으로 Dart를 설치해야 한다고 물어봅니다. Install를 선택합니다. 

 

Restart IDE를 클릭합니다. 

 

restart를 클릭합니다.

7. Android Studio의 SDKManager에서 직접 Android SDK Command-line Tools(latest)를 선택하여 설치합니다.

 

 

8. jdk를 인식 못하기 때문에 해줘야 합니다.

webnautes@webnautesui-MacBookAir ~ % cd ./응용\ 프로그램/Android\ Studio\ Preview.app/Contents/jre

webnautes@webnautesui-MacBookAir jre % mkdir jdk

webnautes@webnautesui-MacBookAir jre % cp -rf Contents ./jdk

9. 터미널에서 다음 명령을 실행해줍니다.

 

iOS를 위해 필요한 명령입니다.

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

$ sudo xcodebuild -runFirstLaunch

$ sudo xcodebuild -license

 

$ sudo gem install cocoapods

 

Android를 위해 필요한 명령입니다.

$ flutter doctor --android-licenses

10. 다음 명령을 실행하여 Flutter 환경을 체크합니다.

$ flutter doctor

 

다음처럼 No issues found!라고 보여야 합니다.

webnautes@webnautesui-MacBookAir ~ % flutter doctor                   

Doctor summary (to see all details, run flutter doctor -v):

[✓] Flutter (Channel stable, 3.0.1, on macOS 12.3 21E230 darwin-arm, locale

    ko-KR)

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)

[✓] Xcode - develop for iOS and macOS (Xcode 13.2.1)

[✓] Chrome - develop for the web

[✓] Android Studio

[✓] VS Code (version 1.67.2)

[✓] Connected device (2 available)

[✓] HTTP Host Availability

 

• No issues found!

11. Flutter 프로젝트를 생성하고 안드로이드 폰에서 앱을 실행시켜 봅니다.  

 

11-1. 여기에선 안드로이드 프로젝트가 닫힌 상태에서 진행합니다.

안드로이드 스튜디오에서 New Flutter Project를 선택합니다.

 

 

왼쪽 리스트에서 Flutter를 선택한 후,  Flutter SDK path 항목에 flutter 경로를 입력해주고 Next 버튼을 클릭합니다. 

포스트대로 했다면 다음 경로입니다. 문제가 있는 경우 Flutter SDK를 찾지 못했다는 메시지가 창 아래쪽에 보입니다.

/Users/사용자이름/flutter 

 

Project name, Description, Organization을 입력 후, Android language와 iOS language를 선택합니다. Finish 버튼을 클릭합니다. 프로젝트가 생성되길 잠시 기다립니다. 

 

 

13-2. 가상 디바이스를 생성합니다. 메뉴에서 Tools > Device Manager를 선택합니다.

 

Create device를 클릭합니다.

 

 

Device로 Pixel XL을 선택하고 Next를 클릭합니다. 

 

 

S API 31에 보이는 Download를 클릭하여 시스템 이미지를 다운로드한 후, S  API 31가 선택된 상태에서 Next를 클릭합니다. 

 

 

 Finish를 클릭합니다.

 

 

이제 에뮬레이터가 생성되었습니다. 삼각형을 클릭하고 

 

 

다음 스크린샷처럼 에뮬레이터가 실행되길 잠시 기다립니다. 

 

 

13-3. 스크린샷처럼 에뮬레이터가 툴바에 보이게 됩니다. 보이지 않으면 콤보박스를 클릭하여 선택하세요.

오른쪽에 보이는  초록색 삼각형을 클릭하여 앱을 실행시켜 봅니다. 

 

 

Android Studio의 아래쪽에 Console 창이 보이면서 아래 메시지가 출력됩니다. 

Gradle 작업이 시작되는데 오래걸립니다. 

 

Launching lib/main.dart on sdk gphone64 arm64 in debug mode...

Running Gradle task 'assembleDebug'...

 apk 파일이 생성되었다는 메시지가 보인 후, 잠시후 설치가 되었다는 메시지가 보였습니다.  

 

✓  Built build/app/outputs/flutter-apk/app-debug.apk.

기다리는 동안 에뮬레이터를 독에서 분리하여 별도의 윈도우로 변경시킵니다.

스크린샷처럼 톱니바퀴 아이콘을 클릭합니다.

 

메뉴에서 View Mode > Window를 선택합니다. 이제 에뮬레이터가 별도의 윈도우로 분리됩니다.

 

Device Manager에 보이는 최소화 아이콘을 스크린샷처럼 클릭힙니다. 

 

 

이제 넓은 작업 환경을 사용할 수 있습니다.

 

 

앱이 실행된후, 오른쪽 아래에 보이는 파란색 + 버튼을 클릭하면 화면 중앙에 보이는 숫자가 증가합니다. 

 

 

코드에서 다음 부분을 수정합니다. 

 

 

수정전

'You have pushed the button this many times:',

수정후

'버튼을 몇번 눌렀는지 보여줍니다:',

앱에 바로 반영된 것을 볼 수 있습니다. 

 

 

만약 반영이 안된다면 툴바에서 번개 아이콘을 클릭하세요.

 

 

12. 툴바에서 다음처럼 Open iOS Simulator를 선택합니다. 

 

 

다음처럼 iOS 시뮬레이터가 실행됩니다. 

 

실행된 iOS 시뮬레이터의 이름으로 변경합니다. 

 

오른쪽에 보이는  초록색 삼각형을 클릭하여 앱을 실행시켜 봅니다. 

 

다음처럼 실행된 것을 볼 수 있습니다.