[Flutter] 설치하기 및 프로젝트 실행하기

안드로이드 - IOS 크로스 플랫폼 앱 개발이 가능한 flutter를 설치하는 방법에 대해 알아보자.

* Windows 기준으로 작성

 

1. 안드로이드 스튜디오 설치

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

Android 스튜디오 설치  |  Android 개발자  |  Android Developers

사이트에 나와있는대로 설치를 진행한다.

 

 

2. SDK 다운 받기

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

Windows install

위 사이트에서 파란 버튼을 클릭해 zip파일을 다운받는다.

압축을 풀어서 flutter 폴더를 옮겨놓는다. (나는 C:\src 폴더를 만들어서 옮겨놨다.)

그 후 환경변수를 설정해준다. flutter 폴더의 bin 폴더 경로를 추가한다.

 

flutter 폴더 안의 flutter_console.bat 파일을 실행해준다.

flutter doctor을 입력하면 현재 flutter 설치 환경을 확인해준다.

 

1. cmdline-tools component is missing ->

android studio의 sdk manager에서 SDK Tools 탭에서 Android SDK Command-line Tools(latest)를 다운 받는다. Show Package Details를 눌러서 latest 버전만 체크해 다운 받는다. Apply 버튼을 클릭하면 다운로드할 수 있다.

sdk manager 들어가기

cmdline-tools 다운받기

그 후 flutter doctor --android-licenses 를 cmd에 입력해 flutter 동의 절차를 진행한다.

y를 입력해 계속 진행한다

Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop
      development with C++" workload, and include these components

-> 현재 가지고 있는 Visual Studio 개발환경에 "C++을 사용한 데스크탑 개발" 컴포넌트가 없다는 것이므로 설치해준다.

다시 flutter doctor를 cmd에 입력해 설치 상태를 점검한다.

완료했다. 오예!

Connected device 에서 [!] 표시가 있다면 안드로이드 에뮬레이터를 생성하지 않은 것이므로 AVD Manager를 통해 에뮬레이터를 생성하면 해결할 수 있을 것이다.

3. Plugin 설치

다시 안드로이드 스튜디오로 돌아가서 flutter Plugin을 설치한다.

flutter 플러그인을 설치하면 Dart 플러그인도 설치하라고 창이 나오는데 Accept 버튼을 눌러 설치한다.

그러고나서 안드로이드 스튜디오 재시작. 

안드로이드 스튜디오 화면에 New Flutter Project 버튼이 생긴 것을 확인할 수 있다.

저 버튼으로 Flutter 프로젝트를 시작할 수 있다.

 

4. 프로젝트 실행하기

New Flutter Project 버튼을 눌러 Flutter 프로젝트를 시작한다.

flutter sdk path는 다운받은 Flutter sdk의 위치를 입력해준다.

프로젝트 이름을 입력하고 Finish를 클릭해 프로젝트를 생성한다.

 

프로젝트가 생성되고 한번 실행해봤다.

우선 에뮬레이터를 생성하고 아래처럼 AVD Manager에서 에뮬레이터를 실행한 상태로 앱 실행 버튼을 클릭했다.(main.dart가 실행되는 것이다.)

첫 실행 시 시간이 다소 걸린 후 에뮬레이터 상으로 앱이 실행되는 것을 확인할 수 있다.

 

참고 :

입문자를 위한 플러터(Flutter) 튜토리얼-재즐보프

Flutter 입문. 안드로이드, IOS 개발을 한번에-오준석의 생존코딩