Chromebook で Android Studio の Flutter 開発環境を作る

何となくスマホアプリを作りたくなったので、Flutter に手を出すことにしました。というわけで、Chromebook + Android Studio でハローワールドまでの流れを説明していきます。

以下の以下の公式ページに沿って進めただけ (かなり親切でした) なのですが、英語なのと微妙にハマりどころ (見落としとか) があったので、一通り書いていこうと思います。
https://flutter.dev/docs/get-started/install/chromeos

flutter をインストールする

適当なディレクトリに git clone で flutter を配置します。私は /opt/flutter となるように配置しました。

コマンド例

/opt$ git clone https://github.com/flutter/flutter.git

次に flutter と dart コマンドを実行できるようにパスを通します。私は .bashrc に記述を追加しました。

追記例

# /opt/flutter とした場合
export PATH=$PATH:/opt/flutter/bin

flutter コマンドが使えることを確認するために flutter doctor コマンドを実行します。初回実行では SDK をダウンロードするらしく、ちょっと時間がかかります。また、flutter doctor コマンドは flutter の実行環境が整っているか確認するコマンドです。Android Studio などの開発環境がなければ、例えば以下のようにエラーが出るはずです (今回は使いませんが、私の環境にはもともと IntelliJ IDEA が入っているので、読んでる方と表示が違うかもしれません)。

コマンド実行例

$ flutter doctor
...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (...)
[✗] Android toolchain - develop for Android devices
    ✗ Unable to locate Android SDK.
      Install Android Studio from: https://developer.android.com/studio/index.html
      On first launch it will assist you in installing the Android SDK components.
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).
      If the Android SDK has been installed to a custom location, please use
      `flutter config --android-sdk` to update to that location.

[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[!] Android Studio (not installed)
[✓] IntelliJ IDEA Community Edition (version 2020.3)
[✓] VS Code (version 1.51.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 4 categories.

エラーは出ていますが、とりあえずこれで flutter コマンドが実行できている状況なので、このまま進めていきます。

Android Studio をインストールする

以下の公式ページをもとに進めていきます。
https://flutter.dev/docs/get-started/install/chromeos#android-setup

まずは以下のページから Android Studio をダウンロードしてインストールします。
https://developer.android.com/studio

インストールが終わったら Android Studio を手動で起動します。おそらくインストールが終わっても勝手には起動しません。初回起動時に Android SDK 等をインストールするか聞かれるので、そのとおり進めていきます。ウィザードどおり進め終わってメインメニューが表示されたらドキュメントどおりに以下コマンドを実行します。

コマンド例

# Android license をセットアップするコマンドのようです。
$ flutter doctor --android-licenses

# 再度現在の flutter 環境を確認します。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (...)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Community Edition (version 2020.3)
[✓] VS Code (version 1.51.1)
[!] Connected device
    ! No devices available

flutter docker コマンドは Android toolchain と Android Studio にチェックがついていればここでは OK のはずです。Chrome は Flutter を Web 対応させたいときのデバッグで必要となるようですが、今回はいらないかと思います。

Chrome OS で Android アプリをデバッグできるようにする

Chrome OS で Android アプリが実行できるのはご存知かと思いますが、任意のアプリを実行する (デバッグする) には ADB という設定を有効化する必要がありますので、以下 URL を進めていきます。
https://flutter.dev/docs/get-started/install/chromeos#deploy-to-your-chromebook

ADB を有効化して Chrome OS を再起動したら、ターミナル上で以下コマンドを実行します。

コマンド例

# Flutter でのデバック用のデバイスを検索するコマンドです。
$ flutter devices
(... 出力メモるの忘れましたがすんなり終わるはず)

# 再度 Flutter の設定状況を確認します。
$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (...)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
    ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Android Studio (version 4.2)
[✓] IntelliJ IDEA Community Edition (version 2020.3)
[✓] VS Code (version 1.51.1)
[✓] Connected device (1 available)

! Doctor found issues in 1 category.

flutter doctor で Connected device にチェックが付いていれば OK です。

Android Studio でアプリをデバッグ

Android Studio に flutter プラグインを導入します。以下ページのとおりです。
https://flutter.dev/docs/get-started/editor

Android Studio を起動し、画面右下の configure -> plugin から flutter というプラグインを検索してインストールします。インストールが終わると Android Studio が再起動し、メインメニューに Flutter のプロジェクトを作成する選択肢が追加されているので、これをクリックして順次進めていきます。以下ページのとおりです。
https://flutter.dev/docs/get-started/test-drive

なお、Flutter SDK の Path という項目があると思いますが、ここは最初に Clone して作った Flutter のフォルダ (私の場合には /opt/flutter) を指定したら特に問題なく通りました。

プロジェクトの初期化が終わったら Run (画面右上にある緑色の右矢印) を実行すると、時間経過後 (結構初回ビルドに時間がかかります) にHello world アプリが起動するはずです。

ここでうまくいった方はお疲れさまでした。残念ながら私は "Running Gradle task 'assembleDebug'" というメッセージが出たまま全然起動しませんでした。

初回ビルドにはかなり時間がかかり、またビルド後のデバッグ開始までにも結構時間がかかるのです (Chromebook は低スペが多いと思うのでそれもあると思います) が、もし永遠に終わらないようだったら、上記のメッセージ (Running...) でググってみてください。あるあるらしく、結構いろんな解決策が出てきます。

私の場合は File -> Project Structure の Project SDK が空になっていたので、こちらをプルダウンして Android SDK を設定し、再度 Run したらいけました。

感想

まだ Hello World 以外何もやっていないのですが、パッと見た感じ開発しやすそうな感じがしています。というか、Chromebook でエミュレータを使わずそのままデバッグできるのは最高ですね。私は Pentium の安価 Chromebook なのですが、こんなのでもサクサク開発できそうです。

若干 React Native より Hello world までが面倒な気もしましたが、開発は何となくしやすそうな感じがしています。

話題の Windows 11 では Android のエミュレータが動いて Android アプリが動くらしいので、Android はこれから面白そうな気がします。ガンガンアプリ作ってきましょう。