[Flutter]. 04. 기본 템플릿 프로젝트 실행하기(Android Studio)

지난 번에는 Visual Studio Code로 Flutter 템플릿 프로젝트를 해보았습니다.

https://learn-and-give.tistory.com/37

[Flutter]. 03. 기본 템플릿 프로젝트 실행하기

오늘은 Android Studio에서 해봅시다.

 

 

 

New Flutter Project

 

Android Studio를 구동하면 (작업 중이던 프로젝트가 없다면), 아래와 같이 프로젝트 생성 화면이 나옵니다. 우리는 당연히 'New Flutter Project'를 선택 해 보겠습니다.

 

다음으로 나오는 창은 VSCode와 비교하면 조금 의외이네요. 선택 할 옵션이 너무 많아서 곤란합니다. 우리는 Flutter를 하려는 것이니,  Flutter를 선택 해 보겠습니다.

아래 화면을 보니, Flutter SDK 경로를 몰라서 설정해야 할 것 같네요. Path 환경 변수에 설정한 것으로는 안되나 봅니다.

아래와 같이 설치 된 SDK 경로를 지정합니다.(bin폴더의 상위 폴더)

다음 화면으로 넘어가면, 프로젝트이름과 위치 유형, 조직, 앱 개발 언어와 플랫폼 선택을 하는 것이 나옵니다.Flutter를 만든 구글에서 만들어서 그런지, 선택 옵션들이 좀 더 다양하고 명확하게 표시되고 있는 것 같습니다. 언어 선택도 있는데 일단 기본값 그대로 유지합니다.

생성 된 결과를 보면, Project 이름의 폴더가 따로 만들어지는 것은 아니고, 프로젝트 위치를 지정하면 그곳에 바로 프로젝트 파일들이 만들어지고, 프로젝트 이름은 폴더가 따로 없이 그냥 프로젝트 이름 그대로 쓰이는가 봅니다. VSCode와는 조금씩 다른 부분들이 있네요.

프로젝트 폴더 구조는 VS Code와 동일한 것 같습니다. 자동으로 lib 폴더 하위의 main.dart 파일이 에디터에 보이고 있습니다. 특이한 점으로 상단의 툴바를 한번 체크 해 보겠습니다.

선택 가능한 device는 아래와 같이 나옵니다. 아직 AVD를 추가 안해서 안드로이드는 선택 할 수 없나봅니다. iOS도 개발 환경이 갖춰져 있다면 보일지 모르겠지만, 윈도우에서 하려니 보이지 않네요.

 

일단 한번 실행 시켜 봅시다. Chrome을 선택하고 옆의 실행 버튼을 눌러서 실행 합니다.

Chrome이 뜨고 아래와 같이 템플릿 프로젝트가 실행되네요. 주소를 보면 local에서 웹서버를 구동시키나 봅니다.

 

 

 

 

 

 

Hot Reload

Get Start 문서에도 나오는 내용인데, Android Studio에서도 '이거 한번 해보세요'하고 알려주는 것으로 'Hot Reload'라는 것이 있습니다. 우리가 앱 개발을 할 때는 테스트 중, 값이나 식을 바꾸려면 수정 후 다시 재구동을 해야 하는데, Flutter 개발 환경에서는 저장만 하면(혹은 Reload만 누르면) 바로 반영이 되나 봅니다.

 템플릿 프로젝트가 Chrome에서 구동 된 상태에서, VS Code처럼, title을 Hello, World로 변경하고 Control+S로 저장하면 자동으로 Chrome에 그 내용이 반영 되는 것을 볼 수 있습니다.

 

 

AVD를 이용한 Emulator에서의 실행

Android Studio에서 적당한 Emulator를 만들어 그것으로 실행 해 보겠습니다. Emulator를 생성하는 것은 여기 저기 찾아보시면 많고, 그냥 뚝딱 직접 해봐도 크게 어렵지 않으니 자세한 설명은 생략할께요. 아래 그림으로 순서를 설명하자면, Device Manager를 실행시키고(#1),  만들어져 있는 Device가 없으면 Create device를 눌러 Device를 생성하고(#2), 생성이 완료되었거나 기존 Device가 있으면 실행을 시키고(#3), 실행 후 구동이 완료되면(#4), 툴바에서 이 Device를 실행 할 Device로 선택하고(#5), 실행합니다.(#6)

아래와 같이 잘 실행되었습니다. 그런데, 가장 처음에는 무슨 이상이 있나 싶었어요. Virtual Device에 필요한 android SDK 등을 설치하는 과정에서 시간이 많이 소요 된 것 같아요. 처음에는 그려려니 하면서 오래 기다리면 실행 될 것입니다. 한번 실행 된 후에는 바로 실행 잘 됩니다.

 실제 Device를 연결하는 과정도 비슷 할 것 같으니 Pass 할께요. iOS는 맥북이 없으니 Pass~

 

Get started 내용의 다음은 Codelab이라는 웹 서비스를 통해 Flutter를 개발하는 내용입니다. 이것은 Tensorflow를 쓸 수 있던 그 Colab과는 다른 곳인 것 같네요. 기본적인 개발 환경 구축 내용은 지금까지 리뷰 한 내용과 비슷한 내용이니, 다음 시간부터는 여기 소개 된 실습 내용을 살펴 보도록 하겠습니다.

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

Write your first Flutter app