[Flutter] 플러터 개발환경 세팅 (MAC/VSCode)

플러터 개발은 Android Studio도 사용 가능하지만, 여기서는 VS Code를 선택하여 플러터 개발환경을 구축해보겠습니다. 간편한 설치 과정과 플러그인 지원을 통해 개발 생산성을 향상시킬 수 있습니다. 선택은 여러분의 편의에 따라 자유롭게 할 수 있습니다.

 

윈도우와 맥 모두 사용 가능하지만 주의할 점은 iOS 앱을 빌드하려면 맥이 필요합니다.

 

맥 환경에서 Visual Studio Code 를 통해 플러터 개발환경을 구축해보겠습니다.

 

1. 플러터 SDK 설치하기

아래 링크에 들어가서 플러터 SDK를 다운로드 하겠습니다.

자신의 맥 환경에 맞춰서 intel칩과 apple칩 중에 선택해서 다운로드 받습니다.

 

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

Start building Flutter native desktop apps on macOS

 

* 본인 맥의 칩 확인 방법
 좌상단 애플 로고 클릭 > 이 Mac에 관하여 > 팝업창 

(저는 Apple M2 Pro 칩이여서 Apple Silicon 파일로 다운받았습니다.)

 

 

원하는 경로에 압축을 푼다.

 

2. 환경변수 등록

터미널 설정파일에 플러터가 설치된 경로 값을 넣어주어야 합니다.

맥의 런치패드에서 터미널을 켭니다.

터미널 상단 확인

 

터미널 상단에 보면 -zsh라고 되어있다면 아래의 명령어를 입력한다.

vi ~/.zshrc

 

편집기가 열리고 자신의 flutter설치경로를 확인하여 아래와 같이 입력해준다.

맥 환경변수 설정

 

 

export PATH="$PATH:{flutter설치경로에서 bin까지 입력}"

 

* 자신의 flutter 설치경로 확인 명령어
which flutter

 

• 맥 터미널 편집기 사용방법

터미널 아랫부분에 --INSERT--표시가 있을때는 해당 파일을 편집할 수 있는 상태이고 저장하고 나가려면
1) esc버튼을 누른다.
     그럼 --INSERT-- 표시가 없어졌을 것이다.

 2) :wq 를 입력하고 엔터를 누른다.(저장 및 종료)
 3) 다시 vi ~/.zshrc 명령어를 입력해봤을때 환경변수 설정한 내용이 있으면 저장이 완료된것이다.
 4) 저장없이 나가려면 :q 로 나간다.(종료)

 

 

3. flutter doctor

플러터 SDK설치를 완료했다면 제대로 설치가 완료되었는지 확인해 보겠습니다.

명령 프롬프트 창을 열어 flutter doctor를 입력합니다. 

flutter doctor

 

아래와 같이 뜬다면 플러터 설치가 제대로 된것이며 이제 다음으로 설치해야 하는것들이 무엇인지 알 수 있습니다.

체크표시가 되어있지 않은 부분을 설치하면 됩니다.

flutter doctor

 

 

4. Android Studio 설치

아래 링크에 들어가 Android Studio를 다운로드하고 설치합니다.

 

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

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

 

설치를 완료했으면 터미널에서 아래 명령어를 입력합니다.

flutter doctor --android-licenses

 

그리고 터미널에서 flutter doctor를 실행하여 Android Toolchain항목에 체크가 되었는지 확인합니다.

체크가 안되었다면 설명을 읽고 해당 부분을 해결해줍니다.

 

5. VS Code연결하기

아래 링크에 들어가서 Visual Studio Code를 다운로드 및 설치합니다.

https://code.visualstudio.com/download

Download Visual Studio Code - Mac, Linux, Windows

 

VS Code에서 플러터를 사용하려면 몇가지 확장도구를 설치해야 합니다.

VS Code를 열고 좌측메뉴에서 블럭모양 버튼(extension)을 클릭합니다.

vscode extension

 

검색창에 flutter를 입력하여 설치합니다.

flutter

 

 

검색창에 dart 입력하여 설치합니다.

플러터 프레임워크에서 사용하는 언어인 dart를 사용하기위해 설치합니다.

dart

 

필수적인것은 위 두가지이며 개발할때 편리한 기능이 있는 확장도구들이 있는데 필요한것은 추가로 설치하면 되겠습니다.

 

이제 Flutter 개발할 준비가 다 되었습니다.