Flutter 기초(3) - flutter 데모 앱

드디어 flutter로 앱을 실행해보도록 하겠습니다.

 

먼저 VS Code를 켜줍니다. 그리고 [Ctrl] + [Shift] + p 를 누르면 pallete가 보이는데요.

위처럼 pallete가 뜨면 flutter를 입력해줍니다.

 

그리고 New Project를 만들어주도록 합시다.

그러면 프로젝트명을 입력할 수 있는데 google에서 예를 들어준대로 myapp으로 하겠습니다. 

 

그러면 위처럼 flutter 프로젝트가 생성되고 main.dart 창이 열립니다.

 

오른쪽 아래의 파란색 status bar를 보시면 핸드폰이 연결돼있는 것을 볼 수 있습니다. 기기를 연결 안하고 싶으시면 No Devices를 클릭하여 시뮬레이터를 실행하시면 됩니다. 이제 Debug > Start Debugging 를 누르시거나 F5 키를 누르시면 어플리케이션이 시작됩니다.

 

위와 같이 저의 첫 Flutter 어플리케이션이 실행됐습니다!

 

오른쪽 버튼을 누르게 되면..??

누른만큼 숫자가 올라가게 됩니다.

 

이제 어플리케이션을 수정해보겠습니다.

main.dart 파일에서 pushed를 clicked로 변경하고 저장을 눌러보겠습니다.

 

와.... 저장을 누르자마자 WEB 프로그래밍 할 때처럼 Hot reload가 됐습니다. 완전 신세계....

Flutter 데모 앱은 여기까지 살펴보도록 하고 다음에는 Google에서 알려주는대로 첫 앱을 작성해보겠습니다.