WSL2でFlutterアプリを開発する準備

WindowsでFlutterアプリを開発するには、Windows上にAndroid StudioをインストールしてadbをWSLから叩けるようにするとか、エミュレータを起動するためにどうこうするとかいろいろな情報があるけどどれも複雑だしWindows上に開発環境をセットアップしたくなかったため、WSLだけでシンプルに開発環境をセットアップする方法を調べた。

Flutterそのもののセットアップは調べれば簡単に出てくるので割愛する。

結論

  • 開発環境はWSL2上に構築する。
  • ワイヤレスデバッグでWSLからAndroid実機に開発中のアプリをインストールする。

手順

1. Android Studioのインストール

公式ドキュメントの手順通りにAndroid StudioをWSL上にインストールする。

2. ワイヤレスデバッグの有効化

まずアプリをインストールするAndroid実機で開発者向けオプションを有効にする。設定アプリの「デバイス情報」から「ビルド番号」を5回ほどタップすると、開発者向けオプションが有効になる。

次に設定アプリの「システム」>「開発者向けオプション」と進むと「ワイヤレスデバッグ」という項目がある。「ワイヤレス デバッグの使用」をオンにする。

Tipsとしては「開発者向けオプション」の「クイック設定開発者用タイル」からワイヤレスデバッグをオンにすると、タイル(端末上部を下にスワイプすると出てくるメニュー)にワイヤレスデバッグのオン/オフを切り替えるスイッチが出せるので便利。またスイッチを長押しすることでワイヤレスデバッグの設定に遷移できる。

3. ペアリング

ワイヤレスデバッグで接続する前にWSLとAndroid実機をペアリングする必要がある。

設定アプリから「システム」>「開発者向けオプション」>「ワイヤレスデバッグ」と進み、「ペア設定コードによるデバイスのペア設定」をタップすると、ペアリング用の6桁のコードとIPアドレスおよびポート番号が表示される。

次にWSL側でadb pairコマンドで表示されたIPアドレスおよびポート番号を入力し、次に6桁のコードを入力すると、ペアリングが成功する。

$ adb pair <ip address>:<port>
Enter pairing code: <code>
Successfully paired to ...

この設定が完了すれば、次回以降は次のワイヤレスデバッグの接続だけで済むようになる。

4. ワイヤレス接続

同じく「ワイヤレスデバッグ」の画面の「IPアドレスとポート」に表示されたIPアドレスとポートを使ってWSLからAndroid実機に接続する。

$ adb connect <ip address>:<port>
connected to ...

ここまで成功すると、あとはインストール先にワイヤレス接続したAndroid実機が選べるようになるはず。