[Flutter] VSCode에서 Flutter 환경 구축하기

먼저 나의 환경은 Windows10이며 Flutter개발을 VSCode에서 진행하도록 환경을 세팅해본다.

 

크게 목차는

1. Flutter SDK 설치

2. VSCode 설치(+Flutter extension )

3. Android Studio(Android SDK와 Emulate 등을 설치하기 위함)

4. Flutter Doctor 실행

 

Flutter를 실행하는데 Android Studio, Visual Studio를 설치해야하는 것에 불편함을 느끼지 않을 수 없지만, 

SDK나 다른 Tool 등을 따로 설치 불가능하니 어쩔 순 없다.

 

---

1. Flutter SDK 설치

- 아래 사이트에서 본인의 OS를 선택한 뒤 SDK를 설치한다.

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

 

VSCode로도 설치가 가능한 것 같은데, 나는 따로 다운받아 환경변수를 잡아주는 쪽으로 선택했다.

 

환경 변수 경로에 설치한 Flutter SDK 경로( "flutter SDK 폴더/flutter/bin" )를 지정해준다.

 

2. VSCode Flutter extension설치

VSCode는 이미 설치되어 있어 생략하고,

Flutter extension을 설치한다. 

 

설치를 하게 되면 우측하단에 팝업창에 나타나는데, Flutter SDK 등록 팝업이다.

아까 Flutter SDK 설치 방법에 나와있던 것 중 "Use VSCode to install"의 방법이 "Download SDK"버튼으로 보인다.

하지만 나는 SDK를 따로 설치했으니 경로만 지정해주면 된다.

"Locate SDK"를 선택해주고 경로를 Fullter SDK 위치로 설정해준다.

(환경 변수로 등록한 "flutter/bin" 경로가 아닌 flutter 경로이다)

 

 

3. Android Studio 설치

아래 링크에서 Android Studio를 설치한다.

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

 

Android SDK, Toolchain 등을 설치하고 License등을 허용해야하기 때문에 설치로 끝나는게 아니고 실행까지 시켜야한다.

 

 

4. Flutter Doctor 실행

Flutter Doctor란 Flutter를 실행하기 위한 SDK, Toolchain 등을 확인하는데 

크게 Flutter, OS Version, Android Toolchain, Web broswer, Visual Studio, Android Studio, VSCode, Network resurces 항목이 있다.

 

사실 Flutter를 실행하기 위해 Android Studio, Visual Studio, Visual Studio Code를 설치해야 하는 것이다.

 

Flutter Doctor의 경우 사용자 환경이 각기 다르기 때문에 본문에 없는 Error는 직접 구글링해서 찾아야한다.

4-1. Adnroid toolchain

"cmdline-tools component is missing", "android license status unknown"오류는 Android Command를 확인할 수 없어 발생하는 오류로 보이며, Android SDK경로에서 sdkmanager를 통해 실행해도 되지만, GUI가 편하니 Android Studio를 실행하여 [File] - [Settings] - [Languages & Frameworks] - [Android SDK] - [SDK Tools]에서 "Android SDK Command-line Tools"를 설치한다.

 

 

4-2. Visual Studio

스샷을 못찍었는데, "Visual Studio is missing necessary components." 오류가 나타나는 것은 "C++를 사용한 데스크톱 개발"을 설치한다.

 

4-3. Android license error

"Some Android licenses not accepted. To resolve this, run:  flutter doctor --android-licenses " 오류는 라이센스에 동의만 해주면 되며 문구에도 적혀있듯이 " flutter doctor --android-licenses"를 실행하면 된다.

명령프롬프트나 파워쉘을 실행하여 "flutter doctor --android-licenses"를 실행해여 yes yes yes 해주면 된다.

 

 

 

이외 Flutter Doctor는 구글링하여 해결하고

아래와 같이 "No issues found!"가 출력되면 Flutter를 시작할 준비가 되었다는 뜻이다.