Closed14

WSL2 に Flutter 環境を構築してみる

Flutter
asdf
WSL 2
鮗鮗

このスクラップは、WSL2 上で Flutter を使った Android アプリの開発環境を構築する作業ログをまとめたものである。なお、Android アプリのデバッグにはエミュレータではなく直接 Android 端末を使用する。

概要

年末年始の間、Flutter で Android アプリを作りたい。更に欲を言えば、AI Agent Hackathon with Google Cloud に作成したアプリを提出したい。

というわけで、WSL2 上で Flutter を使った Android アプリの開発環境を構築する作業ログをまとめていく。なお、Flutter は初めて触るのであまり凝ったことをするつもりはないが、Python など他の言語を asdf で管理しているので、Flutter もなるべく asdf で管理することを目指すつもりである。

作業環境

  • WSL2 on Windows 11
  • エディタ：VS Code
  • Android 端末：AQUOS sense9
    • （勝手に）ジブリコラボしている、可愛い🥰スマホです

参考記事

鮗鮗

まずは、asdf で flutter をインストールする。
jq が必要だったので、未インストールの場合は事前に jq をインストールしておく必要がある。

asdf plugin add flutter
asdf list all flutter  # インストール可能なバージョンをチェック
asdf install flutter 3.27.1-stable  # 作業時点における、安定板のうち最も新しいバージョン
asdf local flutter 3.27.1-stable

インストール後は、flutter --versionで確認。
何故か初回だけかなり時間がかかった。

鮗鮗

以下のコマンドを実行し、プロジェクトを作成。

flutter create .

作業ディレクトリに - があると怒られた。_ を代わりに使えとのこと

鮗鮗

VS Code を開き、Flutter の拡張機能を追加。
VS Code の設定画面から Dart: Flutter Sdk Paths を検索し~/.asdf/installs/flutter を追加した。

鮗鮗

必要なパッケージがインストールされていないらしい。

flutter doctor

を実行すると、足りないパッケージを教えてくれるらしいので実行。
Linux toolchain が ✓ になるまでひたすらパッケージをインストールしていく。

鮗鮗

以下のコマンドでサンプルコードを実行。上手く動いてくれた。

flutter run
鮗鮗

Android のアプリを開発したいので、Android studio を使えるようにしたい
→ Android 端末を使ったテストができるらしいので、その設定を行う。便利杉内

鮗鮗

android sdk をインストールしていく。

まず、このページ の SDK パッケージをダウンロードする。プラットフォームは Linux のものを選択する。

ダウンロードしたら、unzip コマンドで解凍。
すると、cmdline-tools/ という名前のディレクトリが生成されるので、この cmdline-tools/ を~/Android/SDK/cmdline-tools/ 配下に latest という名前で移動する。
最後に、.bashrc に以下の行を追加する。

export ANDROID_HOME=$HOME/Android/SDK  # ここは適当なディレクトリの場所を指定
export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
鮗鮗

Java が必要らしいので asdf でインストール

asdf plugin-add java https://github.com/halcyon/asdf-java.git
asdf install java adoptopenjdk-17.0.13+11
asdf local java adoptopenjdk-17.0.13+11

また、.bashrc に以下の行を追記しておくと JAVA_HOME を勝手に切り替えてくれて便利。

. "$HOME/.asdf/plugins/java/set-java-home.bash"
鮗鮗

sdkmanager が実行できるようになったので、色々インストールしていく。

sdkmanager --install "platform-tools"
sdkmanager --install "system-images;android-35;google_apis;x86_64" "platforms;android-35" "build-tools;35.0.0"

なお、2 つ目のコマンドでインストールするバージョンは、sdkmanager --listで表示された最新のものを指定した。

インストールが完了したら、sdkmanager --licenses コマンドを実行し、ライセンスに同意しておく。

最後に flutter doctor コマンドを実行し、Android toolchain が使用可能になっているかどうかを確認する。今回は特に問題なく ✓ になっていることが確認できた。

【追記】
platform-tools のパスを通さないと、次で使う adb コマンドが使用できない。.bashrc に以下の行を追加し、platform-tools をパスに追加する。

export PATH=$PATH:$ANDROID_HOME/platform-tools
鮗鮗

Android 端末で Flutter のプロジェクトをテスト出来るように、WSL と Android のペア設定を行う。

まず、Android 側で以下の操作を行う。

  1. 設定>デバイス情報 にある ビルド番号 を 連続でタップし、開発者向けオプションモードを有効にする
  2. 設定>システム>開発者向けオプションにある ワイヤレス デバッグ を有効化
  3. ワイヤレス デバッグ>ペア設定コードによるデバイスのペア設定 をタップする。

すると、Wi-Fi ペア設定コード、IP アドレス、ポート番号 が表示されるので、WSL 側で以下のコマンドを実行する。

adb pair {IPアドレス}:{ポート番号}

Enter paring code: と表示されたら、Wi-Fi ペア設定コード を入力する。
Android 側の ワイヤレス デバッグ>ペア設定済みのデバイス に PC の情報が表示されていれば、ペア設定は完了。

鮗鮗

WSL と Android を接続する。

Android 側の ワイヤレス デバッグ>IP アドレスとポート に記載の IP アドレスとポート番号を確認し、WSL で以下のコマンドを実行する。

adb connect {IPアドレス}:{ポート番号}

flutter devices コマンドを実行し、Android 端末の情報が表示されれば WSL と Android の接続に成功している。

鮗鮗

サンプルコードを Android 端末でデバッグしてみる。

VS Code で lib/main.dart を開く。
コマンドパレットを開き、Flutter: Select Device で接続時に追加された Android 端末を選択。
再度コマンドパレットを開き、次は Debug: Start Debugging を実行する。
しばらく待機。

以下の画面が Android 端末に表示されたら成功！
(画面中央の数字は最初 0 or 1。+ ボタンを押すと数字が増える)

鮗鮗

後は 2 つ目以降のプロジェクトを作成する際の操作をまとめていきたい。
多分、プロジェクトの作成、.tool-version の作成、Android 端末との接続をすればいいんだろうなと予想している。

このスクラップは4ヶ月前にクローズされました