はじめに
Flutterアプリを Androidエミュレーターと実績でデバッグ実行する手順を紹介します。
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」ボタンをクリックします。
インストールが終わったら「Finish」をクリックして画面を閉じます。
Android SDK ライセンスの承認
FlutterでAndroidアプリを実行するためには、Android SDKのライセンス承認が必要です。
次の手順でライセンスに同意する必要があります。
- ターミナルを開き、以下のコマンドを実行。
flutter doctor --android-licenses
- プロンプトが表示されたら、すべてのライセンス条項に同意します。
もう一度、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」を選択します。
追加する仮想デバイスを一覧から選択します。
今回は「Pixel 8」を選択しました。
システムイメージを選択します。指定したデバイスで使用可能なシステムイメージが白文字で表示されるので、その中から選択します。
仮想デバイスの細かい設定をします。縦向き・横向きなどの設定ができます。
設定ができたら「Finish」を押します。
VSCodeでデバッグ実行
VSCodeで、Flutterプロジェクトを開きます。
画面右下のデバイスをクリックし、表示されたリストから先ほど追加した仮想デバイスを選択します。
仮想デバイスを選択すると、次のようにエミュレーターが起動します。
VSCodeのデバックメニューから、アプリを実行します。
初回はエミュレーターのセットアップがあるため起動に時間がかかります。
しばらくすると、作成したアプリがエミュレーター上で起動します。
実機でデバッグ実行する
Androidの実機でデバッグ実行する手順も見ていきましょう。
せっかくなので、WI-FI経由でリモートデバッグする手順で進めていきます。
端末側の開発者モードとリモートデバッグを有効にする
実機でデバッグ実行するためには、端末側の開発者モードを有効化する必要があります。
まず、設定アプリを起動し「デバイス情報」をタップします。
ビルド番号の部分を複数回タップして、開発者モードを有効化します。
開発者モードが有効になると、次のようなポップアップが表示されます。
0 件のコメント:
コメントを投稿