Flutter를 사용해보자 2:애뮬레이터 실행하기

Flutter Doctor

Flutter를 실행하기 위해선 몇가지 검사를 해야하는데 이는 doctor라고 하는 명령으로 확인해볼 수 있다.

1
$ flutter doctor
Execution Flutter Doctor
Execution Flutter Doctor

위와같이 Flutter Dcotor를 실행하면 Flutter가 실행할 수 있는 환경인지 확인절차를 수행한다. “No issues found!”라는 메시지가 나와준다면 준비가 완료된다. 만약 오류가 발생한다면 어떻게 하면 오류를 해결할 수 있는지 메시지로 표시해주니 오류에 너무 스트레스받지말고 안내에 따라 조치해주면 된다. 특히나 IDE까지 확인해주는 꼼꼼함이 맘에 드는데 이런 기능은 다른 프레임워크에서는 보기 어려울 친절함이다.(친절한 Flutter씨 고마워요)

속이 시원

Virtual Device in Android Studio

안드로이드에서 App을 실행하려면 몇가지 사전 조치가 필요한데 Flutter doctor 명령에서 이미 확인을 했을테니 지금은 문제가 없겠지만 사실 먼저 App을 실행할 애뮬레이터를 먼저 생성해야한다.
에뮬레이터를 생성하는건 크게 어렵지 않으니 잘 따라오도록하자.

Device Manager
Device Manager

“Tools > Device Manager” 메뉴를 선택하자. 그러면 Device Manager 창이 하나 등장하게 되는데 여기서 “+” 버튼을 누르고 “Create Virtual Device”라는 메뉴를 선택하자.

Create Virtual Device
Create Virtual Device
Select Hardware
Select Hardware

적당히 내가 실행할 환경을 선택하자. 나는 그냥 Pixcel 8 Pro로 선택할거다. 특정 디바이스를 적용하고 싶다면 “New Hardware Profile” 버튼을 눌러 하드웨어 프로파일을 설정할 수 있다. 하지만 나는 통상적으로 사용할 수 있는 앱을 만들 생각이므로 적당히 아무 디바이스를 선택했다.

System Image
System Image

다음에 나오는 화면은 위와같이 선택한 디바이스에 어떤 버전의 OS를 설치할지 선택할 수 있는데 나는 API35가 최신버전이라 이것을 선택했다. 만약 본인에게 없는 이미지라면 다운로드 아이콘이 옆에 붙어있을텐데 아이콘을 클릭하면 SDK Component Installer 창이 뜨고 자동으로 다운로드를 진행한다.

SDK Component Installer
SDK Component Installer
Android Virtual Device(AVD)
Android Virtual Device(AVD)

선택이 완료되면 가상 디바이스의 이름을 설정하는 화면이 나오고 “Finish” 버튼을 누르면 가상 디바이스 등록이 완료된다.

Regist Complete the Virtual Device
Regist Complete the Virtual Device

가상 디바이스의 “▶” 버튼을 누르면 가상 디바이스가 실행되며 아래와 같은 화면을 확인할 수 있다.

Running the Virtual Device
Running the Virtual Device

Running the App in Android Studio

일단 앱을 실행하기 위해서는 가상 디바이스가 실행되어있어야한다. 그리고 “Shift + F10” 키를 입력하거나 메뉴에서 “Run > Run ‘main.dart’” 메뉴를 선택하면 가상 디바이스에 앱이 자동으로 설치되며 앱을 실행하게 된다.

Run 'main.dart'
Run
Run 'main.dart'
App launch screen

Virtual Device in Visual Studio Code

VS Code에서 가상 디바이스로 앱을 실행하는 방법은 의외로 간단하다. 일단 가상 디바이스를 만들기는 해야하는데 이를 위해서는 “Virtual Device Manager”라는 툴이 필요하다. Android Studio에 보면 Virtual Device Manager 툴을 확인할 수 있다.

Virtual Device Manager in Android Studio'
Virtual Device Manager in Android Studio

또는 VS Code에서 가상 디바이스를 생성할 방법이 없나 CLI 명령은 없나 찾아봤는데 열심히 안 찾아봐서인지는 몰라도 안나오는 것 같다. 그냥 다른 방법을 찾을 때 까지는 Andorid Studio에서 AVD(Android Virtual Device) Manager를 이용해야할 것 같다. 일단 이전 가상머신을 생성 했다는 가정을 하고 아래의 내용을 진행하도록 하겠다.
일단 챕터 1에서 만들었던 프로젝트를 VS Code에서 열어보자. 이 상태에서 “Ctrl + Shift + P” 키를 누르고 “Flutter: Launch Emulator”를 선택한다.

Launch in VS Code'
Launch in VS Code Step 1
Launch in VS Code'
Launch in VS Code Step 2

그러면 위 이미지처럼 Virtual Device Manager 에서 만들었던 가상 디바이스 목록이 나온다. 나는 최근에 만든 Picel 8 Pro API 35를 선택했다.

Launch in VS Code'
Launch in VS Code Step 3

가상 디바이스가 실행되었고 이제 앱을 실행해보자. “F5”키를 눌러보자.

Launch in VS Code'
Launch in VS Code Step 4

Debug Console 에서 앱을 실행한다는 메시지가 나타나기 시작한다.

Launch in VS Code'
Launch in VS Code Step 5

조금 기다리면 가상 디바이스에서 앱이 실행되는 것을 볼 수 있다.

결론

초반에 Flutter SDK 환경만 잡아주면 실행까지는 별로 어렵지 않다. 이제 본격적인 개발을 진행해봐야겠다. 아, 앞으로는 Visual Studio Code 환경에서 개발할거다. Android Studio는 뭔가 고급지다. 난 저렴하게 코딩을 한다. 뭔가 자동으로 GUI 툴을 이용해 처리되는건 별로 저렴하지 않다. CLI에서 오류를 해결해나가는게 조금 더 성향에 맞다.