Flutterアプリを Androidエミュレーターおよび実機でデバッグする

2024年5月15日水曜日

Flutter

t f B! P L

はじめに

Flutterアプリを Androidエミュレーターと実績でデバッグ実行する手順を紹介します。

Android Studioのインストール

以下のサイトからAndroid Studioをダウンロードします。

Android Studio

Android Studioをダウンロード

ダウンロードしたファイルをアプリケーションにインストール(ドラッグ)します。

Android Studioをアプリケーションにインストール

画面の指示に従って、インストールします。

インストーラーの画面に従ってAndroid studioをインストール

インストールできたタイミングで、flutter doctorで確認してみましょう。
次の結果のように、cmdline-toolsが見つからないエラーと、Androidライセンスの承諾が未完了である2件のエラーが出ているはずです。

% flutter doctor

Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, 3.19.6, on macOS 14.3 23D2057 darwin-arm64, locale ja-JP)
[!] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
    ✗ Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[!] Xcode - develop for iOS and macOS (Xcode 15.3)
    ✗ Unable to get list of installed Simulator runtimes.
[] Chrome - develop for the web
[] Android Studio (version 2023.3)
[] VS Code (version 1.88.1)
[] Connected device (2 available)
[] Network resources

それでは、この2件のエラーを解消してきましょう。

Android SDK コマンドラインツールのインストール

Android SDK コマンドラインツールをインストールします。

Android Studioを起動しSettings(設定)画面を表示します。
次のイメージのとおり「Android SDK Command-line Tools」のインストールにチェックを入れて「OK」ボタンをクリックします。

Android SDK コマンドラインツールをインストール

インストールが終わったら「Finish」をクリックして画面を閉じます。
「Finish」をクリックして画面を閉じます

Android SDK ライセンスの承認

FlutterでAndroidアプリを実行するためには、Android SDKのライセンス承認が必要です。
次の手順でライセンスに同意する必要があります。

  1. ターミナルを開き、以下のコマンドを実行。
flutter doctor --android-licenses
  1. プロンプトが表示されたら、すべてのライセンス条項に同意します。

もう一度、flutter doctorを確認してみましょう。
今度は、Android toolchainの項目がチェックOKになっているはずです。

flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.19.6, on macOS 14.3 23D2057 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 15.3)
    ✗ Unable to get list of installed Simulator runtimes.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2023.3)
[✓] VS Code (version 1.89.1)

Androidエミュレーターでデバッグ実行する

Androidエミュレーターでデバッグ実行する手順を見ていきましょう。

Android Studioで仮想デバイスを追加

Android Studioを起動し、画面右側の「Device Manager」を開きます。
次に「+」→「Create Virtual Device」を選択します。

仮想Androidデバイスを追加

追加する仮想デバイスを一覧から選択します。
今回は「Pixel 8」を選択しました。

仮想デバイスを一覧から選択

システムイメージを選択します。指定したデバイスで使用可能なシステムイメージが白文字で表示されるので、その中から選択します。

システムイメージを選択

仮想デバイスの細かい設定をします。縦向き・横向きなどの設定ができます。
設定ができたら「Finish」を押します。

仮想デバイスの細かい設定

VSCodeでデバッグ実行

VSCodeで、Flutterプロジェクトを開きます。
画面右下のデバイスをクリックし、表示されたリストから先ほど追加した仮想デバイスを選択します。

デバイスの選択

仮想デバイスを選択すると、次のようにエミュレーターが起動します。

VSCodeで仮想デバイスを選択すると、エミュレーターが起動する

VSCodeのデバックメニューから、アプリを実行します。

VSCodeのデバックメニューから、アプリを実行

初回はエミュレーターのセットアップがあるため起動に時間がかかります。
しばらくすると、作成したアプリがエミュレーター上で起動します。

エミュレーター上でアプリが起動

実機でデバッグ実行する

Androidの実機でデバッグ実行する手順も見ていきましょう。
せっかくなので、WI-FI経由でリモートデバッグする手順で進めていきます。

端末側の開発者モードとリモートデバッグを有効にする

実機でデバッグ実行するためには、端末側の開発者モードを有効化する必要があります。
まず、設定アプリを起動し「デバイス情報」をタップします。

enter image description here

ビルド番号の部分を複数回タップして、開発者モードを有効化します。

enter image description here

開発者モードが有効になると、次のようなポップアップが表示されます。
enter image description here

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ