Flutter 앱 만들기

오늘은 플러터를 사용하여 기본적인 앱을 만들고 실행해 보도록 합니다.

기본적인 IDE로는 Visual Studio Code 나 Android Studio를 사용합니다. 가능하면 IDE를 사용하는 것이 편리하지만, 개발을 하는 입장에서는 기본적인 CLI(Command Line Interface) 명령어를 알아야 합니다. 그래야만 문제가 발생하는 경우 대처할 수 있습니다. 모든 IDE의 기본은 CLI이기 때문입니다.

먼저 터미널에서의 CLI를 설명하고, IDE 메뉴를 제공하는 방식으로 포스트를 하려 합니다.

앱 생성

터미널에서는

 flutter create myapp
 cd myapp

VSCode

• View메뉴의 Command Pallete...를 선택합니다.
• “flutter”를 입력한 후, Flutter: New Project를 선택합니다.
• 프로젝트 이름을 입력하고 Enter를 누릅니다. (예, myapp)
• 새 프로젝트를 위한 디렉토리를 생성하거나 선택합니다.
• 프로젝트가 생성되어 main.dart 파일이 나타날 때까지 기다립니다.

Android Studio

• IDE를 켜고 Start a new Flutter project를 선택합니다.
• 프로젝트 타입으로 Flutter Application을 선택합니다. Next을 누르세요.
• 경로가 제대로 설정되어 있는지 확인하세요. (텍스트 필드가 비어 있으면 Install SDK…를 선택하세요).
• 프로젝트 이름을 입력하세요 (예, myapp). 그런 다음 Next를 누르세요.
• Finish를 클릭하세요.
• Android 스튜디오가 SDK를 설치하고 프로젝트를 생성할 때까지 기다리세요.

주의 할 점은 Android Studio나 VSCode의 경우, 모두 flutter plugin인 설치 되어 있어야 합니다. flutter 는 Dart언어를 사용하므로, flutter plugin만 설치 하면 Dart 까지 설치가 이루어 집니다. 

앱 실행

터미널에서는

 flutter run

물론 디바이스를 확인해야 합니다. 

 flutter devices

VSCode

VSCode 스테이터스 바

위의 그림에서 처럼 스테이터스 바를 확인 합니다. Device Selector 영역에서 실행할 기기를 선택 합니다.

• Debug > Start Debugging을 호출하거나 F5를 누르세요.
• 앱이 실행될 때까지 기다리세요 - Debug Console에 진행 상태가 표시됩니다.

Android Studio

Android Studio 메인 툴바

• target selector에서, 앱을 실행할 Android 기기를 선택하세요. 리스트에 사용 가능한 기기가 없다면, Tools> Android > AVD Manager를 선택하고 새 기기를 생성하세요. 자세한 사항은, AVD 관리를 참조하세요.
• 툴바에서 실행 아이콘을 선택하세요, 또는 메뉴 항목에서 Run > Run를 실행합니다.

Hot reload

Flutter는 Stateful Hot Reload 를 통해 빠른 개발 사이클을 지원합니다. 재시작하거나 앱 상태 잃어버리지 않고 실행 중인 앱의 코드를 다시 로드합니다. 앱 소스를 변경하고, hot reload가 필요하다는 신호를 IDE나 커멘드라인 도구에 보낸 후, 시뮬레이터나 에뮬레이터 혹은 기기에서 변화를 확인합니다.

• lib/main.dart를 엽니다.
• 문자열을 변경합니다.
• 변경내용을 저장합니다. VSCode 나 Android Studio의 경우, Hot reload를 클릭합니다.
• 터미널에서는 r을 입력합니다.

실행 중인 앱에 변경된 문자열이 거의 동시에 나타납니다. 앱을 중단하면 안됩니다. 앱은 실행 상태 여야 합니다.