WSL上にFlutterビルド環境を構築する
Flutter(ver3)とは
通常、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
・・・
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
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の開発者向けオプションを有効化する
「設定」アプリを開く。
「システム」>「端末情報」または「設定」>「端末情報」に進む。
「ビルド番号」を見つけ、これを7回タップする。
「開発者向けオプションが有効になりました」というメッセージが表示される。
「システム」>「開発者向けオプション」>ワイヤレスデバッグ > ワイヤレスデバッグをONにして表示されている以下をメモ。
IPアドレスとポート (XXX.XXX.XXX.XXX:XXXX)
「デバイスとのペア設定」をタップすると以下2点が表示されるのでこの状態のまま次の手順へ。
Wifiペア設定コード (6桁の数値)
IPアドレスとポート (XXX.XXX.XXX.XXX:XXXX)
WSLとデバイスでペアリングを行う
adb pair {手順6でメモした<IPアドレスとポート>}
Enter paring code:と聞かれるので、手順6でメモしたWifiペア設定コードを入力する
接続完了したら手順6のページが閉じる
WSLとデバイスを接続する
adb connect {手順5でメモした<IPアドレスとポート>}
以下のコマンドを実行して、ペアリングしたデバイスが出てきたら成功。
flutter devices
テスト用のFlutterプロジェクトをビルドしてデバイスへインストール
vscodeでsample_flutter ( on WSL)を開き、lib/main.dartファイルを開く。
コマンドパレットからFlutter: Select Deviceで先程ペアリングしたデバイスを選択する
コマンドパレットからDebug: Start Debuggingを実行する。ビルドが始まり、デバイス上でアプリが起動したら成功
この記事が気に入ったらサポートをしてみませんか?