[Flutter] 환경 구축 (1) - for Windows

 오늘은 새로 접해보고자 하는 Flutter라는 Framework에 대해서 간단히 알아보고 환경설정을 하는 과정을 정리하겠습니다. 먼저 오늘은 제가 겪은 여러 시행착오를 통해서, 먼저 간단한 준비물과 오늘 정리할 전체 내용의 목차를 먼저 소개하겠습니다.

 또한 해당 작업을 하기 위해서 윈도우 환경변수 추가하는 작업을 하는데, Java나 다른 환경을 설정 해 보셨다면 간단한 작업이 될 것이고, 처음 해 보시는 분들도 보면 할 수 있도록 해당 부분도 과정별 이미지가 있습니다.

 

준비물(H/W , S/W) :  개발용 기기(PC), 안드로이드 스마트폰 or 안드로이드 가상머신, Flutter SDK, Android Studio 

 

 

 

 

 

 

 

 

 

 

 

내용 목차

 

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

 

2. Flutter SDK설치

 

3. 안드로이드 플러그인 설치

 

4. 안드로이드 가상머신 추가

 

위의 순으로 제가 작업을 하여 그런 순으로 기록을 하겠지만(사진 이미지 순서 상), 새로 이 과정을 해야 한다면 

 

1 - 3 - 4 - 2 순으로 진행하시는 것이 훨씬 수월 할 것입니다.

또한, 위의 목차에서 할 작업을 이미 진행하신 분들의 경우는 해당 순번을 제외하고 진행하시면 되겠습니다. 

 

 

 

 

 

 

 

 

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

 

<사진 1> 설치파일 실행 시 스플레쉬 이미지

 

 

 

 

<사진 2> 웰컴창 (사진도 많은데 꼭 이런 것 까지 넣어야 했냐???)

사진도 많아 뺄까 고민도 했지만, 제가 쓰는 블로그는 머리가 나쁜 저를 위해서, 한땀한땀 제가 저장 해 두고 나중에 쓱쓱 따라해가며 보고, 혹시나 많진 않겠지만 다른 분들이 보신다면 도움이 되길 바라는 맘으로 한장이라도 더 넣어 과정은 보도록 합니다.

 

 

 

 

<사진 3> 설치 진행중  (다운로드중일 때)

다운로드 진행 파일의 용량과 진행률을 보여줍니다.

 

 

 

 

<사진 4> 설치 완료

설치중이면 한줄 한줄 추가로 표시되며, 설치가 완료되면 위와 같이 Finish 버튼이 활성화됩니다.

 

 

 

 

<사진 5>  안드로이드 스튜디오의 초기화면

나중에 Flutter 환경구축을 마치면, 위의 화면에 

 

Start a new Flutter Project라는 항목이 생깁니다. 나중에는 해당 항목을 선택해서 새 Flutter 프로젝트를 추가할 수 있습니다.

 

 

 

 

 

 

 

<사진 6> 프로젝트 생성하여 작업중인 안드로이드 스튜디오 모습

 

 

 

이상으로 안드로이드 스튜디오 설치를 마칩니다. 

 

 

 

 

 

 

 

2. Flutter SDK설치

 

Flutter의 사이트에 방문해서 SDK를 다운받습니다. 

 

 

 

< Flutter SDK 사이트 >

https://flutter.dev/docs/development/tools/sdk/releases#windows

Flutter SDK releases

위의 사이트에 방문하여 현재 사용하는 OS에 맞는 Flutter의 SDK를 받습니다. 이 포스팅은 Windows 버전을 기준으로 하며, 나중에 꼭 Mac환경에서 설정을 해 보도록 하겠습니다!!!!

 

 

<사진 2-1> Flutter SDK 다운 사이트 화면

오늘(2019년 8월 31일)자 최신버전은 1.7.8 버전입니다.

 

 

 

<사진 2-2> 받은 SDK파일 압축해제 - Flutter Console 확인

다운받은 SDK파일을 특정 경로에 압축을 풀면 위와 같이 파일이 보이며, 그 중 앞으로 환경설정을 확인 하는 과정에 사용할 파일이 flutter_console.bat라는  파일입니다. 나중에 환경변수 설정까지 마친다면, 일반 커맨드(CMD)창이나, 터미널에서도 Flutter의 명령을 사용할 수 있을 것입니다.

 

 

 

<사진 9> flutter_console.bat 실행화면

굉장히 옛적인 디지털의 향수를 느낄 수 있는 화면이 나타나네요. 인상적이었습니다.

 

 

 

 

<사진 10> Flutter 환경변수 추가하기 1 

1. Windows 키를 눌러 검색창이 나오면 "환경"이라고 입력하여 시스템 환경 변수 편집 항목을 클릭합니다. 

2. 오른쪽과 같이 시스템 속성 이라는 화면이 나오면 우측 하단에 있는 2번 표시된 환경변수 버튼을 클릭합니다.

 

 

 

 

 

<사진 11> 환경변수창

1. 위쪽에 <User name>에 대한 환경변수 아래 보이는 항목 중 Path가 있다면 저와 같이 1번 Path를 선택합니다. 아니라면 새로만들기 버튼을 클릭하여 Path라는 환경변수 항목을 추가합니다. 

2. Path 를 선택합니다. 그 뒤 2번으로 표시된 편집 버튼을 클릭합니다.

 

 

<사진 12> Path에 Flutter 환경변수 추가하기

1. 우측 상단의 새로 만들기 버튼을 클릭합니다.

2. 빈 항목이 생기면 Flutter를 설치한 경로 (=> SDK 압축 해제한 경로)를 입력 해 줍니다.

3. 확인 버튼을 클릭합니다. 

 

 

<사진 13> CMD창에서 환경변수 설정 확인

Flutter 의 설치경로가 Path라는 환경변수에 추가됬다면 위와 같이 그냥 어떤 경로에서든 Flutter 명령을 수행할 수 있습니다. 

Flutter doctor를 입력하여 위와 같이 수행이 되는지 확인할 수 있으며, Flutter Doctor가 수행되지 않는다면 환경변수 설정을 다시 확인해보시기 바랍니다.

 

Flutter doctor에 대한 설명은 추후에 각 과정을 진행하면서 설명을 하도록 하겠습니다.

 

 

 

 

 

 

 

 

3. 안드로이드 플러그인 설치

 

<사진 14> 설치할 플러그인 (Dart , Flutter) 검색하기

File> Settings 또는 Ctrl + Alt + S를 눌러 설정창을 열어줍니다.

 

Dart라고 검색하여 Dart플러그인과 Flutter 플러그인이 모두 검색되었습니다. Install을 클릭하여 설치 해 줍니다. 각각의 플러그인을 설치하면, Android Studio를 재시작합니다.

 

 

 

<사진 15> Flutter 플러그인 설치

Dart 플러그인과 마찬가지로 설치 해 줍니다.

 

 

<사진 16> Flutter Plugin 설치 시 경고창

개인 데이터 보로를 위해 공급자를 확인하라는 내용의 안내입니다. JetBrains 저는 받아들이겠습니다.

 

 

 

 

<사진 17> 플러그인 설치 후 Flutter doctor 수행 결과

이전에 처음 설치 후 확인했을 때에는 3개의 Issue가 있었습니다. 하지만 지금은 안드로이드 스튜디오쪽 플러그인 설치 이슈가 해결되어 남은 Issue가 2개 있습니다.

 

 

 

<사진 18>  flutter doctor --android-licenses 수행하여 라이선스 확인하기

CMD창에 flutter doctor --android-licenses 입력하고 라이선스관련 내용을 확인 해 줍니다. 

늘 하던데로 그냥 Next/허용 이런식으로 넘기듯이 자연스럽게 Y를 입력하고 엔터를 쳐 줍니다.

 

 

<사진 19> 반복확인입니다. 

라이선스 관련 내용이 정말 많은데 몇번 누르다 보면 됩니다.

 

 

 

<사진 20> 확인 후 Flutter doctor 수행 결과

Android toolchain 관련된 Issue가 해결된 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

4. 안드로이드 가상머신 추가

 

AVD(Android Virtual Devices - 안드로이드 가상 기기) Manager를 수행하여 안드로이드 가상 머신을 등록하고 추가하여 실행하는 작업을 진행 할 예정입니다. 

안드로이드 스튜디오의 버전에 따라 AVD Manager 메뉴의 위치는 다른 듯 하고 아래에 2가지 모두 표시 해 두었습니다.

 

 

<사진 21> AVD Manager 실행하기

1. 버전에 맞게 1번 또는 2번의 내용을 확인하여 AVD Manager를 실행 해 줍니다.

2. 위의 화면 중앙과 같이 AVD Manager 창이 열리면 그 중앙 버튼을 클릭 해 줍니다.

 

 

<사진 22> Phone 기종 설정하기

다양한 스마트폰 가상 기기를 

 

 

<사진 23>

선택한 가상 기기의 OS관련 파일을 설치합니다.

 

 

<사진 24>

설치 과정을 확인할 수 있으며, 완료되면 Finish버튼이 활성화 됩니다. 클릭하여 다음으로 넘어갑니다.

 

 

 

<사진 25> 기기의 이름과 화면방향 등의 가상기기 설정

위의 화면에서 변경이 필요한 가상기기 설정을 수정하고 Finish버튼을 클릭합니다.

 

 

<사진 26> AVD 목록화면

AVD 목록 중 방금 등록하였거나 존재하는 기기를 선택하여 실행해줍니다. 실행 버튼은 위의 붉은색 상자에 있는 재생모양 버튼입니다.

 

 

 

<사진 27> 가상기기 구동화면1

 

 

 

<사진 28> 가상기기 구동화면2

 

 

 

 

<사진 29> 가상기기 구동 후 Flutter doctor명령 수행 결과

수행 결과 발생하였던 Issue중 3번째 항목( 연결된 기기 없음)이 해결되었습니다.

 

 

이상으로 Windows에 Flutter개발 환경 구축하기를 마치겠습니다.

 

매일매일 일 안하고 쉬는 Mac을 쓸 겸 해서 Mac버전의 Flutter 환경구축도 해 보고, Mac에서 Flutter를 주로 사용할 수 있도록 해 봐야겠습니다.