Flutter 개발 환경 세팅했습니다. ( windows 10, Visual Studio Code )

 

Flutter를 공부하기 위해 개발환경을 세팅합니다.

저는 윈도우 운영체제를 사용해요. 개발은 VS Code로 합니다. 그런데 AVD를 실행해야하기 때문에 어차피 실행해야 하는 안드로이드 스튜디오로 개발하는게 더 좋은거 아닌가? 하는 생각이 들긴 하는데, 그냥 해볼랍니다.

 

 

 

설치해야하는 프로그램은 다음과 같습니다.

• JDK 1.8
• Flutter SDK
• Android SDK
• Android Studio
• Visual Studio Code

 

 

JDK 1.8 설치

JDK 설치는 넘어가겠습니다. ㅋㅋ

단, OpenJDK등을 사용하시는 경우 9, 11 등 최신에 가까운 버전을 사용하시는 분들이 많으실텐데, 글을 작성하는 시기(2019.05.10)에는 Flutter를 사용하기 위해 JDK 1.8 버전이 필요합니다. 저도 OpenJDK11을 기본 Path로 등록해 사용합니다. 하지만 Flutter 개발을 위해 짜증나지만 JDK 1.8 버전을 설치하고 환경 변수로 설정했습니다.

 

 

 

Flutter SDK 설치

flutter.dev

Flutter - Beautiful native apps in record time

 

 

 

위 주소로 접속합니다. 페이지에서 우측 상단의 [Get started] 버튼을 클릭합니다.

Flutter.dev 메인 페이지의 우측 상단

 

 

Install 페이지가 나옵니다. 사용하는 os에 맞는 버튼을 클릭합니다. 시스템 요구사항 명세와 함께 SDK를 다운로드할 수 있는 버튼이 나옵니다. 다운로드합니다. 저는 윈도우를 사용하고 있으니 윈도우를 선택했습니다. 

각 OS별 다운로드 버튼

 

 

다운로드를 하면 zip 파일이 받아집니다. 압축을 풀면 flutter라는 폴더가 나옵니다.

이 폴더를 원하는 위치로 이동시키고 [ 폴더위치/bin ] 경로를 환경변수로 등록합니다. 저는 'C:\Program Files\flutter\bin' 라는 경로를 등록했습니다.

 

Flutter.dev의 windows용 다운로드 버튼

 

 

 

Android SDK, Android Studio 설치

https://developer.android.com/studio
위 주소로 접속합니다.

 

 

페이지 중앙에 [ DOWNLOAD ANDROID STUDIO ] 버튼을 클릭합니다. 
(버튼 좌측 하단에 'DOWNLOAD OPTIONS'를 클릭해 다른 OS를 선택할 수도 있습니다.) 
다운로드가 완료되면, 설치를 진행합니다. 

설치가 완료되고 Android Studio를 실행하면 아래와 같은 화면을 볼 수 있습니다. 

안드로이드 스튜디오 설치 완료

 

 

우측 하단의 'Configure'를 클릭하면 여러 메뉴가 드랍다운되는데, 이 메뉴 중 'SDK Manager'를 클릭하고 안드로이드 SDK를 설치합니다. 저는 (2019.04.28 기준) 'Android 9.0 Pie'를 설치했습니다.

 

 

안드로이드 가상 시뮬레이터를 이용해 테스트를 하고자 하시면, 'AVD Manager'를 클릭해서 세팅하면 됩니다.

 

 

※ 안드로이드 스튜디오(Android Studio)를 이용해 Flutter를 개발하시려면, 위 화면에서 'Configure'를 클릭하고 'Plugin' 메뉴를 클릭합니다. Flutter와 Dart 플러그인을 설치하고 Android studio를 재시작합니다. 'Start a new Flutter project'라는 항목이 추가되는데, 이 항목을 통해 Flutter 프로젝트를 생성할 수 있습니다.

 

 

 

Visual Studio Code 설치

https://code.visualstudio.com

Visual Studio Code - Code Editing. Redefined

 

 

 

사용하는 운영체제에 맞게 다운로드하고 설치하면 됩니다. 메뉴얼대로만 하면되니까, 설치는 넘어갑니다.

VS Code로 코딩을 하기위해선 해당 언어를 위한 Extension을 설치해야합니다. 

반드시 'Flutter' 익스텐션이 필요합니다. 추가로 'Awesome Flutter Snippets', 'Dart' 익스텐션이 있으면 편리합니다.

 

vscode의 Flutter Extension

 

 

개발 환경 테스트

 

 

flutter의 개발환경이 잘 세팅되어있는지 확인하려면, 콘솔창(CMD, 터미널 등) 에서

flutter doctor

명령어를 실행시키면 됩니다. 

 

 

 

이 때, 안드로이드 기기를 PC와 연결했거나, 가상머신(AVD)을 실행시켜두는 것이 좋습니다. 체크 리스트가 표시되는데, Flutter SDK, Android SDK, IDE, 기기(또는 가상머신) 연결을 확인하네요.

 

 

 

 

모든 세팅이 잘 되었을 경우

Flutter 개발을 위한 환경 설정이 완료되었을 경우 나오는 화면

 

 

 

세팅이 완료되지 않은 경우

이슈가 발생한 경우 화면

 

 

 

삽질포인트!

저는 "Android licenses status unknown." 이라는 메시지가 나오는군요. 이 문제를 해결하기 위해선,

Android SDK 설치위치/sdkmanager.bat

파일을 실행해야합니다. 콘솔에서 해당 경로를 찾아간 뒤 

./sdkmanager --licenses

명령어를 타이핑하고 실행합니다.

 

 

글씨가 많이 주르륵 나오는데 잘 모르겠지만, 저는 예스맨이므로 y를 연타했습니다.

위 명령어를 실행할 때, JDK가 1.8 버전이 환경변수로 등록되어 있지 않으면 우리에게 친숙한 class not found exception을 보게 됩니다.

 

 

android license 동의를 쭉 해주시고 다시 'flutter doctor'를 실행해주셔서 모든 항목이 체크된 것으로 나오면 개발 환경 세팅이 끝난 것입니다.

 

 

 

마치 무슨 가이드나 강좌 형식의 글이 나왔는데, 앞으로도 처음 설치할 때만은 제가 한 것을 세세히 적으려 합니다. 설치 이 아무것도 아닌 일에 시간이 낭비되는게 여간 짜증나는 일이 아니더군요. 은근히 시간이 들어가기도 하구요.

삽질포인트! 는 제가 조금이라도 시간을 들여 구글링을 했어야만 하는 부분을 표시한 것입니다. 저처럼 한글밖에 모르는 밥O를 위해 Flutter 한글로 작성된 정보 글이 좀 더 많아졌으면 좋겠습니다.