WSL上にFlutterビルド環境を構築する

なお

Flutter(ver3)とは

Flutterは、Googleによって開発されたオープンソースのUIソフトウェア開発キット（SDK）です。Flutterを使用すると、iOS、Android、Web、Windows、macOS、Linuxなど、複数のプラットフォームに対応する美しいネイティブアプリケーションを、単一のコードベースから開発することができます

chatgpt

通常、AndroidであればJava、iOSであればObjective-CといったようにPFごとに特定言語での開発を強制される。そのため開発コストが高いのだが、FlutterはPF間の差異を吸収したフレームワークを提供してくれるため、PFごとの開発を行わなくてよくなるのだ。
人員リソースがあるならまだしも、制限された中であればこういったフレームワークを使うのが良いだろう。
代わりにDartという開発言語を学習する必要はある。

今回の方針

・WSL2 on Ubuntu22.04にFlutterビルド環境を構築する
・vscode( or cursor)でコーディングを行い、vscode上からビルドを呼び出せるようにする。
・一応AndroidStudioを使ったWindows用のビルド環境も用意する。

WindowsにFlutter開発環境を構築

https://zenn.dev/heyhey1028/books/flutter-basics/viewer/getting_started_window

WSL on Ubuntu(22.04)上にFlutter開発環境を構築

flutter sdkのインストール

# 必要になるパッケージをインストール

ibismark@ibismark-win:~$ sudo apt-get update
ibismark@ibismark-win:~$ sudo apt-get install curl xz-utils zip unzip libglu1-mesa-dev -y
ibismark@ibismark-win:~$ sudo apt install clang cmake ninja-build pkg-config libgtk-3-dev -y
ibismark@ibismark-win:~/library$ curl -O https://storage.googleapis.com/flutter_infra_release/releases/stable/lin
ux/flutter_linux_3.19.0-stable.tar.xz
ibismark@ibismark-win:~/library$ tar xf flutter_linux_3.19.0-stable.tar.xz
ibismark@ibismark-win:~/library$ rm flutter_linux_3.19.0-stable.tar.xz
ibismark@ibismark-win:~/library$ vi ~/.profile
・・・
export FLUTTER_HOME="$L_LIBRARY/flutter_3.19.0"
export PATH="$FLUTTER_HOME/bin:$PATH"
・・・
ibismark@ibismark-win:~/library$ which flutter
/home/ibismark/library/flutter_3.19.0/bin/flutter
ibismark@ibismark-win:~/library$
ibismark@ibismark-win:~/library$ flutter precache
ibismark@ibismark-win:~/library$ 

# インストールの過程でホームディレクトリに3点隠しファイルが作成されている模様
ibismark@ibismark-win:~$ ls -al ~/
・・・
drwxr-xr-x  2 ibismark ibismark  4096 Feb 18 02:11 .dart-tool
-rw-r--r--  1 ibismark ibismark    24 Feb 18 02:11 .flutter
drwxr-xr-x  5 ibismark ibismark  4096 Feb 18 02:11 .pub-cache
・・・

[補足]
wslがデフォルト設定の場合、windows側のPATHを引き継ぐのでflutterコマンドがwindows側のものを参照している可能性がある。
以下の手順でwindows側のPATHはwslでは引き継がないようにしておくと良い。

# wslのconfを設定
$ sudo vi /etc/wsl.conf
・・・
# WindowsのPATHを引き継がない設定を追記する
[interop]
appendWindowsPath = false
・・・

# powershellからwslを再起動する
https://kagasu.hatenablog.com/entry/2020/01/02/155532

openjdk(ver17 LTS)のインストール

ibismark@ibismark-win:~$ sudo apt search "^openjdk.*jdk$"
Sorting... Done
Full Text Search... Done
openjdk-11-jdk/jammy-updates,jammy-security,now 11.0.21+9-0ubuntu1~22.04 amd64 [installed,automatic]
  OpenJDK Development Kit (JDK)

openjdk-17-jdk/jammy-updates,jammy-security 17.0.9+9-1~22.04 amd64
  OpenJDK Development Kit (JDK)

openjdk-18-jdk/jammy-updates,jammy-security 18.0.2+9-2~22.04 amd64
  OpenJDK Development Kit (JDK)

openjdk-19-jdk/jammy-updates,jammy-security 19.0.2+7-0ubuntu3~22.04 amd64
  OpenJDK Development Kit (JDK)

openjdk-21-jdk/jammy-updates 21.0.1+12-2~22.04 amd64
  OpenJDK Development Kit (JDK)

openjdk-8-jdk/jammy-updates,jammy-security 8u392-ga-1~22.04 amd64
  OpenJDK Development Kit (JDK)

ibismark@ibismark-win:~$
ibismark@ibismark-win:~$ sudo apt install openjdk-17-jdk -y 
ibismark@ibismark-win:~$ vi ~/.profile
・・・
export JAVA_HOME="/usr/lib/jvm/java-17-openjdk-amd64"
export PATH="$JAVA_HOME/bin:$PATH"
・・・
ibismark@ibismark-win:~$ 
ibismark@ibismark-win:~$ source ~/.profile
ibismark@ibismark-win:~$ java --version
openjdk 17.0.9 2023-10-17
OpenJDK Runtime Environment (build 17.0.9+9-Ubuntu-122.04)
OpenJDK 64-Bit Server VM (build 17.0.9+9-Ubuntu-122.04, mixed mode, sharing)
ibismark@ibismark-win:~$a

[note]
jdk21でも問題無いのだが、Flutter3.19の場合に作成されるプロジェクトでは、使用しているgradleバージョンが7.6になっていてjdk21をサポートしていない[参考]。
そのためjdk21を使いたい場合は後述するflutterのプロジェクトを作成した際には以下ファイルのプロパティを書きかえる必要がある。
> flutter_pj/android/gradle/wrapper/gradle-wrapper.properties
distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.3-all.zip
↓
distributionUrl=https\://services.gradle.org/distributions/gradle-8.5-all.zip

android sdk command-line toolsのインストール

ibismark@ibismark-win:~$ mkdir -p ~/library/android/sdk/cmdline-tools
ibismark@ibismark-win:~$ cd ~/library/android/sdk/cmdline-tools
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ curl -O https://dl.google.com/android/repository/commandlinetools-linux-11076708_latest.zip
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  146M  100  146M    0     0  21.5M      0  0:00:06  0:00:06 --:--:-- 20.9M
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ unzip commandlinetools-linux-11076708_latest.zip
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ rm commandlinetools-linux-11076708_latest.zip
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ mv cmdline-tools latest
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ vi ~/.profile
・・・
export ANDROID_HOME="$L_LIBRARY/android/sdk"
export PATH="$ANDROID_HOME/cmdline-tools/latest/bin:$PATH"
・・・
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ 
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ source ~/.profile

ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ sdkmanager --install "platform-tools"
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ sdkmanager --list
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ sdkmanager --install "platforms;android-34"
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$ sdkmanager --licenses
ibismark@ibismark-win:~/library/android/sdk/cmdline-tools$

Flutter環境が整ったかどうか確認

ibismark@ibismark-win:~$ flutter doctor -v
[✓] Flutter (Channel stable, 3.19.0, on Ubuntu 22.04.3 LTS 5.10.16.3-microsoft-standard-WSL2, locale C.UTF-8)
    • Flutter version 3.19.0 on channel stable at /home/ibismark/library/flutter_3.19.0
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision bae5e49bc2 (4 days ago), 2024-02-13 17:46:18 -0800
    • Engine revision 04817c99c9
    • Dart version 3.3.0
    • DevTools version 2.31.1

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0-rc1)
    • Android SDK at /home/ibismark/library/android/sdk
    • Platform android-34, build-tools 35.0.0-rc1
    • ANDROID_HOME = /home/ibismark/library/android/sdk
    • Java binary at: /usr/lib/jvm/java-21-openjdk-amd64/bin/java
    • Java version OpenJDK Runtime Environment (build 21.0.1+12-Ubuntu-222.04)
    • All Android licenses accepted.

[✗] 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
    • Ubuntu clang version 14.0.0-1ubuntu1.1
    • cmake version 3.22.1
    • ninja version 1.10.1
    • pkg-config version 0.29.2

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/docs/get-started/install/linux#android-setup for detailed instructions).

[✓] Connected device (1 available)
    • Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.3 LTS 5.10.16.3-microsoft-standard-WSL2

[✓] Network resources
    • All expected network resources are available.

! Doctor found issues in 2 categories.

ChromeとAndroid Studio以外にチェックが付いていれば問題無し。
バツになっている場合は何がダメなのか記載されてるはずなので言われた通りに従おう。

Androidでテストアプリの動作確認をする

vscodeに拡張機能Flutterを入れる

テストプロジェクトを作成する

ibismark@ibismark-win:~$ cd ~/workspace/
ibismark@ibismark-win:~/workspace$ flutter create sample_flutter
Creating project sample_flutter...
Resolving dependencies in sample_flutter... (1.1s)
Got dependencies in sample_flutter2.
Wrote 129 files.

All done!
You can find general documentation for Flutter at: https://docs.flutter.dev/
Detailed API documentation is available at: https://api.flutter.dev/
If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev

In order to run your application, type:

  $ cd sample_flutter
  $ flutter run

Your application code is in sample_flutter/lib/main.dart.

ibismark@ibismark-win:~/workspace$
ibismark@ibismark-win:~/workspace$

Androidの開発者向けオプションを有効化する

  1. 「設定」アプリを開く。

  2. 「システム」＞「端末情報」または「設定」＞「端末情報」に進む。

  3. 「ビルド番号」を見つけ、これを7回タップする。

  4. 「開発者向けオプションが有効になりました」というメッセージが表示される。

  5. 「システム」＞「開発者向けオプション」＞ワイヤレスデバッグ ＞ ワイヤレスデバッグをONにして表示されている以下をメモ。

    1. IPアドレスとポート (XXX.XXX.XXX.XXX:XXXX)

  6. 「デバイスとのペア設定」をタップすると以下２点が表示されるのでこの状態のまま次の手順へ。

    1. Wifiペア設定コード (6桁の数値)

    2. IPアドレスとポート (XXX.XXX.XXX.XXX:XXXX)

  7. WSLとデバイスでペアリングを行う

    1. adb pair {手順6でメモした＜IPアドレスとポート＞}

    2. Enter paring code:と聞かれるので、手順6でメモしたWifiペア設定コードを入力する

    3. 接続完了したら手順6のページが閉じる

  8. WSLとデバイスを接続する 

    1. adb connect {手順5でメモした＜IPアドレスとポート＞}

    2. 以下のコマンドを実行して、ペアリングしたデバイスが出てきたら成功。

      1. flutter devices

テスト用のFlutterプロジェクトをビルドしてデバイスへインストール

  1. vscodeでsample_flutter ( on WSL)を開き、lib/main.dartファイルを開く。

  2. コマンドパレットからFlutter: Select Deviceで先程ペアリングしたデバイスを選択する

  3. コマンドパレットからDebug: Start Debuggingを実行する。ビルドが始まり、デバイス上でアプリが起動したら成功


この記事が気に入ったらサポートをしてみませんか？