Flutter / 1탄 : Flutter 시작, 설치하기 (Window, Android Studio)

 

개발을 하다보니 하나의 코드로 여러 플랫폼 (Android, IOS, Web)을 개발할 수 있는 Flutter에 흥미가 생기게 됐습니다.

그래서 공부를 시작하게 되었는데 그 기록을 여러분들과 공유하고자 합니다.

오늘은 그 1편 “Flutter 시작하기”입니다.

 

목차

1. Flutter 란?
2. Flutter SDK설치
3. Android Studio로 Flutter 예제앱 실행시키기

 

Flutter란?

특징과 장단점등은 다음 포스트때 얘기하도록 하고 오늘은 가볍게 개요정도만 훝어보도록 하겠습니다. Flutter는 Google에서 개발한 open-source software developement kit (SDK) 입니다. 많이 아시다시피 IOS, Android를 동시에 개발할 수 있는 프레임워크이며 최근(1년전?)에는 웹까지 추가됐습니다. 언어는 Google에서 개발한 Dart라는 언어를 사용합니다. 사용 IDE는 모든 TextEditor(VS Code, Intelli J, eclipse 등등…)에서 사용할 수 있으나 이번 포스트에서는 Android Studio를 기반으로 진행하도록 하겠습니다.

 

Flutter SDK 설치

Flutter는 결국 SDK이기 때문에 가장먼저해야되는 것은 SDK 다운로드입니다. Flutter SDK를 다운로드 하면 해당 SDK 버전에 맞는 Dart SDK가 같이 다운로드됩니다. (flutter\bin\cache\dart-sdk) 그렇기에 Dart SDK는 따로 다운로드 하실 필요가 없습니다.

 

다운로드는 해당 페이지에서 진행하실 수 있습니다. (Flutter Install 페이지 : http://bitly.kr/CXEh3ySivCh)

 

SDK 다운로드가 끝나면 zip파일을 원하는 위치에 압출풀기를 해주세요

 

(단 C:\Programs Files\과 같이 높은 권한을 요구하는 위치에는 압출풀기를 하시면 안됩니다!)

 

저 같은 경우는 아래와 같은 경로로 압출풀기를 했습니다.

 

(내 pc\C:\Users\UserName)

 

압축풀기까지 완료하셨다면 마지막으로 Flutter 환경변수를 설정해주어야 합니다.

 

아래와 같은 과정을 따라하시면 됩니다.

 

1. flutter/bin 경로복사

2. 내 pc(우 클릭->속성) -> 고급 시스템 설정 -> 고급 -> 환경변수창 열기

3. 사용자 변수 -> Path -> 새로 만들기 -> flutter/bin 경로복사 -> 완료

 

4. 작동 확인 (Cmd창 열기 -> flutter doctor 입력)

 

해당 화면이 나오면 Flutter SDK 설치는 완료됐습니다.

 

축하드립니다!

 

다음은 Android Studio에 Flutter 플러그인을 추가하고 예제앱을 작동해보도록 하겠습니다.

 

Android Studio로 Flutter 예제앱 실행시키기

가장 먼저해야할일은 IDE가 Flutter에 맞는 개발환경을 갖출 수 있도록 Flutter PlugIn, Dart PlugIn을 설치하는 것 입니다.

 

1. 윈도우 기준 (Files -> settings -> Plugins -> MarketPlace -> Dart, Flutter 각각 검색 후 install)

 

 

2. Android Studio를 껏다 다시키세요 (File -> Invalidate Caches / Restart -> Just Restart)

 

 

해당 과정을 거치면 Flutter 프로젝트를 생성할 수 있게 됩니다.

 

File -> new -> New Flutter Project

 

 

Next를 눌러서 Flutter Project를 생성해주세요

 

그러면 해당 화면과 같이 Flutter 프로젝트가 생성됩니다.

 

 

다음은 Android Studio에 Flutter SDK와 Dart SDK를 설정해주어야 합니다.

 

1. Flutter SDK 설정 (File -> Settings -> Flutter 검색 -> Languages & Frameworks/Flutter 선택 -> Flutter SDK 경로 입력 -> OK)

 

 

Dart SDK 경로는 설치한 Flutter 경로의 bin\cache\dart-sdk에 있습니다.

 

2. Dart SDK 설정 (File -> Settings -> Flutter 검색 -> Languages & Frameworks/Dart 선택 -> Dart SDK 경로 입력 -> OK)

 

 

이제 모든 세팅은 끝났습니다.

예제 앱을 실행시켜보기만 하면 됩니다.

실행시킬 디바이스를 연결시켜준 후

다음 버튼을 눌러주세요!

 

그러면 휴대폰 예제 앱 화면이 작동됩니다.

 

여기까지 오셨으면 Android Studio에서의 Flutter 설정은 완료했습니다.

전부 따라오시느라 고생하셨습니다!

다음 포스트에서는 Flutter의 특징/장단점에 대해서 말해보도록 하겠습니다.

감사합니다!