플러터(Flutter) - VS Code 환경 구축하기 (Windows 환경)

 플러터(Flutter)를 시작하려고 결정했는데 안드로이드스튜디오와 VS Code 중 어떤 것으로 사용할지 고민하게 되었습니다. 고민 끝에 평소에 사용하여 익숙한 VS Code에서 플러터(Flutter) 공부를 시작하기로 했습니다.

 

 막상 시작하려고 하니 어떤거부터 시작해야할지 막막했는데, 역시나 환경 구축부터 시작하게 되었습니다. Windows 환경에서 플러터(Flutter) VS Code 환경 구축하는 방법입니다.

 

 

1. Flutter SDK 다운로드

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

Install

 위의 URL을 통해 자신의 OS에 맞는 Flutter SDK를 다운로드해야합니다.

 

 

 우선 저는 Windows 환경이기 때문에 Windows를 선택합니다.

 

 

 zip으로 다운로드하여 사용하기 위해서는 다운로드 버튼을 클릭하여 다운로드 받고, 원하는 경로에 압축을 해제합니다.

 

 

 VS Code에서 Flutter 경로를 설정할 때, 해당 경로로 연결해야하기 때문에 압축 해제한 경로를 기억해야합니다. 위에는 저의 경로이므로 꼭 동일한 경로로 압축을 해제할 필요는 없습니다. C드라이브 밑이나 기타 자신이 원하는 경로에 압축을 해제하면 됩니다.

 

 

 혹시 Git을 통해 다운로드를 원하는 경우, 위의 명령어를 통해 다운로드할 수 있습니다.

 ※ zip으로 다운로드하는 경우에 할 필요 없음.

 

 

2. Flutter 환경 변수 설정

 시작 버튼에 마우스 우클릭을 한 뒤 시스템(System) 메뉴를 선택합니다.

 

 

 고급 시스템 설정 (Advanced system settings) 메뉴를 선택합니다.

 

 

 환경 변수(Environvment Variables) 버튼을 클릭합니다.

 

 

 Path를 선택하고, Edit 버튼을 클릭합니다.

 

 

 New 버튼을 누르고, 아까 Flutter SDK를 다운로드했던 경로 하위 bin 폴더 경로를 저장합니다. 주의해야할 점은 flutter 경로가 아닌 flutter/bin 경로입니다.

 

 

3. VS Code 설치

https://code.visualstudio.com/Download

Download Visual Studio Code - Mac, Linux, Windows

 위의 URL을 통해 자신의 OS에 맞는 VS Code를 설치합니다.

 

 

 Extensions 메뉴를 선택하여 Flutter를 검색하고 Flutter Extension을 설치합니다.

 

 

4. Android Studio 설치

https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android Developers

 위의 URL을 통해 자신의 OS에 맞는 안드로이드 스튜디오를 설치합니다. VS Code로 환경을 구축하는데 왜 안드로이드 스튜디오를 설치해야하나 의문이겠지만 플러터(Flutter)를 사용하기 위해서 필요합니다.

 

 

5. Flutter Doctor

 플러터(Flutter)는 Flutter Doctor를 통해 환경 세팅이 정상적으로 되었는지 검사할 수 있습니다.

 

 VS Code에서 Ctrl + Shift + p 키를 누른 뒤 flutter를 검색하고 Flutter: Run Flutter Doctor를 선택합니다.

 

 

 그럼 Flutter SDK 경로를 묻는 질문창이 출력됩니다. Locate SDK 버튼을 클릭하고, 아까 설치한 flutter 폴더 경로를 연결해줍니다.

 

 

 이후 실행되는 Flutter Doctor에서 문제점이 0가 되어야합니다. 최초 설정하게되면 몇가지 문제가 발생하는데 해당 문제점에 대해서 구글링을 통해 해결이 필요합니다.