플루터(Flutter) App 생성 및 실행

Ref. Flutter 설치 및 환경 설정

2019/12/08 - [Mobile/Flutter] - Flutter (플루터) Window 환경에 설치하기

Flutter (플루터) Window 환경에 설치하기

1. Flutter App 생성

아래 명령어를 이용하여 App을 생성합니다.

C:\dev\tutorial\flutter>flutter create myapp

 

Flutter가 정상적으로 설치되고 환경 구축이 되었다면 아래와 같은 화면이 나옵니다.

All done!
[√] Flutter is fully installed. (Channel stable, v1.9.1+hotfix.6, on Microsoft Windows [Version 10.0.18363.476], locale
    ko-KR)
[√] Android toolchain - develop for Android devices is fully installed. (Android SDK version 29.0.2)
[√] Android Studio is fully installed. (version 3.5)
[√] VS Code is fully installed. (version 1.40.2)
[√] Connected device is fully installed. (1 available)

In order to run your application, type:

  $ cd myapp
  $ flutter run

Your application code is in myapp\lib\main.dart.

 

실제로도 디렉토리가 생성됐는지 확인합니다.

myapp 이라는 디렉토리가 생성

 

참고로 앱의 코드는 lib/main.dart에 위치해있습니다. 코드블록이 무슨 역할을 하는지, 파일 상단의 주석을 통해 알 수 있습니다.

lib/main.dart

2. App 실행

C:\dev\tutorial\flutter>cd myapp
C:\dev\tutorial\flutter\myapp>flutter run

App을 실행하는데 시간이 조금 걸립니다.

 

삼성 DEX를 통해 확인한 Flutter 기본 앱

정상적으로 실행되는것을 확인했습니다.

 

2.1. 간단한 수정

lib/main.dart 에서 간단하게 내용을 수정합니다.

...
children: <Widget>[
	Text(
		'아래 하단의 플러스 버튼을 눌러보세요.',
	),
	Text(
		'$_counter',
		style: Theme.of(context).textTheme.display1,
	),
],
...

 

수정이 끝나면 terminal 창에서 'r' 버튼을 눌러 reload 합니다. (반드시 앱이 켜진 상태에서 해야합니다)

내용을 수정하고 Reload 하여 확인

 

Reference

https://flutter-ko.dev/docs/get-started/test-drive?tab=terminal

시운전