Seung's Learning Record

[ Flutter ] GUI 애플리케이션 프레임워크, 플러터 본문

Dev Tool/Flutter

[ Flutter ] GUI 애플리케이션 프레임워크, 플러터

70_0ewd 2022. 9. 28. 21:03

이번 학기 캡스톤 디장인 수업을 들으며 하게 된 플젝에서 이 플러터를 사용하여 앱 개발을 하게 되었고, 개발을 위해 사전 공부를 하던 중 잊고 지냈던 블로그의 존재가 생각나서 정리를 하러 들어왔당..ㅎ. 학기가 시작되고 완전 잊어버렸..ㅜㅜ 

플러터(flutter)는 구글에서 만든 모바일 앱 프레임 워크다. 
Android 앱을 만들 땐 Kotlin을, 아이폰 앱을 만들 땐 Swift를 쓰는 등 뭔가를 만들려면 언어를 공부해야 한다. 하지만 Flutter를 사용하면 Dart언어를 사용한 코드 하나로  Android와 iphone앱을 둘 다 만들 수 있다. Dart 언어의 문법은 JavaScript의 문법과 굉장히 유사해서 웹 개발만 해본 사람도 쉽게 앱 개발을 할 수 있을 것이다.
현재 내 상황에서 플러터의 가장 큰 장점은 아무래도 적은 시간 대비 높은 완성도가 나온다는 점이 아닐까 싶다. 플러터의 기본 제공되는 기능 중 전환 애니메이션이 우리의 프로젝트 결과물의 완성도를 높여줄 거라고 기대 중이다ㅎㅎ. 물론 나도 열심히 해야겠지만..! 자 그럼 본 내용 시작!!


Download

플러터 설치 전, 안드로이드 스튜디오를 최신 버전으로 설치해야 한다.
(https://developer.android.com/studio?gclid=Cj0KCQjw3IqSBhCoARIsAMBkTb0l_knuGfh5R9V4-u1u5N1xUy2zLxi0Xv_BBOh 1iM2gdTT0qtzC2_QaAlYbEALw_wcB&gclsrc=aw.ds)

 

Download Android Studio & App Tools - Android Developers

Android Studio provides app builders with an integrated development environment (IDE) optimized for Android apps. Download Android Studio today.

developer.android.com


1. 패키지 다운

한글 사이트에서는 다운 오류가 있어서 아래 링크에서 다운로드를 하면 된다.
https://docs.flutter.dev/get-started/install/windows#flutter-sdk-%EB% 8B% A4% EC% 9A% B4% EB% A1% 9C% EB%93% 9C
다운로드한 버전은 C 밑에 src 폴더를 만들어 압축을 푸는 것이 좋다.

 

Windows install

How to install on Windows.

docs.flutter.dev


2. 환경변수 추가

시스템 속성 > 환경 변수 > 시스템 변수 > path에 C:\src\flutter\bin을 추가하여 콘솔 cmd와 다른 응용프로그램에서 찾을 수 있게끔 해준다.


3. Flutter Doctor로 체크

cmd창에 flutter --versionflutter doctor 명령어를 입력하여 정상 동작을 위한 환경이 구성되었는지를 체크한다.
체크를 해보면 x가 뜨는 항목이 있을 것이다.
보통은 안드로이드 툴 중에 cmdline-tools 와 라이선스 상태에 대한 두 가지에 x표시가 뜬다.

1)  cmdline-tools  설치
이는 안드로이드 스튜디오에서 flutter의 사용을 위해 설치해야 하는  SDK Tool이다.

Settings에 들어와서 위와 같이 설치해준다.

2) 라이선스 정보를 받아오기
cmdline-tools를 설치한 후, flutter doctor --android-license를 입력하여 라이선스 정보를 받아온다.
업데이트 후 다시 flutter doctor를 실행해보면 모두 정상적으로 진단되었음을 확인할 수 있다. 


4. 안드로이드 스튜디오 셋업

plugin에서 flutter를 찾아 설치


5. 신규 프로젝트 생성

New > 플러터 프로젝트 

 

SDK를 설치했던 경로를 지정 

이제 플러터 프로젝트를 위한 준비가 드디어 끝이 났다!! 플러터의 코드들은 담에 살펴보는 걸로..ㅎ