Flutterとは
Flutterは、単一のコードで複数のプラットフォーム上で動作可能なアプリケーションが作成可能なオープンソースフレームワークです。執筆時点でiOS・Android・Windows・macOS・Linux・Webのアプリケーションが作成可能です。
->公式サイト
環境と前提
- Windows 11 Pro 23H2
- WSL2 (Ubuntu 22.04)
本来は公式のインストール手順に沿って作業をするのが一番ですが、今回は「Windows環境を汚さない」「WSLのコマンドラインで完結する」を目指して手順を再構成しています。
本記事のゴールは「WSL環境で開発したFlutterアプリをAndroidスマホ実機で(デバッグモードで)起動する」ところまでです。
なお、今回はAndroid Studio のエディタおよびAndroid エミュレータの環境構築は対象としません。
また、WSL環境はこの手順に沿って作成したまっさらな状態を前提とします。既存環境でも大きく変わらないと思いますが、環境の状態次第では一部手順が異なる可能性があるのでご注意ください。
インストール手順
1. Ubuntu 前準備
パッケージの最新化とunzipのインストール。
$ sudo apt update -q && sudo apt upgrade -yq
$ sudo apt install -yq unzip
2. JDK インストール
java のバージョンは、後続でインストールする Andoroid SDK が要求するバージョンとそろえる必要がある。今回は java17。
$ sudo apt install openjdk-17-jdk -yq
# パスを環境変数へ追加
$ export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64
$ export PATH=$PATH:$JAVA_HOME/bin
# 起動時にパスが通るよう設定
$ echo export JAVA_HOME=/usr/lib/jvm/java-17-openjdk-amd64 >> ~/.bashrc
$ echo export PATH=\$PATH:\$JAVA_HOME/bin >> ~/.bashrc
# シェル再起動 (任意)
$ exec $SHELL -l
未確認だが、恐らくjava-17-openjdk-amd64はの名称はバージョンやCPUなどによって異なる。確認してから作業すると良い。
3. Android SDK インストール
Android Studioの ダウンロードページから、Linux コマンドライン用ツールのダウンロードのURLを取得する。
取得したURLを用いて、Android SDK を取得する。ダウンロード先のURLは上記で取得したものに読み替える。
# 展開先のディレクトリ作成
$ mkdir -p ~/Android/SDK/cmdline-tools
# ダウンロード & 解凍
$ wget https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip?hl=ja -O latest.zip
$ unzip latest.zip
$ mv cmdline-tools ~/Android/SDK/cmdline-tools/latest
$ rm -rf latest.zip
# パスを環境変数へ追加
$ export ANDROID_HOME=$HOME/Android/SDK
$ export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
$ export PATH=$PATH:$ANDROID_HOME/build-tools # ビルトツールは別途パスへ追加必要
# 起動時にパスが通るよう設定
$ echo export ANDROID_HOME=\$HOME/Android/SDK >> ~/.bashrc
$ echo export PATH=\$PATH:\$ANDROID_HOME/cmdline-tools/latest/bin >> ~/.bashrc
$ echo export PATH=\$PATH:\$ANDROID_HOME/build-tools >> ~/.bashrc
# シェル再起動 (任意)
$ exec $SHELL -l
次に Platform Tools をインストールする。開発したアプリをスマホにインストールするのに必要なツール群らしい。
$ sdkmanager --install "platform-tools"
# 同じくパス設定
$ export PATH=$PATH:$ANDROID_HOME/platform-tools
$ echo export PATH=\$PATH:\$ANDROID_HOME/platform-tools >> ~/.bashrc
$ exec $SHELL -l
# adb を実行してインストール確認 (正しくバージョンが表示されれば OK)
$ adb --version
最後に、ライセンスを確認し同意しておく。
$ sdkmanager --licenses
4. Flutter インストール
公式インストール手順から Android SDK のときと同様に URL を取得してダウンロード・インストールする。
$ wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.19.6-stable.tar.xz
$ tar xf flutter_linux_3.19.6-stable.tar.xz
$ rm flutter_linux_3.19.6-stable.tar.xz
# 同じくパス設定
$ export FLUTTER_ROOT=$HOME/flutter
$ export PATH=$PATH:$FLUTTER_ROOT/bin
$ echo export FLUTTER_ROOT=\$HOME/flutter >> ~/.bashrc
$ echo export PATH=\$PATH:\$FLUTTER_ROOT/bin >> ~/.bashrc
$ exec $SHELL -l
# インストール確認 (正しくバージョンが表示されれば OK)
flutter --version
Linux 用アプリビルト用ツール群インストール（任意）
$ sudo apt install -yq clang cmake ninja-build pkg-config libgtk-3-dev liblzma-dev
以上でFlutterのインストールは完了。flutter doctorというコマンドを実行することで、インストール状況の診断が可能。
Flutter プロジェクトの準備とビルド (Web アプリ)
任意の空のディレクトリでvscodeを起動。
$ cd ~
$ mkdir flutter_sample
$ cd flutter_sample
$ code .
Flutter の拡張機能をインストール。
コマンドパレットから Flutter プロジェクトを作成。
Applicationを選択。
プロジェクトを配置する親ディレクトリを設定。
プロジェクト名を設定。
するとプロジェクトのディレクトリをルートとした状態でvscodeが再起動する。
Web Server に設定する。
F5 でデバッグモードで起動。
ビルドが完了すると、デフォルトのブラウザ（Google Chrome推奨）が起動する。以下では Google Chrome の利用を前提とする。
初回起動時には、Dart Debug Extension の拡張機能のインストールを促されるはず。2回目以降はまず真っ白な画面が起動するので、拡張機能から Dart Debug Extension を選択し、「OPEN DEVTOOLS」を押下する。
すると、ブラウザ上でアプリケーションが起動する。
Flutter はホットリロードに対応しているので、デバッグモードで起動している状態でソースを編集・保存すると、起動中のアプリケーションに即時反映される。
Android アプリのビルド
ここからはAndroid スマートフォン実機で開発者モード（開発者向けオプション）を用いる。
さらに、同一ネットワーク上に端末が接続されていれば、物理的なケーブル等が不要な「ワイヤレスデバッグ」を利用する。これはAndroid 11 以降でないと利用できないので注意。
10 以前でもUSBケーブルを用いて接続することは可能だが、この方法は「Windows 環境を汚さない」という前提に反するので、ここでは割愛する。
また、詳細な操作方法は各スマートフォンのメーカー・バージョンごとに異なる可能性があるので注意。執筆時点ではXiaomi の Redmi 12 5G 、 Android 14 を用いて検証しており、以降の記述もこちらの操作方法に則る。
1. 実機の開発者モードを準備
まず、Android の開発者向けオプションを有効にする。設定から「デバイス情報」を開き、「OS バージョン」を何回か連続でタップすると有効化される。
次に、設定の「追加設定」->「開発者向けオプション」の「デバッグ」から「USB デバッグ」・「USB 経由でインストール」・「USB デバッグ(セキュリティ設定)」を有効にする。
2. WSL 環境と実機の接続(ワイヤレスデバッグ)
「開発者向けオプション」の「デバッグ」の「ワイヤレスデバッグ」を開く。
ワイヤレスデバッグを有効にし、「IP アドレスとポート」に記載のある IP アドレス・ポート番号をメモ。さらに、「ペア設定コードによるデバイスのペア設定」を押下し、ペア設定コード・ IP アドレス・ポート番号もメモする。
まず、Android とペアリングする。「ペア設定コードによるデバイスのペア設定」の方でメモしたコード・番号を用いて、下記コマンドを実行。
$ adb pair 192.168.XXX.YYY:AAAAA
Enter pairing code: ZZZZZZ
Successfully paired to ~と表示されればOK。
ペアリングが完了したら接続するコマンドを実行する。今度は「IP アドレスとポート」の方でメモした番号を用いる。
$ adb connect 192.168.XXX.YYY:BBBBB
connected to ~と表示されればOK。
flutter devices コマンドで接続されているデバイス一覧を見ることが可能。その中に自分のデバイスが表示されていればOK。
3. アプリのデバッグ
接続完了後 vscode に戻ると、Android 端末を選択できるようになっているので、同様に F5 で起動する。パッケージのインストールが走るので初回は結構時間がかかる。
実機側で下図のように起動すればOK。こちらもホットリロードに対応しているので、変更が即反映される。
