본문 바로가기

코딩/Flutter

비전공자의 코딩 독학 - Flutter[1] 플러터 설치하기

반응형

안녕하세요.

오늘의 코딩 독학 주제는 플러터(Flutter) 설치하기 입니다.

 

 

1. 플러터(Flutter)란 ?

플러터는 구글에서 오픈소스로 제공하는

크로스 플랫폼(Cross Platform) 개발도구입니다.

플러터로 앱을 개발하게되면

iOS와 안드로이드(Android)를 모두 지원할 수 있는데

이런 경우를 크로스 플랫폼 개발이라고 부릅니다.

 

플러터는 다트(Dart)라는 언어로 개발하는데

이 다트라는 언어가 그리 인기있는 언어가 아니기 때문에

공부에 어려움이 많을 수 있습니다.

 

파이썬과 텐서플로우 등

인기있는 프로그래밍 도구들은

사용하는 사람들이 많은 만큼

커뮤니티도 활발하기 때문에

개발에 어려움을 겪을 때 마다

구글링을 하거나 질문을 하기 좋은데

 

다트처럼 비인기 언어는

커뮤니티도 활발하지 않고

사용하는 프로그래머도 수가 적어서

혼자서 여러 문제들을 해결해야만 합니다.

 

하지만 차근차근 배워나가면서

개발능력을 성장시켜보도록 하겠습니다.

 

 

2. 플러터 설치하기

(1) 우선 아래 링크로 접속합니다.

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

 

Windows install

 

flutter.dev

 

(2) 위 링크로 접속 시 아래와 같은 화면이 보입니다.

붉은 네모상자로 표시해둔 부분을 클릭해

압축상태의 flutter SDK를 다운받습니다.

 

(3) 다운받은 압축파일을 원하는 위치에 풀어줍니다.

제 경우는 C드라이브에 flutter라는 폴더를 만들고

해당 폴더에 바로 압축을 풀어주었습니다.

 

(4) 압축을 풀어준 폴더에서 [flutter_console] 라는 파일을 실행시켜줍니다.

 

(5) 실행되는 콘솔창에서 [flutter doctor] 라는 명령어를 입력합니다.

 

(6) 명령어를 실행시키면 아래와 같이 미흡한 부분들이 [X]표시로 체크됩니다.

 

(7) 우선 flutter SDK에 대한 PATH(환경변수)설정을 해줍니다.

윈도우 화면 좌측 하단의 돋보기 모양 아이콘을 클릭하신 후

[환경]이라는 글자를 입력하시면

아래 사진과 같이 [시스템 환경 변수 편집]이라는 검색결과가 뜹니다.

클릭해줍니다.

 

(8) 아래 사진과 같은 창이 뜰텐데

하단의 [환경변수]버튼을 클릭합니다.

 

(9) 하단의 [시스템 변수] 부분에서

[Path]라는 변수를 찾아 클릭한 뒤

[편집]버튼을 클릭합니다.

 

(10) [새로만들기]를 클릭하신 후

아래 사진과 같이 Flutter SDK를

압축해제시켜준 폴더에서

[bin] 폴더의 경로를 지정해줍니다.

이후 엔터를 누르시고 확인을 눌러주시면 됩니다.

 

(11) 이제 JDK(Java Developement Kit)를 설치해야합니다.

아래 링크로 접속합니다.

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

 

Java SE - Downloads | Oracle Technology Network | Oracle

Which Java package do I need? Software Developers: JDK (Java SE Development Kit). For Java Developers. Includes a complete JRE plus tools for developing, debugging, and monitoring Java applications. Administrators running applications on a server:  Server

www.oracle.com

 

(12) 아래와 같은 화면에서

붉은 박스로 표시해둔 다운로드 버튼을 클릭합니다.

 

 

(13) 아래 사진과 같이

라이센스 동의버튼을 클릭한 후

사용중인 운영체제에 해당하는

.exe파일을 다운받습니다.

 

(14) 다운받은 파일을 그대로 설치하시면 됩니다.

따로 건드릴 설정이 없으니 [다음]버튼을 연타해주시면 됩니다.

 

(15) 이번엔 안드로이드 스튜디오를 설치해보겠습니다.

아래 링크로 접속합니다.

https://developer.android.com/studio

 

Download Android Studio and SDK tools  |  Android Developers

developer.android.com

 

(16) 아래 화면이 뜨면 빨간 네모박스 부분을 클릭합니다.

 

(17) 다음으로 아래 그림과 같이 체크 후 다운로드 버튼을 클릭합니다.

 

(18) 다운 받은 설치파일을 실행시킨 후

계속 [Next]버튼을 클릭해주시면 설치가 완료됩니다.

 

(19) 설치가 끝난 후 안드로이드 스튜디오를 실행시켜주시면

남은 세팅 과정들이 진행됩니다.

 

(20) 다시 flutter console 에서 [flutter doctor] 명령어를 실행시키시면

이번엔 안드로이드 라이센스가 수락되지 않았다고 나옵니다.

 

(21) 다시 flutter console 에서 아래와 같은 명령어를 입력합니다.

flutter doctor --android-licenses

 

(22) 이후 계속 [y]를 입력 해주면서 동의를 합니다.

 

(23) 아래 사진과 같은 문구가 출력되면 라이센스 동의가 끝난 겁니다.

 

 

(24) 다시 콘솔에서 [flutter doctor] 명령어를 실행하시면 

아래와 같이 두번째 항목도 체크됩니다.

 

 

(25) 이제 안드로이드 스튜디오를 실행시킨 후

아래 사진과 같이 [Configure] - [Plugins] 버튼을 누릅니다.

 

(26) 검색창에 [flutter] 를 입력 후 엔터를 치시면

아래와 같이 Flutter 플러그인이 나타납니다.

[Install] 버튼을 눌러 설치를 진행합니다.

 

(27) 플러터 플러그인을 설치하시면 Dart 플러그인도 설치할거냐고 묻는데

[Yes]를 클릭하시면 됩니다.

 

(28) 설치를 완료하셨으면 이제 안드로이드 스튜디오를 재시작합니다. 

이후 flutter doctor 명령어를 입력하시면

이제 세번째 항목까지 체크된 것을 확인할 수 있습니다.

 

(29) 이제 비주얼 스튜디오 코드에 flutter 플러그인을 설치해줍니다.

 

(30) 이제 마지막 항목만 남아있습니다.

 

(31) 안드로이드 스튜디오를 실행시키신 후

[Start a new Flutter project] 메뉴를 선택합니다.

 

(32) 아래 사진과 같이

[Flutter Application] 옵션을 선택 후

[Next] 버튼을 클릭합니다.

 

(33) 이제 Flutter SDK path를 지정해줄 차례입니다.

아래 사진과 같이 [...] 버튼을 클릭합니다.

 

(34) flutter를 설치한 폴더를 선택 후

[OK] 버튼을 클릭합니다.

 

(35) 이후 과정들을 계속 넘어가주시면

알아서 세팅이 진행되며 새로운 프로젝트를 시작할 수 있습니다.

 

 

3. 안드로이드 에뮬레이터 설정하기

(1) 이제 예뮬레이터를 설정해보겠습니다.

안드로이드 스튜디오 우측 상단의

[AVD Manager] 버튼을 클릭합니다.

 

(2) 아래 사진과 같이

[Create Virtual Device...] 버튼을 클릭합니다.

 

(3) 원하시는 휴대폰 기종을 선택하신 후

 

(4) 원하시는 안드로이드 버전을 다운로드 합니다.

 

(5) 다 끝나갑니다.

이제 에뮬레이터에 얼마만큼의 램을 할당해줄지 정하면 됩니다.

 

(6) 이후는 계속 [Next] 버튼을 눌러주시면 됩니다.

설치가 마무리되시면 플레이 버튼을 눌러 에뮬레이터를 실행시킵니다.

 

(7) 여기까지 성공하셨다면 안드로이드쪽 개발환경은 완성되었습니다.

 

상당히 오랜만에 포스팅을 올렸습니다.

요즘 상당히 바쁜데 그래도 포스팅을 올릴 수 있도록

신경쓰겠습니다. 감사합니다.

 

*에뮬레이터 작동 관련 오류 발생 시

윈도우 검색창에 아래와 같이 검색하여 [Windows 기능 켜기/끄기]로 진입합니다.

스크롤을 내리다보면 [Windows 하이퍼바이저 플랫폼]이라는 항목이 보입니다.

이녀석을 체크해주시고 확인을 눌러주세요.

이렇게 셋팅해주시면 에뮬레이터가 정상작동합니다.

반응형