[Flutter] 소개와 개발환경 구축

안녕하세요. 클로스트에요 ^-^

오늘은 Flutter에 대해서 이야기 해볼까해요.

 

Flutter란?

Flutter는 구글의 모바일 UI프레임워크로, 빠른 시간 안에 iOS와 Android에서 고품질의 네이티브 인터페이스를 만들어낸다. flutter는 기존 코드를 사용하며 전 세계의 개발자와 조직에 의해 사용되며 무료로 제공되는 오픈 소스이다.

(플러터 공식 홈페이지에 나와있는 설명이에요)

 

 

윈도우 7은 기본적으로 파워셀이 2.0이여서 업그레이드 하던지 해야 할거에요.

업그레이드 안하고 그냥 Git만 까셔도되요.

윈도우 10은 자동업데이트 덕분에 파워셀이 5.0 이상일수 있어요.

 

 

추가로 플러터(Flutter)는 Dart라는 언어를 사용해요.

그냥 저 설명만 보고 매력적으로 다가와서 한번 다뤄보려고 개발환경을 구축해 보았어요.

아무것도 설치 되어 있지 않다고 가정하고 순서대로 말씀드리면.

 

1.JDK 설치.

http://www.oracle.com/technetwork/java/javase/downloads/index.html

위 링크에서 설치 하시면 되요.

저는 10을 설치했다가

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

요에러가 나서 8버전으로 다시 설치 했더니 되더라구요. 첨부터 JDK1.8을 받으세요.

 

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

https://developer.android.com/studio/index.html

위 링크에서 다운받을수 있습니다. 자신의 OS에 맞는 버전을 설치하시면되요.

 

3.Git 설치

https://gitforwindows.org/

위 링크에서 다운받을 수 있어요.

 

4.VSCODE 설치

https://code.visualstudio.com/Download

위 링크에서 다운받을수 있습니다. 자신의 OS에 맞는 버전을 설치하시면되요.

다른 에디터도 가능하지만 전 VSCODE로 했어요.

 

5.Flutter 설치

https://flutter.io/

위 링크에서 get started 클릭하면 다운로드 받을 수 있어요.

원하는 곳에 압축파일을 푸세요.

그런다음 flutter console 배치파일을 실행하세요. 그럼 아래와같은 화면이 뜹니다.

>flutter doctor

라는 명령어를 입력하면 부족한게 먼지 진단을 해줍니다.

 

콘솔이 제대로 뜨셧다면 아마

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

메시지가 나올텐데

flutter doctor --android-licenses 명령어 써주시면 라이센스 동의 나오는거 다 Y 누르면 됩니다.

 

이제 VSCODE로 가서 flutter를 연동해줍니다.

VSCODE에서 보기>명령팔레트 클릭합니다.

 

install extension 검색하면 맨아래에 있는

확장: 확장 설치 클릭합니다.

 

dart code로 검색하면 맨위에 나오는 Dart Code 설치해줍니다.

Dart Code 까지 설치한다음.

다시 명령어 팔레트로 다서 flutter doctor를 입력하면

이런창이 오른쪽 하단에뜨는데 Locate SDK 를 누르시고

 

아래와 같이 flutter 경로를 지정해줍니다.

set Flutter SDK folder를 누르시면 이제 이폴더가

VSCODE에서 SDK path로 인식되게 됩니다.

그런다음 다시 명령어 팔레트에서 flutter doctor 입력하시면 가상디바이스 빼고 다 되셨을겁니다.

VSCODE에 플러터 연동하면 VSCODE에서 flutter doctor 명령어로 부족한 부분을 알려주기 때문에 쉽게 부족한 요구사항을 채울 수 있습니다. 저는 이순서대로 안해서 아직 닥터에서 x표시가 많네요.

이렇게 따라오셨으면 다른요구 사항은 다 된걸로 가정하고 이제 가상디바이스나 현물 디바이스가 있으면 되는데 가상디바이스를 만들어봅시다.

안드로이드 스튜디오를 켜고 Tools>AVD MANAGER 를 클릭합니다.

다음다음을 누르면서 가상디바이스를 생성합니다.

 

여기까지 하셨으면

이제 가상디바이스를 띄운다음 다시 VSCODE로 가서

명령어 flutter doctor를 쳐봅시다.

 

오 이제 다 체크되고 x 표시는 하나도 없네요. 여기까지 하셨으면 이제 flutter를 사용할 준비가 된겁니다.

 

저는 flutter.io 사이트에 있는 데모를 띄어 보았습니다.

 

그리고 이어서 Hello, World! 출력

여기까지~!

Flutter 의 간략한 소개와 개발환경 구축에 대해서 포스팅 해봤어요.

 

저는 아직 dart 언어 라던지 flutter가 생소하긴하지만 그래도 매력적인거 같아 꾸준히 배워볼 생각이에요.

여러분들도 한번 도전해보세요. 즐거운 코딩~!

이번 포스팅은 이만쓸게요. ㅎㅎ