[Flutter] 플러터 설치 및 환경변수 설정(안드로이드, vsCode)

 

 

1. Java JDK 설치 및 환경변수 설정

플러터를 시작하기 전 아래의 링크를 통해 jdk 를 설치한다.

필자는 17 버전을 받았으며, 받은 java를 원하는 경로에 풀어놓는다.

https://www.oracle.com/java/technologies/downloads/#jdk17-windows

Download the Latest Java LTS Free

 

 

 

윈도우키 + E 키를 눌려 파일 탐색기를 연 후,

내 PC 우클릭 > 고급 시스템 설정 > 환경 변수를 클릭한다.

 

 

 

아래의 순서대로 사용자 변수의 Path > 편집 > 새로 만들기를 클릭하여 들어가,

앞에서 압축을 푼 JDK의 bin 폴더까지를 붙여넣고 확인을 누른다.

ex ) C:\Program Files\Java\jdk-17\bin

 

 

 

CMD(명령 프롬프트)를 열고 아래의 명령어를 입력해 java 경로가 잘 잡히는지 확인한다.

(간혹 바로 경로가 안 잡히면 재부팅하면 잡힐 것이다)

 

 

 

2. Flutter SDK 설치 및 환경변수 설정

아래의 링크를 통해 Flutter SDK 을 받을 수 있는 페이지로 이동한다.

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

Install

 

 

 

본인의 운영체제에 맞게 선택하여 클릭한다.

 

 

 

다운로드 버튼 클릭.

 

 

 

 

반응형

 

 

 

 

받은 Flutter SDK를 원하는 경로에 풀어넣는다.

필자는 C:\flutter 에 풀어 넣었다.

 

 

 

앞에서 Java의 환경변수를 등록한 것처럼 똑같은 순서대로 Flutter도 환경변수를 설정한다.

 

 

 

1 ~ 2 번을 순서대로 하여 환경변수를 설정했다면, 이제 안드로이드 스튜디오를 깔아보자.

 

 

 

 

3. 안드로이드 스튜디오 ( Android Studio )  설치 및 설정

아래의 Android Studio 설치 링크로 들어간다.

https://developer.android.com/studio?gclid=EAIaIQobChMIh9L9jqeM_QIVBNdMAh0ZcwCvEAAYASAAEgKKl_D_BwE&gclsrc=aw.ds 

Download Android Studio & App Tools - Android Developers

 

 

 

다운로드 버튼을 클릭하여 설치파일을 받고, 그대로 쭉 진행하면 된다.

계속 Next만 눌리면 된다.

 

 

 

설치가 끝난 뒤, Android Studio 를 실행하면 아래와 같은 창이 뜨는데 밑에걸 체크하고 OK를 누른다.

 

 

 

정상적으로 툴이 켜지면, 아래의 순서대로 Flutter Plugin 을 install 한다.

이 과정에서 Dart Plugin 까지 같이 install 할 거냐고 묻는데 Yes를 눌려 같이 받도록 한다.

install 이 끝나면, 해당 툴을 Restart 해주어야 한다.

 

 

 

다시 툴을 켜보면 아래처럼 Dart와 Flutter Plugin이 정상적으로 받아져있는 걸 확인할 수 있다.

 

 

 

Flutter 가 정상적으로 준비되었는지 최종 확인하기 위해 CMD(명령 프롬프트)를 다시 열고 아래의 명령어를 기입한다.

> flutter doctor

 

 

 

Flutter는 정상적으로 설치되었지만 스크롤을 내려보니 아래와 같은 에러가 뜨는데,

Android Command-line 어쩌고, Android license 어쩌고가 뜬다.

 

 

 

이를 해결하기 위해 다시 안드로이드 스튜디오를 열고, Customize > All settings... 를 클릭한다.

 

 

 

아래의 순서대로 Android SDK Command-line-Tools 를 체크하고 Apply를 눌러 적용한 뒤 OK를 누른다.

 

 

 

그리고 다시 CMD(명령 프롬프트)를 열어 터미널에 아래의 명령어를 입력한다.

> flutter doctor --android-licenses

 

 

 

그럼 뭔가 주루룩 뜨면서 동의하냐고 묻는데 y를 계속 입력하면 라이센스가 적용된다.

 

 

 

그리고 다시 아래의 명령어를 입력하면 정상적으로 마무리 된 것을 확인할 수 있다.

> flutter doctor

 

 

 

지금까지의 과정을 순서대로 따라했다면, 안드로이드 스튜디오로 flutter 를 사용할 수 있다.

 

아래의 4 번 항목은 vsCode(VisualStudioCode)를 사용하는 사람을 위해 간단하게 정리했다

 

 

 

 

4. vsCode ( Visual Studio Code ) 플러그인 설정

vsCode를 열어 좌측의 Extensions를 눌린 뒤 Dart를 입력해 다운받는다.

 

 

 

Ctrl + P 를 눌려 " > dart " 를 입력해 Dart: NewProject 를 클릭한다.

(Eclipse KeyMap이 깔려있는 분은 Ctrl +Shift + R 키로 누르면 된다)

 

 

 

Console Application 클릭

 

 

 

소스를 만들 디렉터리를 선택한다.

 

 

 

프로젝트 명을 기입한다. 필자는 helloworld로 지었다.

 

 

 

아래처럼 소스가 만들어지면 bin 폴더에 helloworld.dart 파일을 열고 Run을 눌려본다.

HelloWorld가 찍힐 것이다.