flutter 설치 및 개발 환경 설정 - VS Code, Android Studio 환경 (Mac silicon)

플러터로 앱 개발을 해보려고 플러터를 설치하고 필요한 환경을 구축해보았다.

나는 원래 웹 프론트 개발자이므로 VS Code는 설치되어있어 앱 개발 editor도 VS Code를 그대로 가져가고, 나머지 필수적인 것들만 최소한으로 설정하는 것이 목표이다. 

 

이 상태에서 필요한 준비물

• 플러터
• 타겟 디바이스
• VS Code에서 플러터 개발환경 셋팅

 

1. Flutter 설치하기 

플러터 공식문서를 참고해서 플러터를 설치해준다.

https://docs.flutter.dev/get-started/install/macos/mobile-android?tab=download#install-the-flutter-sdk

Start building Flutter Android apps on macOS

 

1. Apple Silicon 환경에서 필요한 Rosetta 2 설치

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

 

이런걸 설치해야되나? 하고 설치 안해봤는데 진짜 작동안했다;;

Apple Silicon 환경이라면 무조건 설치 필요 

Rosetta2는 원래 인텔 칩 맥북에서 쓸 수 있게 만들어진 앱을 실리콘 칩 맥북에서도 사용 가능하게 만들어주는 translator 역할을 한다고 한다.

 

2. Flutter SDK 설치

플러터 개발을 위한 Software Developement Kit을 설치해야한다.

 

Flutter SDK를 저장하고 싶은 디렉토리에 저장한다.

공식문서에서 추천해준대로 압축을 풀고 ~/development/ 에 저장

 

 

완료되면 flutter 파일들이 ~/development/flutter 안에 잘 저장이 되어있다. 

 

3. 환경변수에 Flutter 명령어 등록하기 

Terminal에서 Flutter 명령어를 실행하려면 PATH 환경변수에 Flutter를 추가해주어야 한다. 

 

텍스트 에디터 vim으로 .zshenv 파일 열기 

 

 .zshenv 파일 내부에 아래 코드를 작성한다.

export PATH=$HOME/development/flutter/bin:$PATH

 

복붙후 esc를 눌러 Normal mode에서 `:wq` 를 입력하여 저장후 vim 텍스트 에디터를 종료한다!

 

자자 그럼 이제 .zshenv 파일에 제대로 PATH 설정 코드가 잘 쓰여진건지 확인해본다. (just 확인용) 

cat 파일이름을 적어주어 해당 파일의 내용을 화면에 출력한다. 

 

적어준 내용이 잘 출력됨을 확인할 수 있다. 

 

 

이제 터미널에서 flutter 명령어가 잘 실행되는지 본다. 

 

또잉? 에러가 난다. 

 

이유는 PATH 환경변수는 공식문서와 똑같이 ~/development로 적어주었는데, flutter 폴더를 development 디렉토리가 아닌 다른데다 저장을 해놨어서였다. 

 

위에 1. Flutter 설치하기에서 설명해둔 것처럼 루트 폴더 하위에 development 폴더를 만들어 저장했으면 PATH에서 설정한 위치랑 동일하므로 제대로 잘 작동한다. 즉, 설치된 플러터 파일이 터미널 환경변수 PATH와 같은 위치에 저장되어야지 Flutter 명령어가 제대로 설정이 된다. 

 

 

이제 flutter 가 잘 깔렸고 터미널 명령어로도 실행되는 것을 볼 수 있다.

 

2. Android Studio 설치하기 

앱 개발은 모바일에서 돌아가는 앱이기때문에 실제 타겟 디바이스가 필요하다. 그럼 앱 개발자들은 개발할 때 무조건 물리적인 디바이스를 옆에두고 개발해야되는 것인가? 그렇지 않다. 타겟 디바이스는 물리적인 디바이스 or 가상 디바이스가 될 수 있다.

이때 가상 디바이스를 설정하기 위해 Android emulator를 설정해야한다. 

emulator란? 다른 프로그램이나 장치를 모방하는 전자기기

 

그래서 타겟 디바이스와 안드로이드 개발환경을 설정하기 위해서 Android Studio 설치가 필요하다. 

 

1. Android Studio 설치

https://developer.android.com/studio/install

Install Android Studio  |  Android Developers

 

2. Android components 설치 

 

More Actions > SDK Manager 

 

SDK Platforms 탭

Android API 34 설치

 

SDK Tools 탭

아래 컴포넌트들을 설치

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

 

3. 타겟 안드로이드 디바이스 설정

 

 

More Actioins > Virtual Device Manager > 왼쪽 상단에 있는 Create Device 버튼 클릭해서 원하는 디바이스 선택 

 

System Image 선택

System Image는 맥북이 Intel CPU인지 Apple CPU 인지에 따라 다르게 선택하는데, 나의 경우 pc는 MacBookPro M2로 Apple CPU 이므로 ARM Images 를 선택한다. 어차피 System Image 선택할때 pc환경에 맞게 Recommended 에서 추천항목을 선택하면 된다. 

 

이제 Device Manager에 내가 추가한 디바이스가 잘 뜨는 걸 볼 수 있다.

Run 버튼을 누르면 Launching emulator라는 상태바가 뜨면서 디바이스를 실행 준비 시킨다.

 

Android emulator를 실행 시킨 초기 화면!

실제 안드로이드 폰같은 화면이 뜬다.

 

이렇게 앱을 띄울 디바이스는 준비 완료! 

 

3. 플러터 앱 실행하기

https://codelabs.developers.google.com/codelabs/flutter-codelab-first#0

첫 번째 Flutter 앱  |  Google Codelabs

 

플러터 앱을 실행시키기 위해서는 플러터로 개발한 앱이 필요하다.

 

플러터로 앱 개발을 할 수 있는 코드 텍스트 Editor 나 IDE가 필요하다. 

Flutter 공식문서에서 명시해준 유명한 개발 옵션은 아래와 같았다. 

 

• Visual Studio Code 1.77 or later with the Flutter extension for VS Code.
• Android Studio 2023.2.1 (Iguana) or later with the Flutter plugin for IntelliJ.
• IntelliJ IDEA 2023.2 or later with both the Flutter plugin for IntelliJ and the Android plugin for IntelliJ.

 

나의 경우 원래 웹 프론트개발을 VS Code로 하므로 개발환경은 VS Code로 선택했다.

 

1. Visual Studio Code에 Flutter extension 설치

VS Code에서 플러터로 개발하려면 Flutter extension이 필요하다.

 

 

 

플러터 익스텐션을 깔면 이제 VSCode command palette에서 Flutter를 사용할 수 있다. 

 

2. 플러터 프로젝트 생성

`Shift+Cmd+P`로 command palette를 열어 flutter를 검색하여 새로운 프로젝트를 생성한다. 

 

Empty Application을 선택하고, 프로젝트를 생성할 폴더를 선택한다. 

 

나의 경우는 프로젝트의 이름을 flutter_webview_app 라고 지어줬다. 

 

프로젝트가 생성된 화면 

 

 

3. 앱 실행하기 

먼저 하단처럼 Current Device에 현재 작동중인 안드로이드 에뮬레이터가 잘 선택되어있는지 확인한다. 

 

그리고나서 플러터 앱을 실행하기 위해 디버깅 버튼을 누른다. 

 

 

조금 기다리다보면.. debug console에 아래와 같이

Resolving dependencies...

Got dependencies!

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

"Install Android SDK Tools (revision: 26.1.1)" ready.

 

요런 내용이 쭉쭉쭉 적히면서 로그가 찍힌다. 

 

그리고 빌드가 완료되면 저절로 앱이 Debug 모드로 잘 열린다!! 

 

🎉