転職したらスマレジだった件

スマレジのエンジニアやまてのテックブログです。マジレス大歓迎です。

Flutter の環境構築 ③ Android エミュレーターでのデモアプリ起動

はじめに

Flutter 開発環境の構築について、遭遇したエラーなどのつまずいた点、分からなくて調べた点などを含めて書き出します。

今回は、前回作成したデモアプリをAndroidエミュレーター上で起動します。

環境

前回

ryamate.hatenablog.com

目次

1. Android エミュレーターの作成

Android エミュレーターを作成(インストール)します。

Android エミュレーターは、 Mac 上で仮想の Android 端末を動作させることができるものです。

Android Studio を開いて、「More Actions」→「Virtual Device Manager」を選択します。

まずはどの端末のエミュレーターを作るか選択します。今回は Pixel 3 を選択しました。

次に「System Image」を選択します。

私は Intel チップ のMacなので、 ABI 列が「x86_64」のシステムイメージを選択してインストールしました。 M1 チップの場合は 「arm64」と入っているものを選択します。

以下の画面で「Finish」を押すとエミュレーターが作成されます。

2. Android エミュレーターの起動

Android エミュレーターの起動は、いろんな方法で起動できます。

2-1. VS Code での起動

画面右下のデバイスをクリックして、画面上部で作成したデバイスを選択します。

2-1’. Android Studio での起動(参考)

Android Studio での起動の手順も参考に載せます

「Device Manager」を開きます。

作成したデバイスがありますので、再生ボタン(▶️)をクリックします。

2-1’’. コマンドでの起動(参考)

※ ターミナルでの起動の手順も参考に載せます

Android エミュレーターの起動について、ターミナルだと以下のコマンドで端末リストの確認や起動ができます。

下記のコマンドを実行すると、Android エミュレーターのリストを確認できます。

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

起動するエミュレーターを指定するコマンドを実行します。

$ ~/Library/Android/sdk/emulator/emulator -avd Pixel_3_API_32
INFO    | Android emulator version 31.3.14.0 (build_id 9322596) (CL:N/A)
emulator: INFO: Found systemPath /Users/r_yamate/Library/Android/sdk/system-images/android-32/google_apis_playstore/x86_64/
INFO    | Duplicate loglines will be removed, if you wish to see each indiviudal line launch with the -log-nofilter flag.
WARNING | unexpected system image feature string, emulator might not function correctly, please try updating the emulator.
INFO    | configAndStartRenderer: setting vsync to 60 hz
INFO    | Sending adb public key [QAAAABEOTScPXWCOnC8bkGWxehFNUYhk4pv+bXT38sOvRdVuyqczvYb6sqrvRlBKIPkcLQvJEpPrOzduGU4ho63Ra97m148Ia38plT/RrKR39dxPyFe2Im6drZ1DXhSH6E4rqeDIO2IhiGpe/Skx2F7FT/Phkf9PV3eEFFeXky2yRmrW4P++55uQpmypSBGRktImoPKe7bqJy3cYkkRGyJN/OIW/uYoq6cLG/8ZthgAvvjSqy01nuRWMPjBtt+WXf2EA4t4hZif1LzHTwwsHix4TpDjxtooOUnQoUFj6q1AWzXz9F3q4sfVm8+d7B+N8XQcZsWdyuBA/hmEwoN+qtCcC//uT1AumFgyDipCGl2TS3in5E6mPCCL+ERAmodQQGNvyXIYQe5K63RZYQW/6SM3TOLQURWZUh40SadkD13Pk9Mzx7UBBPweOuRntRv1mWDTR36C/S4hgwB8NbEgQFPLyO/qClXzU29jJNsT5u+rIiBeVdfCXeaq05ESk6iO1YWo01TJc9oiA5ZmV7vrkTCGy/JQ2oWBOOy0pKrNl12zhJNwUVI9KX5qYiMU7c/w7vHOXbomAyb1he6Z7aYM5Z0fYviaOgOHQopiGz7FQRyxKYtKtJPcsHMq2hIPzHtK0ZkBfVYqO+RkJqP1sdK7Sx1ZQHt76i9R2yDn+xxn5ng9KmQ2WWt+EZwEAAQA= r_yamate@unknown]
WARNING | cannot add library /Users/r_yamate/Library/Android/sdk/emulator/qemu/darwin-x86_64/lib64/vulkan/libvulkan.dylib: failed
INFO    | added library /Users/r_yamate/Library/Android/sdk/emulator/lib64/vulkan/libvulkan.dylib
INFO    | injectedQemuChannel!
INFO    | Informing listeners of injection.
INFO    | Rootcanal has  been activated.
WARNING | *** No gRPC protection active, consider launching with the -grpc-use-jwt flag.***
INFO    | Started GRPC server at 127.0.0.1:8554, security: Local, auth: none
INFO    | Advertising in: /Users/r_yamate/Library/Caches/TemporaryItems/avd/running/pid_54350.ini
INFO    | setDisplayConfigs w 1080 h 2160 dpiX 440 dpiY 440
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"

INFO    | boot completed
INFO    | boot time 37690 ms
INFO    | Increasing screen off timeout, logcat buffer size to 2M.
INFO    | Revoking microphone permissions for Google App.

2-2. Android エミュレーター起動の確認

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

3. Android エミュレーター上でのアプリ起動

Android エミュレーターが起動した状態で、flutter run すると、エミュレーター上でアプリが起動します。

3-1. コマンドでの起動

プロジェクト直下で、下記のコマンドを実行することでエミュレーターを起動できます。

flutter run

するとエミュレーターが起動して、開発中のFlutterアプリの画面が表示されます。

$ flutter run
Using hardware rendering with device sdk gphone64 x86 64. If you notice graphics artifacts, consider enabling software rendering with
"--enable-software-rendering".
Launching lib/main.dart on sdk gphone64 x86 64 in debug mode...
Running Gradle task 'assembleDebug'...                             21.4s
✓  Built build/app/outputs/flutter-apk/app-debug.apk.
Installing build/app/outputs/flutter-apk/app.apk...              2,023ms
Syncing files to device sdk gphone64 x86 64...                      96ms

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 sdk gphone64 x86 64 is available at: http://127.0.0.1:52991/v1Sa4-nfeWg=/
The Flutter DevTools debugger and profiler on sdk gphone64 x86 64 is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:52991/v1Sa4-nfeWg=/
Application finished.

3-2. 起動したアプリの確認

Android エミュレーターAndroidア プリが起動しました。

おわりに

Flutter 開発環境の構築について、作成したデモアプリをAndroidエミュレーター上で起動しました。

次回以降も Flutter についてのアウトプットをします。

ありがとうございました。

参考

docs.flutter.dev




この記事も HHKB で書きました😏