Flutter 시작하기

What is Flutter?

Flutter 프레임워크란 구글에서 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크로 크로스플랫폼 개발이 가능하다는 큰 장점을 가지고 있다.

Quick Start

Android Studio는 무겁기 때문에 경량 IDE인 VS Code 에서 Flutter 개발환경을 구축해보자.

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

Install

Flutter 공식 사이트에 접속한 후 자신의 환경에 맞춰 Flutter SDK를 설치한다.

다운로드 받은 후 적당한 위치에 압축을 풀어주도록 하자.

압축을 푼 후 bin 폴더에 들어가 주소를 복사하고 Path 경로를 지정해주자.

Path 경로 지정하는 법
시스템 환경 변수 편집 > 고급 > 환경 변수 > Path 클릭 후 편집 클릭 > 새로 만들기 클릭 > bin 폴더 경로 입력 후 확인

성공적으로 환경 변수를 편집했는지 확인하기 위해 CMD 창에서 flutter를 입력하여 정상적으로 설치가 되었는지 확인한다.

위 사진처럼 나온다면 정상적으로 설치가 된 것이다.

Flutter 플러그인을 설치하자.

Ctrl + Shift + P 를 누르고 Flutter: New Project를 선택해 새로운 Flutter 프로젝트를 생성한다.

프로젝트 이름과 Path를 설정하면 아래와 같이 샘플 프로젝트가 열리게 된다.

Ctrl + Shift + p 를 입력한 후 flutter:Launch Emulator를 선택한다.

만약 Adroid Studio(Android SDK)가 설치되어 있다면 가상 Emulator들이 보일 것이다.

원하는 Emulator를 띄우고 빌드를 해보자.

VSCode 상단 "디버그" 탭에 "디버깅 시작"을 누르면 빌드가 시작된다.

Flutter 기초

주요 폴더 및 파일

• pubspec.yaml
  - Flutter 프로젝트의 메타 데이터를 정의하고 관리하는 파일, Node의 package.json과 비슷한 역할을 한다. 
  - Flutter는 이 파일을 사용해서 프로젝트의 버전을 관리하고, 서드파티 라이브러리나 디펜던시를 관리한다.
• iOS/Android/Web 폴더
  - Flutter는 크로스플랫폼 개발 플랫폼으로써, 다양한 플랫폼을 하나의 코드베이스로 개발하는 것을 목표로 하고 있다. Flutter를 사용하면 React Native와 마찬가지로 iOS와 Android 앱을 동시에 개발할 수 있으며, 이 때 각 플랫폼과 관련된 프로젝트와 파일들이 iOS 폴더와 Android 폴더에 저장되어 있다. 앱을 배포할 때 이 폴더 안에 내용들을 수정하게 된다.
  - 최근 Flutter가 Web 플랫폼도 지원하게 되었으며 Web 플랫폼을 지원하기 위한 파일, 폴더들이 Web 폴더에 저장되어 있다.
• lib 폴더
  -Flutter의 코드 베이스를 저장하는 폴더
  - 이 폴더 안에 Dart를 사용해서 앱을 개발한다. 폴더 안에 있는 main.dart 파일이 Flutter 프로젝트의 시작파일로 이 파일을 기준으로 앱을 빌드하고 실행한다.
• test 폴더
  - lin 폴더에 Dart를 사용하여 작성한 Flutter 앱을 테스트하기 위한 코드를 저장하는 폴더

Hot Reloading

웹 프론트에서 사용하는 Hot Reloading과 동일한 개념이 Flutter에도 존재하며 앱의 소스 코드를 수정하면, 앱을 새로 빌드하지 않아도 즉각적으로 화면에 반영되는 기능을 뜻한다.

 

 

왜인지 Hot Reloading이 안될 때 앱을 실행시키려면 Ctrl + F5, 수정 후 재실행시키려면 Ctrl + Shift + F5를 누르면 되었다.