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
    ```
1. [公式](https://docs.flutter.dev/get-started/install/linux#install-flutter-manually)からダウンロードリンクを取得し，ダウンロード (リンクは取得したものに変更する)
    ```:Ubuntu
    wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.3.9-stable.tar.xz
    ```
1.  解凍
    ```:Ubuntu
     tar xf flutter_linux_3.3.9-stable.tar.xz
    ```
1. `~/.bashrc`に以下を追記
    ```:~/.bashrc
    export FLUTTER_ROOT=$HOME/flutter
    export PATH=$PATH:$FLUTTER_ROOT/bin
    ```
1. `.bashrc`を反映
    ```:Ubuntu
    source .bashrc
    ```
1.  確認
    ```:Ubuntu
    flutter --version
    ```
1. 解凍前のtar.xzファイルを削除 (ファイル名は適宜変更する)
    ```:Ubuntu
    rm -rf flutter_linux_3.3.9-stable.tar.xz
    ```

### Java SDK
1. インストール
    ```:Ubuntu
    sudo apt install default-jdk -y
    ```
1. `~/.bashrc`に以下を追記
    ```:~/.bashrc
    export JAVA_HOME=/usr/lib/jvm/java-11-openjdk-amd64  
    export PATH=$PATH:$JAVA_HOME/bin
    ```
1. `.bashrc`を反映
    ```:Ubuntu
    source .bashrc
    ```

### Linux toolchain
1. 必要なものを確認
    ```:Ubuntu
    flutter doctor    
    ```
1. 上記コマンドの結果，Linux toolchainで必要と表示されたものをインストール
    ```:Ubuntu
    sudo apt install clang cmake ninja-build pkg-config
    ```
1. もう一度確認
    ```:Ubuntu
    flutter doctor    
    ```
1. 上記コマンドの結果，Linux toolchainで必要と表示されたものをインストール
    ```:Ubuntu
    sudo apt install clang cmake ninja-build pkg-config
    ```
1. もう一度確認
    ```:Ubuntu
    flutter doctor    
    ```
    Linux toolchainが✓になればOK
### Android SDK
1. 下記サイトから利用規約に同意したうえでダウンロードリンクを取得
https://developer.android.com/studio#downloads:~:text=d0192807f7e1cd4a001d13bb1e5904fc287b691211648877258aa44d1fa88275-,Linux,-commandlinetools%2Dlinux%2D9123335_latest
1. ダウンロード（リンクは上で使用したものに置き換える）
    ```:Ubuntu
    wget https://dl.google.com/android/repository/commandlinetools-linux-9123335_latest.zip -O latest.zip
    ```
1. 解凍
    ```:Ubuntu
    unzip latest.zip
    ```
   `unzip not found`と出たら，`sudo apt install unzip`実行後にもう一度上記のコマンドで解凍する．
1. 移動
    ```:Ubuntu
    mkdir -p ~/Android/SDK/cmdline-tools
    ```
    ```:Ubuntu
    mv cmdline-tools ~/Android/SDK/cmdline-tools/latest
    ```
1. zipファイル削除
    ```:Ubuntu
    rm -rf latest.zip
    ```
1. `~/.bashrc`に以下を追記
    ```:~/.bashrc
    export ANDROID_HOME=$HOME/Android/SDK
    export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin
    ```
1. `.bashrc`を反映
    ```:Ubuntu
    source .bashrc
    ```
1. 確認
    ```:Ubuntu
    sdkmanager --version
    ```
    参考結果：
    8.0

1. インストールできるイメージの確認
    ```:Ubuntu
    sdkmanager --list
    ```
1. adbの有効化
    ```:Ubuntu
    sdkmanager --install "platform-tools"
    ```
1. イメージのインストール
    ```:Ubuntu
    sdkmanager --install "system-images;android-33;google_apis;x86_64" "platforms;android-33" "build-tools;33.0.1"
    ```
    当時の最新を選んだ．
1. ライセンスに同意
    ```: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. `設定アプリ>デバイス情報`に入る
    1. 「ビルド番号」を連打する
    1. PINを入力する

## テスト
### 全エミュレータ共通
1. Ubuntuで好きなディレクトリに移動
1. テストアプリの作成
    ```:Ubuntu
    flutter create hello_world
    ```
1. アプリのディレクトリに移動
    ```:Ubuntu
    cd hello_world
    ``` 
1. 以下エミュレータごとに操作が異なる↓

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

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

### WSA
1. WSAに接続する．`<IPアドレス>`はWindowsのIPアドレスで置換する．
    ```:Ubuntu
    adb <IPアドレス>:58526
    ```
1. `code .`コマンドでVSCodeを開く
1. `lib/main.dart`をアクティブにする
1. `Ctrl Shift P`でコマンドパレットを開く
1. `Flutter: Select Device`でWeb Serverを選択
1. `Ctrl Shift P`でコマンドパレットを開く
1. `Debug: Start Debugging`を実行
1. 高確率でエラーが出る．対処法は不明
    WSAとWSLの共存が問題か．

### Android実機 (Android12以降)
1. `設定アプリ>システム`で開発者向けオプションを開く
1. `ワイヤレスデバッグ`をオンにする
    1. 「...許可しますか？」に許可する
1. 接続情報を確認する
    1. `ペア設定コードによるデバイスのペア設定`をタップする
    1. Wi-Fiペア設定コード，IPアドレス，ポートを確認する（画面は閉じない）
        参考：192.168.11.12:34097（コロン前がIPアドレス，コロン後がポート番号）
1. WSLとペアリングする
    1. IPアドレスとポート番号を指定する．`<IPアドレス>`と`<ポート番号>`は上で確認したものに置換する．
        ```:Ubuntu
        adb pair <IPアドレス>:<ポート番号>
        ```
        例：adb pair 192.168.11.12:34097
    1. `Enter paring code:`と聞かれるので上で確認した`Wi-Fiペア設定コード`を入力
    1. 接続が完了したら`ペア設定コードによる...`の画面は閉じる
1. WSLと接続する
    1. `IPアドレスとポート`に記載のIPアドレスとポート番号を確認する
        参考： 192.168.11.12:34097
    1. WSLに接続する
        ```:Ubuntu
        adb connect <IPアドレス>:<ポート番号>
        ```
        例：adb connect 192.168.11.12:34097
1. 以下コマンドでAndroid端末が現れることを確認
    ```:Ubuntu
    flutter devices
    ```
1. `code .`コマンドでVSCodeを開く
1. `lib/main.dart`をアクティブにする
1. `Ctrl Shift P`でコマンドパレットを開く
1. `Flutter: Select Device`で接続したAndroid端末を選択
1. `Ctrl Shift P`でコマンドパレットを開く
1. `Debug: Start Debugging`を実行
1. ビルド，読み込みが完了するまで待つ
1. 拡張機能「Dart Debug Extension」のアイコンをクリック

### コードの更新を反映する
- コードを書き換え，VSCode上部に出ているボタンの，⚡アイコンをクリック
- もしくはコードを書き換えて`Ctrl S`