WSL内にAndroid Studioを入れたほうが楽かもしれない

私はPHPのエンジニアですが、Flutterの開発環境が必要になったので構築手順を共有します。
アプリ開発は専門外なので、エミュレータのインストール方法などがよくわかりませんでした。
そこで、そのあたりはAndroid Studioに担当させて、開発自体はVSCodeでやる方法がいいと思いました。

SDK回りの設定がコマンドライン上ではよくわからない人向けになっていると思います。
また開発をVSCodeで行いたい人も参考にしていただければと思います。

最終目標

今回は、VSCodeでWSL上のUbuntuにアクセスし、emulator上でデモ用のFlutterアプリが動作することが目標です。

開発環境

Windows	Ubuntu	Flutter
11	20.04	3.05

Windowsは11です(ここ重要)
Windows 11はwslgが使用できるため、UbuntuからGUIツールを使用することができます。

WSL設定()

とりあえずpower shellを管理者権限で開き以下のコマンドでwslをアップデートします。
アップデートしないとwslgが使用できない可能性があります。

power shell) wsl --update

power shell) wsl -l -v // これでwsl内のディストリビューションを確認

Ubuntu環境がwslにない場合はインストールしましょう。

power shell) wsl --install -d Ubuntu20.04

Ubuntuが自動的に開くので適当に初期設定してください。

Ubuntu設定

power shellからUbuntuにログインしましょう。
またログイン直後はwindows側のホームディレクトリを指しているので、Ubuntuのホームディレクトリに移動します。

power shell) wsl -d Ubuntu-20.-4
Ubuntu) pwd
/mnt/c/Users/ユーザー名
Ubuntu) cd ~/
Ubuntu) pwd
/home/ユーザー名
Ubuntu) echo 'cd ~' >> ~/.bashrc // これを打つと次回からはUbuntu側のホームディレクトリから始まります

Ubuntu内をアップデートします。

Ubuntu) sudo apt -y update && sudo apt -y upgrade
Ubuntu) sudo apt install unzip // あとで使用します

KVM設定(ここできないとエミュレータで詰みます)

私もよくわかっていないので、何も考えずにやっていきます。
とりあえずこれがないとエミュレータが動かないです。
参考: linuxは下のほうです。

Ubuntu) sudo apt-get install cpu-checker
Ubuntu) egrep -c '(vmx|svm)' /proc/cpuinfo
1以上の数字が出れば問題ないらしいです。
Ubuntu) kvm-ok
KVM acceleration can be used // これが出れば問題ないらしいです。

Ubuntu) sudo apt-get install qemu-kvm libvirt-daemon-system libvirt-clients bridge-utils
Ubuntu) sudo adduser ユーザー名 kvm
Ubuntu) echo 'sudo chown ユーザー名 /dev/etc' >> ~/.bashrc // wslログイン時にkvmの所有権を変更

wslを再起動しておきます。

Ubuntu) exit
power shell) wsl -t Ubuntu-20.04 // シャットダウン
power shell) wsl -d Ubuntu-20.04 // 再ログイン

Flutterインストール

公式サイト
Install Flutter manuallyの青い部分を右クリックでリンクをコピーします。

Ubuntu ~) mkdir development
Ubuntu ~) cd ~/development
Ubuntu development) wget コピーしたリンク
Ubuntu development) tar xf ダウンロードされたファイル
Ubuntu development) rm ダウンロードしたファイル(解凍したほうでないです)

念のためバージョン情報を確認しておきます。

Ubuntu) ~/development/flutter/bin/flutter --version
バージョン情報
Ubuntu) ~/development/flutter/bin/dart --version
バージョン情報

パスを通しておきます。

Ubuntu) sudo ln -s ~/development/flutter/bin/flutter /usr/bin/flutter
Ubuntu) sudo ln -s ~/development/flutter/bin/dart /usr/bin/dart

いろいろ×マークが出ると思いますが、いったん打っておきます。

Ubuntu) flutter doctor -v

またサンプルプロジェクトも作っておきましょう

Ubuntu ~) flutter create sample

Android Studioの設定

ここからLinux用のAndroid Studioのリンクをコピーします。
ページの真ん中あたり「Android Studio downloads」以下にあるので注意してください。
チェックマークを入れるとクリックできるようになるので、リンクをコピーします。

とりあえず~/development以下にダウンロードします。

Ubuntu) cd ~/development
Ubuntu development) wget コピーしたアドレス

公式ドキュメントのLinux部分を参考に/usr/local以下に解凍します。

Ubuntu) cd /usr/local
Ubuntu /usr/local) sudo tar -zxvf ~/development/ダウンロードファイル
Ubuntu) /usr/local/android-studio/bin/studio.sh // android studioが立ち上がる

Android Studioが立ち上がったら適当に同意していきます。

Android Studioが操作できるようになったら作ったサンプルプロジェクトを開きます。
右上のスマホをドロイドくんマークをクリックするとデバイスマネージャーが開けるので、「Create device」をクリックします。

前の画面でデバイスを選択して、次のページで必要なものをダウンロードします。
この辺りはよくわからないのでAndroid Studioが進めているものを設定しています。
「S」「R」などの横のDownloadをクリックするとNextに行けます。

kvmをやっていない場合などは右側のエラーが出て、最終的に「finish」できないです。

設定が完了すると「再生ボタン」みたいなものをクリックするとエミュレータが立ち上がります。
立ち上がったらAndroid Studioは閉じてください。

VSCodeの設定

拡張機能をいれてきます。

Remote Development (wslにつなげる用)
Flutter
Dart
エミュレータ

エミュレータが入ったらVSCodeの右上にスマホと歯車のマークが出るのでクリック
VSCodeの上のほうが反応するので、クリックしていくとAndroid Studioで作成したデバイス名が出てくるので、クリックするとエミュレータが立ち上がります。

VSCodeのターミナルを開いてアプリを実行

Ubuntu) cd ~/sample // サンプルディレクトリに移動
Ubuntu) flutter run

これで開発をVSCodeで行えるようになりました。

追加:Android Studioの設定

Android Studioで開発した場合は、コマンドで立ち上げた後にSettingsもしくはPluginsから「Flutter」「Dart」を追加する必要があります。

FlutterとDartのPluginが入ったら
上部で「main.dart」が表示されるようになるので、再生ボタンを押せばアプリがエミュレータ上で動作します。
「main.dart」の横にデバイスが表示されない場合はセレクトボックスを何回かリフレッシュすることで出てくると思います。

まとめ

以上で設定は完了です。
VSCodeを使ってエミュレータを動作させてアプリ開発が可能になりました。
コマンドラインでSDK managerを使用してemulatorのインストールをすることは可能ですが、アプリ開発初学者の私にとってはこちらのほうが分かりやすいと思っています。
Android関連で追加のインストールが必要な場合にAndroid Studioを使用しましょう。

参考文献

WSL 2 の Ubuntu 22.04 で Flutter 3 のクリーンな開発環境を作る
 WSL2でFlutter環境をできるだけクリーンに構築する(えみ)
Android studioインストールドキュメント1
Android Studioインストールドキュメント2
Android Emulator のハードウェアアクセラレーションを設定する
 KVM、UbuntuのAndroidStudioエミュレーターを高速化