FlutterKaigi/2024 リポジトリの学習
高田 晴彦経緯
11月21(木)/22(金)に開催される FlutterKaigi 2024 に一般参加する。2年前の登壇者ではあるが、普段の仕事は Android ネイティブ + Kotlin Multiplatform のため、日常的に Flutter に触れていない。予習のため、FlutterKaigi 2024 アプリから2024年の Flutter 開発にキャッチアップする。
去年のアプリはコードリーリング済み。
目標
- アプリをビルドして手元で起動する
- マルチパッケージを理解する
- 去年のアプリからの使用技術の変化を確認する
高田 晴彦Android Studio で開くところまで
こちらを参考にする。
また、このプロジェクトでは Visual Studio Code の設定を共有していることでより開発しやすくなっています。そのため Visual Studio Code を使って開発することをおすすめします。
と書かれているが、Android Studio の方が使い慣れているので、Android Studio で突き進む。
適時、行間を保管する。
fvm, yq のインストール
brew tap leoafarias/fvm
brew install fvm
brew install yq
Flutter SDK の準備
FlutterKaigi/2024 をクローンしたディレクトリで
fvm use --force
を実行する。
Flutter バージョンはこちらで指定されている。
melos から使えるように、グローバルな Flutter バージョンをそれに変更する。
fvm global 3.26.0-0.1.pre@beta
パスを通す
export PATH="$HOME/fvm/default/bin/:$PATH"
melos のインストール
fvm dart pub cache clean
MELOS_VERSION=$(cat pubspec.lock | yq ".packages.melos.version" -r) && \
fvm dart pub global activate melos $MELOS_VERSION --overwrite
melos にパスを通す
export PATH="$HOME/.pub-cache/bin/:$PATH"
ライブラリインストール
melos bootstrap
Android Studio で開く
Flutter Plugin をインストールする。
Flutter SDK のパスを変更する。
高田 晴彦アプリを実行する
公式ドキュメントには、このように書かれている。
Visual Studio Code を使う場合は .vscode/launch.json ファイルで起動設定を共有しているため、次の公式ドキュメントを参考にしてアプリを実行してください。
https://code.visualstudio.com/docs/editor/debugging#_launch-configurations
IntelliJ IDEA や Android Studio を使う場合はまだ起動設定を共有していないため、次の公式ドキュメントを参考にしてアプリを実行してください。
これで実行できた。
apps/app/lib/main.dart で右クリックして Run main.dart を選択。
エラーになるが、ここで .vscode/launch.json ファイルを参考にする
Run/Debug Configrations を Edit する。
Additional run args に --dart-define-from-file=defines/production.env を設定して実行する。
アプリが Android 端末で起動した。
高田 晴彦マルチパッケージを理解する
パッケージ構成はこちらに書いている。
スタッフ一覧画面をターゲットにして、パッケージ構成を確認する
アプリは app_features_about パッケージを使っている。
スタッフ一覧画面は app_features_about パッケージの StaffPage Widget で staffMembersProvider を使っている。
それは common_data パッケージから提供されている。
高田 晴彦去年のアプリからの使用技術の変化を確認する
使用パッケージのライブラリは melos で管理されているので、melos.yaml を確認する。
vector_graphics パッケージ
高田 晴彦去年も使われていたが未学習の技術
多言語対応リソース管理
theme_tailor パッケージ