WSL2でFlutter開発環境を構築した

私は普段、Windows上のWSL2でプログラミングをしています。Web開発や機械学習では特に問題なかったのですが、Flutterでスマホアプリ開発をする際には、エミュレータによる動作確認で一工夫必要だったので、メモとしてまとめておきます。

やったこと

1. WSL2上でコードを書き、ビルドする
2. WSL2から flutter run でAndroid実機での動作確認をする
3. WSL2から flutter run でWindowsのAndroidエミュレータ上での動作確認をする

1については、LinuxでのFlutter環境構築とほぼ変わらないので軽めに流し、2と3をメインに書きます。 Flutterはドキュメントが割としっかりしているので、特に工夫が必要ない部分は公式ドキュメントへのリンクを貼っています。適宜、参照してください。

1. WSL2上のFlutter環境構築

Flutterの公式ページにかかれているLinuxでの環境構築手順に従います。ただし、動作確認はこの後のステップで行うので、“3. Test drive”の前までで止めておきます。それ以外はこのパートではWSL特有の罠はなかったと思います。ついでに、複数バージョンのFlutterを切り替えられるfvmを入れました。

エディタはVimを使っているため、あまり参考にならないかもしれません。読み飛ばしてもらって構いません。まず、vim-flutterというプラグインを入れ、language serverとしてdartlsを利用できるように設定しました。次に、fvmのFlutterを使えるように let g:flutter_command = 'fvm' をvimrcに追記しました(参考)。プラグインはなくても開発できますが、lintを表示させたいのと、Flutter特有の括弧に対応するWidget名を表示してくれる機能(例: ) // Container)が便利なので、入れることをおすすめします。

普通にやるならVSCodeが無難だと思いますが、それならそもそもWSL2ではなくWindows側で開発すれば良いという気がします。

2. WSL2からAndroid実機での動作確認

昔はUSB接続しか方法がなかったので色々と大変だったようですが、今はWi-Fi経由でデバッグができるので実際のところ、WSL2を使わない場合とほぼ同じです。そして、公式のドキュメントが十分に分かりやすいので解説することがありません。

注意点としては、WSL特有ではないですが、 adb connect が失敗したときはもう一度 adb pair すると良いです。

ここまでの手順に問題がなければ、WSL2のVim上でFlutterのコードを書き、flutter run でAndroid実機での動作確認ができるようになっているはずです。これだけでもアプリ開発はできるのですが、最後に実機ではなくAndroidエミュレータを使ってデバッグできるように環境構築をします。

3. WSL2からWindows上のAndroidエミュレータでの動作確認

これは実機デバッグに比べるとやや面倒です。Windows側でもFlutterの環境構築を行い、WSL2とWindowsの環境を接続する必要があるからです。方針としては、WindowsにFlutterとAndroid Studioをインストールした後、WSL2からsocatでWindows側のadbを利用することになります。

まず、Windows上にFlutter環境を構築します。手順はおなじみの公式ドキュメント(Windows版)を参照してください。おそらくFlutterがなくてもadbやAndroid Studioがセットアップされていれば十分だと思われますが、自分はFlutterの環境構築をしました。

WindowsでのFlutter環境構築が終われば、VSCodeあるいはAndroid StudioからFlutterのコードを書いて、Androidエミュレータで動作確認ができるようになっているはずです。しかし、今回実現したいことは、WSL2からAndroidエミュレータを使うことなので、もう一歩必要です。

実機デバッグとは異なり、WSLではなくWindows側のadbを使います。ビルドまではWSL側のFlutterが担当しますが、アプリを動かすのはWindows側のadbということですね。

1. Windows側のシェルで adb kill-server した後に adb -a -P 5037 nodaemon server (adbをポート番号を指定して起動)
2. Windows側のシェルで adb devices を叩いて、エミュレータが見えることを確認する
3. Windows側のシェルで ipconfig を実行し、WSLからWindowsを接続するためのIPアドレスを調べる。具体的には、 Ethernet adapter vEthernet (WSL): の IPv4 Address. . : 192.168.x.x の部分を確認する
4. WSL側のシェルで adb kill-server した後に socat -d TCP-LISTEN:5037,reuseaddr,fork TCP:<さきほどのIPアドレス>:5037 を実行して、WSLのadbをWindowsのadbへリレーする
5. WSL側のシェルで adb devices を叩いて、エミュレータが見えることを確認する

上手くいかない場合は、適宜、 adb kill-server したり、エミュレータを再起動したりすると良いです。なお、実機でのデバッグも行いたい場合は、ステップ6の後に adb connect する必要があります。つまり、Windows側のadbを経由して実機でWi-Fiデバッグを行うわけです。

まとめ

• WSL2上でFlutterの環境構築を行った
• WSL2からAndroid実機でワイヤレスデバッグを行えるようにした
• WSL2からWindows上のadbを利用して、Androidエミュレータでのデバッグを行えるようにした