Flutter on WSL2

目標

• Flutter 開発環境をWSL2上に作成する．
• Android Studioは入れない．
• エミュレートは
  • Linux
  • WSA（稀に成功する）
  • Chrome
  • 実機 (Android11以降)
• エディタはVSCodeを使用する．

前提

• Windows11 (22H2)
• WSL2
• Ubuntu 22.04.1

手順（コマンドは一つずつに分けて記載）

Flutter

1. インストール済みパッケージのアップデート
   Ubuntu

   sudo apt update
   

   Ubuntu

   sudo apt upgrade
   

2. 公式からダウンロードリンクを取得し，ダウンロード (リンクは取得したものに変更する)
   Ubuntu

   wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.9-stable.tar.xz
   

3. 解凍
   Ubuntu

    tar xf flutter_linux_3.3.9-stable.tar.xz
   

4. ~/.bashrcに以下を追記
   ~/.bashrc

   export FLUTTER_ROOT=$HOME/flutter
   export PATH=$PATH:$FLUTTER_ROOT/bin
   

5. .bashrcを反映
   Ubuntu

   source .bashrc
   

6. 確認
   Ubuntu

   flutter --version
   

7. 解凍前のtar.xzファイルを削除 (ファイル名は適宜変更する)
   Ubuntu

   rm -rf flutter_linux_3.3.9-stable.tar.xz
   

Java SDK

1. インストール
   Ubuntu

   sudo apt install default-jdk -y
   

2. ~/.bashrcに以下を追記
   ~/.bashrc

   export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64  
   export PATH=$PATH:$JAVA_HOME/bin
   

3. .bashrcを反映
   Ubuntu

   source .bashrc
   

Linux toolchain

1. 必要なものを確認
   Ubuntu

   flutter doctor    
   

2. 上記コマンドの結果，Linux toolchainで必要と表示されたものをインストール
   Ubuntu

   sudo apt install clang cmake ninja-build pkg-config
   

3. もう一度確認
   Ubuntu

   flutter doctor    
   

4. 上記コマンドの結果，Linux toolchainで必要と表示されたものをインストール
   Ubuntu

   sudo apt install clang cmake ninja-build pkg-config
   

5. もう一度確認
   Ubuntu

   flutter doctor    
   

   Linux toolchainが✓になればOK

Android SDK

1. 下記サイトから利用規約に同意したうえでダウンロードリンクを取得
   https://developer.android.com/studio#downloads:~:text=d0192807f7e1cd4a001d13bb1e5904fc287b691211648877258aa44d1fa88275-,Linux,-commandlinetools%2Dlinux%2D9123335_latest

2. ダウンロード（リンクは上で使用したものに置き換える）

   Ubuntu

   wget https://dl.google.com/android/repository/commandlinetools-linux-9123335_latest.zip -O latest.zip
   

3. 解凍

   Ubuntu

   unzip latest.zip
   

   unzip not foundと出たら，sudo apt install unzip実行後にもう一度上記のコマンドで解凍する．

4. 移動

   Ubuntu

   mkdir -p ~/Android/SDK/cmdline-tools
   

   Ubuntu

   mv cmdline-tools ~/Android/SDK/cmdline-tools/latest
   

5. zipファイル削除

   Ubuntu

   rm -rf latest.zip
   

6. ~/.bashrcに以下を追記

   ~/.bashrc

   export ANDROID_HOME=$HOME/Android/SDK
   export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
   

7. .bashrcを反映

   Ubuntu

   source .bashrc
   

8. 確認

   Ubuntu

   sdkmanager --version
   

   参考結果：
   8.0

9. インストールできるイメージの確認

   Ubuntu

   sdkmanager --list
   

10. adbの有効化

    Ubuntu

    sdkmanager --install "platform-tools"
    

11. イメージのインストール

    Ubuntu

    sdkmanager --install "system-images;android-33;google_apis;x86_64" "platforms;android-33" "build-tools;33.0.1"
    

    当時の最新を選んだ．

12. ライセンスに同意

    Ubuntu

    sdkmanager --licenses
    

flutter環境確認

1. 以下コマンドを実行
   Ubuntu

   flutter doctor
   

   参考結果：

   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel stable, 3.3.9, on Ubuntu 22.04.1 LTS
       5.15.74.2-microsoft-standard-WSL2, locale en_US.UTF-8)
   [✓] Android toolchain - develop for Android devices (Android SDK version 33.0.1)
   [✗] Chrome - develop for the web (Cannot find Chrome executable at google-chrome)
       ! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
   [✓] Linux toolchain - develop for Linux desktop
   [!] Android Studio (not installed)
   [✓] Connected device (1 available)
   [✓] HTTP Host Availability
   
   ! Doctor found issues in 2 categories.
   

VSCode

1. 拡張機能「Flutter」を入れる

エミュレータ用意

Linux

• デフォルトで入っているはず．次のコマンドで確認
  Ubuntu

  flutter devices
  

Chrome

1. Chrome拡張機能「Dart Debug Extension」を追加する

WSA (Windows Subsystem for Android)

1. Microsoft StoreからAmazonアプリストアをインストール

Android実機 (Android11以降)

1. 開発者向けオプションを有効化する
   1. 設定アプリ>デバイス情報に入る
   2. 「ビルド番号」を連打する
   3. PINを入力する

テスト

全エミュレータ共通

1. Ubuntuで好きなディレクトリに移動
2. テストアプリの作成
   Ubuntu

   flutter create hello_world
   

3. アプリのディレクトリに移動
   Ubuntu

   cd hello_world
   

4. 以下エミュレータごとに操作が異なる↓

Linux

1. code .コマンドでVSCodeを開く
2. lib/main.dartをアクティブにする
3. Ctrl Shift Pでコマンドパレットを開く
4. Flutter: Select DeviceでLinuxを選択
5. Ctrl Shift Pでコマンドパレットを開く
6. Debug: Start Debuggingを実行

Chrome

1. code .コマンドでVSCodeを開く
2. lib/main.dartをアクティブにする
3. Ctrl Shift Pでコマンドパレットを開く
4. Flutter: Select DeviceでWeb Serverを選択
5. Ctrl Shift Pでコマンドパレットを開く
6. Debug: Start Debuggingを実行
7. Chromeが立ち上がったら読み込みが完了するまで待つ
8. 拡張機能「Dart Debug Extension」のアイコンをクリック

WSA

1. WSAに接続する．<IPアドレス>はWindowsのIPアドレスで置換する．
   Ubuntu

   adb <IPアドレス>:58526
   

2. code .コマンドでVSCodeを開く
3. lib/main.dartをアクティブにする
4. Ctrl Shift Pでコマンドパレットを開く
5. Flutter: Select DeviceでWeb Serverを選択
6. Ctrl Shift Pでコマンドパレットを開く
7. Debug: Start Debuggingを実行
8. 高確率でエラーが出る．対処法は不明
   WSAとWSLの共存が問題か．

Android実機 (Android12以降)

1. 設定アプリ>システムで開発者向けオプションを開く
2. ワイヤレスデバッグをオンにする
   1. 「...許可しますか？」に許可する
3. 接続情報を確認する
   1. ペア設定コードによるデバイスのペア設定をタップする
   2. Wi-Fiペア設定コード，IPアドレス，ポートを確認する（画面は閉じない）
      参考：192.168.11.12:34097（コロン前がIPアドレス，コロン後がポート番号）
4. WSLとペアリングする
   1. IPアドレスとポート番号を指定する．<IPアドレス>と<ポート番号>は上で確認したものに置換する．
      Ubuntu

      adb pair <IPアドレス>:<ポート番号>
      

      例：adb pair 192.168.11.12:34097
   2. Enter paring code:と聞かれるので上で確認したWi-Fiペア設定コードを入力
   3. 接続が完了したらペア設定コードによる...の画面は閉じる
5. WSLと接続する
   1. IPアドレスとポートに記載のIPアドレスとポート番号を確認する
      参考： 192.168.11.12:34097
   2. WSLに接続する
      Ubuntu

      adb connect <IPアドレス>:<ポート番号>
      

      例：adb connect 192.168.11.12:34097
6. 以下コマンドでAndroid端末が現れることを確認
   Ubuntu

   flutter devices
   

7. code .コマンドでVSCodeを開く
8. lib/main.dartをアクティブにする
9. Ctrl Shift Pでコマンドパレットを開く
10. Flutter: Select Deviceで接続したAndroid端末を選択
11. Ctrl Shift Pでコマンドパレットを開く
12. Debug: Start Debuggingを実行
13. ビルド，読み込みが完了するまで待つ
14. 拡張機能「Dart Debug Extension」のアイコンをクリック

コードの更新を反映する

• コードを書き換え，VSCode上部に出ているボタンの，⚡アイコンをクリック
• もしくはコードを書き換えてCtrl S