WSL2 で Flutter 開発 (実機デバッグ)

Android

WSL2 で Flutter アプリを開発する時は、現状だと USB で接続するよりかは Wi-Fi でつなぐほうが楽そうです。

環境は nvim で作ることにします。

Command line tools をインストール

Android Studio は入れないので、 command line tools のみを入れます。

Command line tools only から Linux 版をダウンロードして unzip します。

中には

  • cmdline-tools/bin
  • cmdline-tools/lib
    が入っています。

今、 ANDROID_SDK_ROOT として ~/.android を使うようにして話を進めます。

❯ mkdir ~/.android
❯ mv cmdline-tools ~/.android
❯ cd ~/.android/cmdline-tools
❯ mkdir latest # 階層を1個掘る必要がある
❯ mv bin latest/
❯ mv lib latest/

階層構造は下記のようになります。

cmdline-tools
├── latest
│   ├── bin
│   │   ├── apkanalyzer
│   │   ├── avdmanager
│   │   ├── lint
│   │   ├── retrace
│   │   ├── screenshot2
│   │   └── sdkmanager
│   ├── lib
...

zshrc を設定

下記のように PATH を設定します。

export ANDROID_SDK_ROOT=$HOME/.android
export PATH=$ANDROID_SDK_ROOT/cmdline-tools/tools:$PATH
export PATH=$ANDROID_SDK_ROOT/cmdline-tools/tools/bin:$PATH
export PATH=$ANDROID_SDK_ROOT/cmdline-tools/tools/lib:$PATH
export PATH=$ANDROID_SDK_ROOT/platform-tools:$PATH
export PATH=$ANDROID_SDK_ROOT/emulator:$PATH

上記の環境変数を適用した状態にして次へ進みます。

adb を設定

Connect to a device over Wi-Fi (Android 11+)

の通りにします。

Android の Developer settings から Wireless debugging を ON にします。↑のサイトだと、ON にした時のダイアログに沿って設定すると書いてありますが、間違って消しちゃった時は下記のようにします。

Wireless debugging と書いてある文字の上をタップすると、下の階層へ進みます。 Pair device with paring code をタップすると、 Pair with device の Dialog が表示されます。

ここで IP address and port という表示があるので、WSL2 上のコマンドラインから

❯ adb pair 192.168.1.123:34567

のようにして接続し、Android 画面上に表示されている Wi-Fi paring code を入力します。正しく入力すると成功のメッセージが表示されます。

その後は、Wireless debugging の画面に戻り、上の方に出ている IP address and port を確認し、 adp connect します。この port は paring の際の port とは異なるので注意。

❯ adb connect 192.168.1.123:35555

接続されているか確認します。

❯ adb devices
List of devices attached
192.168.1.123:35555      device

Flutter を起動

❯ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.2.3, on Linux, locale en_US.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Chrome - develop for the web
[!] Android Studio (not installed)
[✓] Connected device (2 available)

! Doctor found issues in 1 category.

Android Studio は今回インストールしていないので、見つからなくても問題ありません。

❯ flutter devices
2 connected devices:

Pixel 4 (mobile) • 192.168.1.123:35555 • android-arm64  • Android 11 (API 30)
Chrome (web)     • chrome             • web-javascript • Google Chrome 91.0.4472.114

Flutter からも device が見えています。

下記コマンドで起動します。

❯ flutter run -d 192.168.1.123:35555

なお、devices で Web も見えていますが、 -d chrome としても WSL内では立ち上がらないため、Web版を起動したい場合は下記のようにして Web Server を立ち上げれば、Windows 側のブラウザで確認できます。

❯ flutter run -d web-server
Launching lib/main.dart on Web Server in debug mode...
Waiting for connection from debug service on Web Server...         16.2s
lib/main.dart is being served at http://localhost:44711
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.

🔥  To hot restart changes while running, press "r" or "R".
For a more detailed help message, press "h". To quit, press "q".

標準出力にURLが表示されるので、この場合だと http://localhost:44711 を開けば Web 版が見られます。

USBでつなぐのは結構手間がかかりそうでしたが、Wi-Fi 接続であればすぐに設定が出来ました😎

関連コンテンツ