FlutterアプリケーションをiOS, Androidエミュレーターで起動する

背景

前回、Flutterのプロジェクトを作成し、デモアプリケーションが起動するところまで確認しました。

しかし、アプリケーションが起動したのはChromeでした。本来はiOSとAndroidのエミュレーターで動作させたいです。

今回は、デモアプリケーションをそれぞれのエミュレーターで動作させる方法を確認します。

iOSエミュレーターでの起動

iOSエミュレーターは

1
/Applications/Xcode.app/Contents/Developer/Applications

ディレクトリの下にあるSimulator.appです。一度上記のディレクトリを開いて、アイコンをダブルクリックしてみます。

iOSエミュレーター

無事エミュレーターが起動しました。

Flutterアプリケーションの実行

この状態でflutter runを実行してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$ flutter run
Launching lib/main.dart on iPhone 13 in debug mode...
Running Xcode build...
└─Compiling, linking and signing... 4.3s
Xcode build done. 12.6s
Syncing files to device iPhone 13... 90ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on iPhone 13 is available at: http://127.0.0.1:57320/EBquF8FZZxI=/
The Flutter DevTools debugger and profiler on iPhone 13 is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:57320/EBquF8FZZxI=/

iOSエミュレーターでFlutterデモアプリケーション起動

エミュレーター上でデモアプリケーションが起動しました。

今回はアイコンをダブルクリックで起動しましたが、Spotlightから起動できることも確認しました。こちらの方が便利ですね。

Androidエミュレーターでの起動

次にAndroidのエミュレーターで起動してみます。

公式ドキュメントを参考にコマンドラインからの起動を試してみます。

インストールされているエミュレーターの確認

コマンドラインで起動する際には、仮想デバイスを指定しないといけません(-avdオプション)。なので、インストールされているエミュレーターを確認する必要があります。

先程の公式ドキュメントによると、emulator -list-avdsというコマンドでインストールされている仮想デバイスの一覧が表示できるようです。emulatorのパスは

1
/Users/user/Library/Android/sdk/emulator/emulator

なので、パス指定して実行してみます。

1
$ ~/Library/Android/sdk/emulator/emulator -list-avds

なにも表示されません。ということは仮想デバイスがインストールされていないということですね。早速インストールしてみます。

仮想デバイスの追加

公式ドキュメントの仮想デバイスを作成して管理するを参考にデバイスを追加してみます。

Android Studioを起動し、More Actions->Virtual Device Managerをクリックします。

No virtual Device addedとなっており、やはり仮想デバイスは一つも登録されていません。左上のCreate Deviceボタンをクリックしてみます。

すると、デバイスを選ぶ画面が表示されます。左のCategoryPhoneのままにしておき、右の一覧からデバイスを選択します。今回はPixel 5にしてみます。Pixel 5を選択し、Nextをクリックします。

次にSystem Imageの選択画面になります。ダウンロードしないと次に進めないので、推奨されたバージョンのダウンロードリンクをクリックしてダウンロードします。

ダウンロードが完了すると、Nextがクリックできるようになるので、次に進みます。

最後に仮想デバイス名を入力して完了です。デフォルトで名前が入っているので今回はそのままにしておきます。

追加した仮想デバイスの確認

再度コマンドラインで仮想デバイスの一覧を確認します。

1
2
$ ~/Library/Android/sdk/emulator/emulator -list-avds
Pixel_5_API_30

追加されていることが確認できました。

エミュレーターの起動

ではコマンドラインで起動します。仮想デバイスの指定以外のオプションはなしで起動してみます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ ~/Library/Android/sdk/emulator/emulator -avd Pixel_5_API_30
INFO | Android emulator version 31.2.8.0 (build_id 8143646) (CL:N/A)
WARNING | unexpected system image feature string, emulator might not function correctly, please try updating the emulator.
INFO | configAndStartRenderer: setting vsync to 60 hz
WARNING | cannot add library /Users/user/Library/Android/sdk/emulator/qemu/darwin-x86_64/lib64/vulkan/libvulkan.dylib: failed
INFO | added library /Users/user/Library/Android/sdk/emulator/lib64/vulkan/libvulkan.dylib
INFO | Started GRPC server at 127.0.0.1:8554, security: Local
INFO | Advertising in: /Users/user/Library/Caches/TemporaryItems/avd/running/pid_77656.ini
INFO | Your emulator is out of date, please update by launching Android Studio:
- Start Android Studio
- Select menu "Tools > Android > SDK Manager"
- Click "SDK Tools" tab
- Check "Android Emulator" checkbox
- Click "OK"

Androidエミュレーター

起動できました。

flutter runの実行

ではエミュレーターが起動した状態でflutter runを実行します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
$ flutter run
Using hardware rendering with device Android SDK built for x86. If you notice graphics
artifacts, consider enabling software rendering with "--enable-software-rendering".
Launching lib/main.dart on Android SDK built for x86 in debug mode...
Checking the license for package Android SDK Tools in /Users/user/Library/Android/sdk/licenses
License for package Android SDK Tools accepted.
Preparing "Install Android SDK Tools (revision: 26.1.1)".
"Install Android SDK Tools (revision: 26.1.1)" ready.
Installing Android SDK Tools in /Users/user/Library/Android/sdk/tools
"Install Android SDK Tools (revision: 26.1.1)" complete.
"Install Android SDK Tools (revision: 26.1.1)" finished.
Checking the license for package Android SDK Build-Tools 29.0.2 in /Users/user/Library/Android/sdk/licenses
License for package Android SDK Build-Tools 29.0.2 accepted.
Preparing "Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)".
"Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)" ready.
Installing Android SDK Build-Tools 29.0.2 in /Users/user/Library/Android/sdk/build-tools/29.0.2
"Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)" complete.
"Install Android SDK Build-Tools 29.0.2 (revision: 29.0.2)" finished.
Checking the license for package Android SDK Platform 31 in /Users/user/Library/Android/sdk/licenses
License for package Android SDK Platform 31 accepted.
Preparing "Install Android SDK Platform 31 (revision: 1)".
"Install Android SDK Platform 31 (revision: 1)" ready.
Installing Android SDK Platform 31 in /Users/user/Library/Android/sdk/platforms/android-31
"Install Android SDK Platform 31 (revision: 1)" complete.
"Install Android SDK Platform 31 (revision: 1)" finished.
Running Gradle task 'assembleDebug'... 157.2s
✓ Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk... 1,035ms
Syncing files to device Android SDK built for x86... 116ms

Flutter run key commands.
r Hot reload. 🔥🔥🔥
R Hot restart.
h List all available interactive commands.
d Detach (terminate "flutter run" but leave application running).
c Clear the screen
q Quit (terminate the application on the device).

💪 Running with sound null safety 💪

An Observatory debugger and profiler on Android SDK built for x86 is available at:
http://127.0.0.1:58754/V-rtq-7NtAg=/
The Flutter DevTools debugger and profiler on Android SDK built for x86 is available at:
http://127.0.0.1:9100?uri=http://127.0.0.1:58754/V-rtq-7NtAg=/

AndroidエミュレーターでFlutterデモアプリケーション起動

初回なのでちょっと時間がかかりましたが、無事起動できました。

まとめ

Android, iOSそれぞれのエミュレーターでFlutterでもアプリケーションを実行することができました。それぞれのエミュレーターを起動した状態でflutter runすることで、エミュレーター上でアプリケーションを動作させることができるということがわかりました。

エミュレーターで起動するとモバイルアプリを開発するんだなという実感が湧いてきます。

次回はプロジェクトの中のファイルがどういったものなのかを確認していきたいと思います。

参考図書