Flutter 개발환경 구축하기 (for Mac, Visual Studio Code)

Flutter 공식 사이트 (flutter.dev)

 

이번 포스트에서는 Mac에서 Flutter 개발환경을 구축해보고자 한다.

iOS 앱을 빌드하려면 결국 Mac이 필요하기 때문에 Windows가 아닌 Mac을 선택했다.

 

설치할 목록은 다음과 같다.

• Android Studio
• Xcode
• Visual Studio Code
• Flutter SDK

---

1. Android Studio 설치하기

아래 경로를 통해 Android Studio를 설치한다.

 

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

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

 

설치 후, "Plugins > Marketplace"에서 "Flutter"를 검색해 설치한다.

 

"Plugins > Marketplace" 에서 "Flutter"를 검색하여 설치

 

 

다음 "More Actions"에서 "Android SDK Command-line Tools"를 설치한다.

 

"More Actions"에서 "SDK Manager" 선택

"SDK Tools" 에서 "Android SDK Command-line Tools" 설치

 

여기까지가 Android Studio 설치 과정이다.

 

참고로, Android Emulator를 실행하기 위한 "emulator" 명령어가 인식되지 않을 때에는 다음 구문을 "~/.zshrc"에 추가한다.

 

# Path to Android Home
export PATH=$PATH:$HOME/Library/Android/sdk/emulator
export PATH=$PATH:$HOME/Library/Android/sdk/platform-tools

 

2. Xcode 설치하기

Xcode는 다음과 같이 App Store에서 내려받아 설치하면 된다.

 

App Store에서 Xcode를 검색해 설치

 

설치과정은 별다른게 없지만, 꽤나 오래 걸리니 설치를 시작해 두고 잠시 다른 일을 하자.

 

728x90

3. Visual Studio Code 설치하기

이제 마지막으로 아래 경로에서 Visual Studio Code를 내려받아 설치해 보자.

 

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

설치 후엔 "Extension" 에서 "Flutter"를 설치한다.

 

"Extension" 탭에서 "Flutter" 검색 후 설치

 

이어서 "Flutter Widget Snippets"도 설치해 주자.

 

"Flutter Widget Snippets" 설치

 

 

Visual Studio Code와 관련된 설치 과정은 여기까지다.

 

4. Flutter SDK 설치하기

이제 다음으로 아래 경로에서 Flutter SDK를 다운로드하여 설치한다.

 

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

Install Flutter manually

자신이 보유한 Mac의 Architecture에서 맞게 다운로드하여 설치한다.

 

다운로드한 "flutter_macos_arm64_3.35.7-stable.zip" 파일의 압축을 풀어 원하는 경로에 저장한다.

여기서는, 아래 자동으로 설치할 경우와 마찬가지로 "~/develop/"에 저장한다.

 

이어서, 다음과 같이 "~/.zshrc" (또는 "~/.bash/_profile") 파일을 열어 다음 명령어를 추가해준다.

 

# "~/.zshrc" 파일 열기
> open ~/.zshrc

 

열린 "~/.zshrc" 파일 최하단에 다음의 내용을 추가한다.

 

# Path to Flutter SDK
export PATH="$PATH:$HOME/develop/flutter/bin"

 

이제 터미널을 다시 열어 다음의 구문으로 제대로 설치됐는지 확인한다.

 

# 정상 설치 여부 확인
> flutter doctor

 

정상 설치 여부 확인

 

위 과정에서 발생하는 에러는, 에러 메시지에 해결 방법을 상세히 설명하고 있어 따로 설명하지 않았다.

 

 

여기까지의 과정은 수동(Manually)으로 설치하는 것이었으며, 자동으로 설치를 원할 경우 아래 경로의 설명을 따라 진행하면 된다.

 

https://docs.flutter.dev/get-started/quick#install

Set up and test drive Flutter

 

---

 

Mac에서 Flutter 개발환경 구축과정은 여기까지다.