Flutter(플러터) 시작하기 - 1. Flutter(플러터) 설치 및 환경 설정(Windows)

Flutter는 크로스 플랫폼 프레임워크다.

 

React와 Flutter 그리고 Xamarin이 고려 대상이였다. 네이티브는 패스

 

React가 국내에서 많이 사용되고 있어보이나 구글에서 밀고있는 Flutter

 

사실 다룰수 있는 언어가 C랑 매트랩정도라 Flutter가 비교적 C랑 비슷하다 하는것도 있고

 

구글신을 믿음으로 모셔야하니까 Flutter 선택

 

첫 설정은 Android Studio에서 기본 프로젝트 빌드까지 해보기로.

 

1. Flutter SDK 설치 및 다운로드

우선 플러터 SDK먼저 다운로드를 아래 링크에서 다운로드 받는다

 

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

 

위 링크는 플러터 공식사이트에서 제공하는 메뉴얼이다. 위 메뉴얼대로 해도 상관은 없으나

 

중간 라이센스 문제나... 몇가지 문제가 있었다.

 

아래 진행 과정을 나열해보겠다

 

일단은 SDK를 다운로드 받은 후 압축을 풀어주면 

 

Flutter 압축 해제시 내용물

flutter라고 폴더가 생긴다.

 

flutter 폴더의 위치를 편한 위치에 해주면 된다. 나의 경우 문서 안에다가 두었다.

 

flutter 폴더 내 콘솔이 존재한다. 

 

플러터 콘솔 이걸로 상태를 확인 할 수 있다

플러터 콘솔을 켜면 옛날느낌이 나는 창이 뜬다

 

자주 보지 말자

여기서 SDK가 잘 있는지 확인 해보자

 

이미 설치가 완료되서 No issues로 나온다.

 

아마 처음 하게되면 Flutter는 체크가 되어있을거다.

 

2. Android Studio 설치

 

이제 Android Studio를 설치해보자.

 

https://developer.android.com/studio에서 다운로드 받아서 설치를 진행하자.

 

설치는 그냥 다음다음다음... 다음만 눌러도 잘 설치된다.

 

설치를 했으면 이제 flutter Plugin과 Dart Plugin을 설치해야한다.

 

우선 flutter Plugin.

 

Studio를 실행하면 

 

Android Studio 시작화면

위 사진처럼 나타난다.

 

우리는 여기서 톱니바퀴모양 Configure를 눌러줘야한다.

 

가끔 안나오는경우가 있는데 그럴때엔 창을 늘려주면 뿅하고 등장한다.

 

Configure - Plugins를 클릭해준다

 

Plugins 추가

누르면 아래처럼 플러그인 설치화면이 나타나는데 검색창에 flutter를 검색하여 인스톨을 진행한다.

 

인스톨하면 Dart도 설치해야한다고 물어보는데 Yes를 눌러서 같이 설치해준다.

 

설치 후 재실행을 해달라고 하고 yes 누르면 알아서 또 재시작을 해준다. 착한 녀석이다

 

이제 AVD 를 설정해야한다. 내가 개발중인 안드로이드 앱 애뮬레이터다 PC에서 작동되는걸 볼 수 있게 한다.

 

Configure에서 AVD Manager를 눌러준다.

 

눌러주면 아래처럼 창이 나타나는데 이미 장치 설정을해서 좀 다를 수 있다. Select Hardware가 나타나면 뭐 OK

 

안나타 나면 Create Virtural Device를 누르면 Select Hardware가 나타난다.

 

여기엔 가장 기본적인 장치들만 나타난다. 갤럭시 S20이나 이런건 New Hardware profile 를 통해서 생성이 필요

 

나중에 다루기로 하고 일단은 Pixel XL로 한다.

 

Pixel XL 클릭후 Next를 누르면 아래처럼 창이 나타난다.

 

원하는 image를 고르면 되는데 나는 언제나 최신을 좋아한다.

 

R을 선택할건데 여기서 반드시 파란글씨의 Download를 클릭해줘야한다. 다운로드를 받아야만 그 이미지를 쓸수 있다.

 

다운로드 받고 이미지를 선택 후 Next를 누른다.

 

Graphics를 잘 골라주자

여기선 딱히 골라줄게 없다. AVD 이름을 원하는대로 설정해도 되고 자동으로 만들어주는걸 써도 된다. 나는 자동

 

그리고 Emulated Performance의 Graphics를 Hardware - GLES 2.0으로 골라준다. 왠진 모른다. 다들 이렇게 했다...

 

그리고 나서 Finish를 누르면 AVD 설정은 끝.

 

3. Flutter Doctor로 잘 되었는지 확인해보자.

이제 얼추 설정이 다 되었다. 이제 Flutter Doctor로 설정이 잘 되어있는지 확인해보자.

 

그전에 Flutter를 명령 프롬프트에서도 사용할 수 있게 환경변수를 변경해주자.

 

시작을 누른 후 '환경'을 누르게되면 시스템 환경 변수가 나타난다.

 

패스설정이 제일 싫어

시스템 환경 변수 클릭 후

 

환경 변수(N)을 클릭한다.

 

이러면 위 창이 나타나는데 시스템 변수 말고 위에 파란색으로 된 Path를 클릭 후 바로 밑에 편집을 눌러준다.

 

그리곤 내가 설치해둔 flutter SDK 위치를 추가해준다. 

 

새로만들기를 클릭 후 맨위에서 설명한 flutter SDK 다운로드 및 설치 에서 지정해둔 flutter 폴더를 추가한다.

 

반드시 bin 경로를 추가해야한다.

 

이제 다 되었다.

 

명령 프롬프트창에서 아래 명령을 실행해 보자

 

flutter doctor

 

실행하면 Android tool chain에서 에러가 나타날 것이다.

 

이는 Flutter SDK에서 찾질 못하는거다.

 

SDK Manager를 눌러 주자

위에서 빨강색으로 칠한 SDK Tools를 누른후 우측 하단의 Hide Obsolete Packages를 체크해제 해준다.

 

그리고 Android SDK Tools (Obsolete)를 체크 후 Apply 하고 OK 눌러서 끝낸다.

 

다시한번 의사선생님(doctor)를 불러보면 라이센스 관련 메세지가 나타난다.

 

사진을 찍을수가 없어... 메세지를 쓰자면 

 

Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

 

그러면 똑같이 써준다 flutter doctor --android-licenses

 

그러면 자꾸 물어본다 할래 말래? Y Y Y Y Y만 눌러주자

 

그리고 다시 의사선생님을 불러보자 그러면 아래처럼 깔끔하게 될 것이다.

 

드디어 완성

이제 환경설정은 끝이 났다.

 

다음 글에서 기본 앱 빌드 및 실행, 약간의 변형을 해보도록 하겠다.