7月からしばらくお休みをいただいたので、宣言的 UI によるスマートフォンアプリの開発を理解したいと思い、Flutter に入門してみることにしました。
アプリ開発は iOS, Android とも過去に少しだけ入門的なものを少しだけ触ったことがあるだけで、無に等しい状態なので、道のりは長いですが楽しみです。
まずは開発環境のセットアップからメモしてみます。
(2023/7/9追記)
Java のバージョンを当初 defaut-java で入る 11 にしていたのですが、後ほど入れる Windows 側とバージョンを合わせたいため LTS の 17 に変更しました。
方針
作るものは最小限にしたいので、ターゲットは当面 Android のみ、半年ほど前に買ったスマートフォンの Pixel6a 上で動くことをターゲットにします。
手元にある Windows10 + WSL2 (Ubuntu22.04.2) 上で開発環境を作ります。
コードは WSL2 の Linux 上の Vim で Terminal 経由で書き、Windows 上のエミュレーターと実機で確認できるようにします。
標準的な構成ではないので少し遠回りになるのですが、比較的慣れている環境でコードを書いてみたいのと、統合開発環境のメニューなどであまり隠蔽されていない、素の状態で進めた方が本質の理解が進むと思ったからです。
事前準備
Microsoft Store から WSL2 に Ubuntu 22.04 を入れます。
OS 入れた後はあらかじめ用意している dotfiles で適度に実施、Windows Terminal から Java と Vim が一旦使える状態にします。
Java は以下で openjdk-17 を入れておきます。
$ sudo apt update && sudo apt install openjdk-17-jdk -y ... $ java --version openjdk 17.0.7 2023-04-18 OpenJDK Runtime Environment (build 17.0.7+7-Ubuntu-0ubuntu122.04.2) OpenJDK 64-Bit Server VM (build 17.0.7+7-Ubuntu-0ubuntu122.04.2, mixed mode, sharing)
ベースの準備が整ったら Terminal から一旦抜けて cmd でコマンドプロンプトを開いて、念のため作った環境のバックアップを取っておきます。
> wsl -l -v NAME STATE VERSION * Ubuntu-20.04 Stopped 2 Ubuntu-22.04 Running 2 > wsl -t Ubuntu-22.04 > wsl -l -v NAME STATE VERSION * Ubuntu-20.04 Stopped 2 Ubuntu-22.04 Stopped 2 > wsl --export Ubuntu-22.04 C:\tmp\Ubuntu-22.04.tar
手元の環境だとファイルサイズは 5GB 程度になりました。
WSL2 上のセットアップ
基本的には以下の公式の手順に従って進める形になります。
Flutter SDK のインストール
あまり覚えるものを増やしたくないので snap を使ったインストールは行わず ${HOME}/dev 配下にマニュアルで入れます。
Android Studio のインストール
Android Studio は全部は使わないので、コマンドラインツールだけを入れます。
ここの下の方にある「Command line tools only」の Linux のリンクをクリックして、規約に同意した上で URL を入手して、Linux 上から curl でダウンロードします。
インストール先など含めてこんな感じです。ここでは platform-tools だけ入れておきます。
$ mkdir -p ~/Android/SDK/cmdline-tools $ curl https://dl.google.com/android/repository/commandlinetools-linux-xxxxxxxx_latest.zip -o latest.zip $ unzip latest.zip $ mv cmdline-tools ~/Android/SDK/cmdline-tools/latest $ rm -rf latest.zip $ export ANDROID_HOME=$HOME/Android/SDK $ export PATH=$PATH:$ANDROID_HOME/cmdline-tools/latest/bin $ sdkmanager --list [=======================================] 100% Computing updates... $ sdkmanager --update [=== ] 10% Computing updates... Updating: ... $ sdkmanager --install "platform-tools" ...
入れた後の flutter doctor では Android SDK を flutter からは認識しなかったので、公式の手順にある以下を実行すると認識してもらえました。
$ flutter config --android-studio-dir=$HOME/Android/SDK
インストール後の確認
最終的にはこんな感じになりました。
$ flutter doctor -v
[✓] Flutter (Channel stable, 3.10.5, on Ubuntu 22.04.2 LTS 5.15.90.1-microsoft-standard-WSL2, locale C.UTF-8)
• Flutter version 3.10.5 on channel stable at /home/msfukui/dev/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 796c8ef792 (3 weeks ago), 2023-06-13 15:51:02 -0700
• Engine revision 45f6e00911
• Dart version 3.0.5
• DevTools version 2.23.1
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Android SDK at /home/msfukui/Android/SDK
• Platform android-33, build-tools 30.0.3
• ANDROID_HOME = /home/msfukui/Android/SDK
• Java binary at: /usr/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.19+7-post-Ubuntu-0ubuntu122.04.1)
• 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
✗ clang++ is required for Linux development.
It is likely available from your distribution (e.g.: apt install clang), or can be downloaded from https://releases.llvm.org/
✗ CMake is required for Linux development.
It is likely available from your distribution (e.g.: apt install cmake), or can be downloaded from
https://cmake.org/download/
✗ ninja is required for Linux development.
It is likely available from your distribution (e.g.: apt install ninja-build), or can be downloaded from
https://github.com/ninja-build/ninja/releases
• pkg-config version 0.29.2
✗ GTK 3.0 development libraries are required for Linux development.
They are likely available from your distribution (e.g.: apt install libgtk-3-dev)
[!] 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.2 LTS 5.15.90.1-microsoft-standard-WSL2
[✓] Network resources
• All expected network resources are available.
! Doctor found issues in 3 categories.
実機を使った動作確認
ここまでで一旦、サンプルのプロジェクトを作成して、実機にワイヤレスで接続して動作確認を行ってみます。
実機への接続準備
以下の Android Studio のマニュアルをもとに実機の「開発者オプション」を有効にします。
一度有効にすると二度目は実施しなくてもよいみたいです。
続いて以下のページをもとにワイヤレスで接続するのですが、ここちょっとわかりにくいです。。
こんな流れになります。
「システム」の「開発者向けオプション」を選択して「ワイヤレスデバッグ」をタップして有効にします。
「ペア設定コードによるデバイスのペア設定」をタップして IP, ポート番号, ペア設定コードを表示します。
Terminal 側で adb でペアリングを実施します。
$ adb pair 192.168.10.114:36059 Enter pairing code: ****** Successfully paired to 192.168.10.114:36059 [guid=adb-2B031JEGR13357-xR5Wml]
- 実機に表示されている IP, ポート番号（これは先ほど入力したポート番号とは別のポートです）で adb connect します。
$ adb connect 192.168.10.114:39067 connected to 192.168.10.114:39067
- 接続出来たら flutter から認識できているか確認します。実機の情報が表示されたらOKです。
$ flutter devices 2 connected devices: Pixel 6a (mobile) • 192.168.10.114:39067 • android-arm64 • Android 13 (API 33) Linux (desktop) • linux • linux-x64 • Ubuntu 22.04.2 LTS 5.15.90.1-microsoft-standard-WSL2
サンプルのプロジェクト作成と実行
次に、適当なディレクトリで flutter create でプロジェクトを作成します。ここでは myapp プロジェクトを作っています。
$ flutter create myapp Creating project myapp... Resolving dependencies in myapp... (1.3s) Got dependencies in myapp. 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 myapp $ flutter run Your application code is in myapp/lib/main.dart.
移動してとりあえずアプリを実機で実行してみます。 フォアグラウンドで動作するのでプロンプトが戻ってこなくなる点には注意です。 （実行後に 'd' で動作させたままデタッチできますが。。）
$ cd myapp $ flutter run -d 1 Launching lib/main.dart on Pixel 6a in debug mode... Running Gradle task 'assembleDebug'... 50.0s ✓ Built build/app/outputs/flutter-apk/app-debug.apk. Installing build/app/outputs/flutter-apk/app-debug.apk... 24.1s Syncing files to device Pixel 6a... 81ms Flutter run key commands. r Hot reload. 🔥🔥🔥 R Hot restart. h List all available interactive commands. d Detach (terminate "flutter run" but leave application running). c Clear the screen q Quit (terminate the application on the device). A Dart VM Service on Pixel 6a is available at: http://127.0.0.1:44739/********=/ The Flutter DevTools debugger and profiler on Pixel 6a is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:44739/********=/
実機にデモアプリが表示されたらOKです。
'+' ボタンを押すと真ん中中央の数字がカウントアップされるデモアプリになっています。
動いてよかった。。
切断する際は、 'q' で終えるか 'd' でデタッチした上で、 adb disconnect します。
$ adb disconnect disconnected everything
実機の「ワイヤレスデバッグの使用」をオフにするのも忘れずに実施しておきます。
次回は Windows のセットアップとエミュレーターとの接続、 Vim の設定回りについて書きたいと思います。
参考情報
セットアップにあたって参照した記事になります。とても参考になりました。ありがとうございます。
