Web App Development/Flutter

[Flutter] 플러터 설치하기 (For Windows)

Windows에 Flutter를 설치하기 위해 아래와 같은 과정을 거쳐야 한다.

 


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

Flutter는 안드로이드 스튜디오에 종속되어 있기 때문에 반드시 안드로이드 스튜디오를 설치해야 한다.

안드로이드 스튜디오 설치를 위해 아래 링크로 이동하자.

 

Download Android Studio and SDK tools  |  Android Developers

The official IDE for Android app developers.

developer.android.com

 

라이센스에 동의하고 다운로드 버튼을 클릭한다.

 

 

다운로드가 완료되면 설치 파일을 실행시킨다.

아래와 같은 창이 뜨면 Next 버튼을 누른다.

 

 

Flutter로 프로젝트를 구성할 때는 Virtual Device를 주로 사용하기 때문에 여기서도 Next 버튼을 누른다.

 

 

안드로이드 스튜디오가 설치될 경로이다.

변경하지 말고 그대로 Next를 누른다.

 

 

시작 메뉴에 바로 가기 아이콘을 만들 것인지 물어보는 것이다.

그대로 Install 버튼을 누르고 설치하면 된다.

 

 

설치가 끝났으면 Next, Finish를 누르면 된다.

 

 

설치가 끝나면 자동으로 실행이 되는데 아래와 같은 Settings 창이 나올 것이다.

기존에 Android Studio를 사용했던 적이 있다면 Config or installation directory에 설정 파일을 넣어주면 되고 처음 설치한다면 Do not import settings가 선택된 채로 OK 버튼을 누르면 된다.

 

 

아래와 같은 창이 뜨면 Next를 누른다.

 

 

Install Type은 Standard가 선택되어 있을 것이다.

그대로 Next를 눌러 진행하자.

 

 

에디터 테마를 선택할 수 있다. 원하는 테마를 선택한 후에 Next를 누른다.

 

 

Android Studio를 사용하기 위한 여러 가지 SDK Tool들이 있는데 반드시 설치해야 하는 것들이기 때문에 Next를 누르면 된다.

 

 

라이센스들을 모두 Accept 하고 난 후 Fisnish 버튼을 누르면 SDK 다운로드를 시작한다.

 

 

다운로드가 완료되면 Finish 버튼을 누르고 종료한다.

 

 

 

 


2. Flutter 설치하기

 

Flutter 설치를 위해 아래 링크로 이동한 후 자신이 사용하고 있는 컴퓨터의 OS를 선택하자.

 

 

Install

Install Flutter and get started. Downloads available for Windows, macOS, Linux, and Chrome OS operating systems.

docs.flutter.dev

 

아래 버튼을 눌러 zip 파일을 다운로드하면 된다.

하지만 압축을 풀 때 주의해야 할 점이 있다.

C:\Programming Files와 같이 관리자 권한이 필요한 위치에는 다운로드하지 말자.

나는 D:\flutter 위치에 압축을 풀었다.

 

 

"시작 > 고급 시스템 설정 보기"로 이동한다.

 

 

고급 탭에서 환경 변수를 클릭한다.

 

 

사용자 변수에서 변수명이 Path인 것을 찾은 후 편집 버튼을 누른다.

 

 

새로 만들기를 눌러 "flutter를 설치 경로\bin"를 등록한 후 확인을 누른다.

아까 설치할 때 D:\flutter 위치에 설치했으므로 D:\flutter\bin을 등록하면 된다.

 

 

잘 설치가 되었는지 확인하기 위해 cmd(명령 프롬프트)를 실행시키자.

 

 

"flutter doctor" 명령어를 통해 flutter를 구동하기 위한 요구 사항들이 모두 만족되었는지 확인한다.

"flutter doctor --android-licenses" 명령을 통해서 Android toolchain을 사용할 수 있도록 한다.

 

 

혹시나 실행했을 때 이런 오류가 발생한다면 Android SDK를 최신 버전으로 업데이트하지 않아서 생긴 오류이므로 안드로이드 스튜디오를 실행시켜준다.

 

 

프로젝트 생성 화면에서 More Actions > SDK Manager로 이동한다.

 

 

아래와 같은 창이 뜨면 SDK Tools 탭으로 이동하여 Android SDK Command-line tools에 체크 표시를 해준 후 OK 버튼을 누른다.

 

 

아래와 같이 설치가 완료되었으면 이제 다시 cmd(명령 프롬프트)로 이동하자.

 

 

"flutter doctor --android-licenses"를 다시 입력해보면 이렇게 라이센스에 대한 동의를 하시겠냐고 물어본다. 여러 번 나오니 모두 y를 입력해주자.

 

 

모두 완료하고 "flutter doctor"를 해보면 flutter를 사용할 모든 준비가 완료된 것이다.

 

 

 


3. Flutter 실행하기

 

Android Studio를 실행시켜서 Plugins > Market place로 이동하여 Flutter를 검색하면 이래와 같이 Flutter를 설치할 수 있을 것이다. 설치 과정 중에 "Dart"도 설치해야 한다는 창이 나올 것이다. Flutter는 Dart 언어를 사용하기 때문에 당연히 OK를 눌러주면 된다.

 

 

Android Studio를 재시작하면 New Flutter Project라는 버튼이 하나 더 생길 것이다.

이 버튼을 클릭해보자.

 

 

Flutter를 선택해준 후 Flutter SDK path에는 Flutter를 설치했던 경로를 지정해준다.

 

 

프로젝트 이름을 설정한 후 Finish 버튼을 누르자.

이때 프로젝트 이름에는 대문자가 들어갈 수 없다.

 

 

아래와 같이 Flutter 기본 코드가 생성될 것이고 <no devices>라고 되어 있는 부분을 Chrome (Web)으로 설정해주면 크롬에서 간단하게 결과를 확인할 수 있다.

 

 

모바일 환경에서 동작을 확인하기 위해 AVD(Android Virtual Device)를 생성해야 한다.

AVD는 컴퓨터에서 휴대폰 환경을 구축할 수 있는 가상 디바이스를 말한다.

우측 상단에 있는 Device Manager를 클릭해준다.

 

 

Create Device를 클릭한다.

 

 

기본적으로 선택이 되어 있는 Pixel 2를 선택해준 후 Next를 누른다.

 

 

기본적으로 R이 선택되어 있을 것이다.

R 옆에 있는 Download를 눌러 다운로드하고 Next를 누른다.

 

 

세로 화면으로 할 것인지, 가로 화면으로 할 것인지 선택하고 AVD 이름을 지정해준 후 Finish를 누른다.

 

 

Actios에 있는 재생 버튼을 눌러 AVD를 실행시킨다.

 

 

그럼 아래와 같이 AVD가 실행될 것이다.

아까 <no devices>가 있었던 부분에 AVD를 설정해주고 앱을 실행시켜보자.

처음에는 앱을 Build 하는 데 시간이 많이 걸릴 수 있다.

 

 

이렇게 앱이 구동된다면 성공!

 

 

'Web App Development > Flutter' 카테고리의 다른 글

Flutter doctor --android-licenses 오류 해결하기  (0) 2020.09.21