프로젝트 생성

• 새로운 프로젝트 생성 (Snake case로 생성해야 함)

>>> // flutter create {project_name}
>>> flutter create tutorial_app

• 생성된 폴더/파일 목록

-rw-r--r--@  1 wooshik  staff   542B  3 26 14:22 README.md
-rw-r--r--@  1 wooshik  staff   1.4K  3 26 14:22 analysis_options.yaml
drwxr-xr-x@ 12 wooshik  staff   384B  3 26 14:22 android
drwxr-xr-x@  7 wooshik  staff   224B  3 26 14:22 ios
drwxr-xr-x@  3 wooshik  staff    96B  3 26 14:22 lib
-rw-r--r--@  1 wooshik  staff   3.9K  3 26 14:22 pubspec.lock
-rw-r--r--@  1 wooshik  staff   3.6K  3 26 14:22 pubspec.yaml
drwxr-xr-x@  3 wooshik  staff    96B  3 26 14:22 test
-rw-r--r--@  1 wooshik  staff   896B  3 26 14:22 tutorial_app.iml
drwxr-xr-x@  6 wooshik  staff   192B  3 26 14:22 web
drwxr-xr-x@  6 wooshik  staff   192B  3 26 14:22 windows

• pubspec.yaml: Flutter project의 메타 데이터를 정의하고 관리. Node의 package.json과 비슷함
• ios/android/web: 각 플랫폼에 관련된 프로젝트와 파일들이 저장
  • 앱을 개발할 때는 수정할 필요가 없음
  • 앱을 배포할 때 수정해야 함
• lib: 하나의 코드베이스로 iOS와 Android를 모두 개발하기 위해 코드베이스를 저장하는 폴더
  • 해당 폴더 안에 있는 main.dart가 Flutter 프로젝트의 시작 파일
• test: Flutter 앱을 테스하기 위한 코드를 저장

프로젝트 시작

• Emulator 실행 (아래 방법 중 택 1)

  • vscode에서 아래 Launch Emulator 선택

    

  • iOS Simulator

    open -a Simulator
    

  • Android emulator

    emulator -list-avds
    emulator -avd@name-of-your-emulator
    

프로젝트 실행

• Flutter 앱 실행 (아래 방법 중 택 1)
  • VsCode에서 Start Debugging
  • 터미널에서 flutter run

Hot Reloading

• 앱의 소스 코드를 수정하면, 앱을 새로 빌드하지 않아도, 바로 화면에 반영되는 기능
• Test 해보자!

// in lib/main.dart
home: const MyHomePage(title: 'Flutter Demo Home Page')

-> home: const MyHomePage(title: 'Hi Wooshik!'),

• Hot reload가 실행되지 않을 때?
  • flutter run 을 이용해 앱을 실행하고 있다면, r 을 입력하면 Hot reload가 실행된다.
• 용어 정리
  • Hot reload: 가상 머신에 변경된 코드를 불러오고 위젯 트리를 재빌드한다. 앱의 상태를 보존함
  • Hot restart: 가상 머신에 변경된 코드를 불러오고 Flutter 앱을 재시작
  • Full restart: iOS, Android, Web 어플을 재시작