はじめに
2024/5/15 に発表された GoogleI/O によって、Flutter や Firebase にも大きなニュースが届きました。
公式の Medium を基に、できるだけ実用例や私見を交えながら、主な変更点をまとめていきます！
flutter create の差分
ネイティブの変更があった（特に Android と Web）ので、flutter create で出力されるファイルの中身も変わりました。
差分見れるようにしてるので、ぜひ参考にしてください。
変更点まとめ
WebAssembly
3.19 においてプレビューだった、Flutter Web の wasm ビルドが、stable になりました。
WebAssembly とは、ブラウザでの JavaScript の速度限界を越えるために作られた、ブラウザで動作する第２の言語です。
およそ２〜3倍の動作改善があるらしく、かなりの速度改善が期待できます。
2024年の公式のロードマップ にも、Wasm 対応を完了させる目標が掲げられていたので、公式にとっても嬉しい報告だったと思います。
残る、SEO問題の解決がされれば、Flutter Web の実用性がかなり上がることが予想されます。
楽しみですね！
WebAssemblyについての参考記事
kboy さんがすでに wasm ビルドを試されているので、実際の動きが気になる方は、ぜひ見に行ってみてください。
Engine
Skia にとって替わるために開発された高速なエンジンである Impleller も、さらに改善が進んだようです。
Blur の高速化
個人的に、従来のエンジンの Skia に比べ、Impeller の Blur は若干安定しない印象がありました（特に BackdropFilter において）。
公式の Medium によると、Blur の一部を Skia と近いアプローチで改修し、およそ50%の削減が確認できたようです。
In particular, the new approach, which is similar to Skia’s, reduces the CPU and GPU time of blurs by nearly half in benchmarks.
同記事に貼られていた PR には、「Blur をかける前に要素をスケールダウン」させる改修を行ったようです。
しかし、同 PR には、Known outstanding problems（既知の残課題）も挙げられています。
- The edges of the blur are clipped. I have notes on how I plan on expanding render space in the PR.
- Animating the sigma causes some "jumping around artifacts" resulting from the downsampling (maybe the discrete nature of texture pixel size?)
- Coverage hints are ignored. I think depth tests will make that not much of an issue.
- We aren't ping ponging textures yet
The snapshot's transform is ignored.
特に1の、Blur の角が切り取られる課題はまだ残っていて、結構パッと見でも気になるレベルなので、今後の改善が待たれます。
SVG、Lottie などの複雑なpath描画の改善
そこまで Lottie を使う経験が多くなかったので、実感したことがなかったですが、複雑な Path の描画の GPU 使用率を上げることで SVG や、Lottie アニメーションの描画を改善したみたいです （確かに、特にデバッグビルドで Lottie アニメーションがカクついてたような…）
その他
MaterialState => WidgetState
単純なリネーム。
前から名前変だなと思っていたので、受け入れられます。
👇 Migration
Dynamic view sizing
TODO
これわかんなかったです。追記します。
Form に validateGranularly の追加
ついに来ました（と思ってるのは僕だけかな）。
前記事にしたやつです。
これで、validate() を実行した時に、エラー発生している FormField の FormFieldState が取得でき、エラー箇所へスクロールするような動きが実現できます。
asset の flavor 対応
flavor の設定によって、asset をビルドに含めない設定ができるようになりました。
画面にモック用に使ってる json や画像を含めないようにできたりするのはいいですね。便利そう。
flutter:
assets:
- assets/common/
- path: assets/free/
flavors:
- free
- path: assets/premium/
flavors:
- premium
asset の load にパッケージをかませる
### Dart パッケージの asset を含めることができる
これ、個人的に一番アツいです。
外部パッケージの画像などは asset として扱えず、たとえば「複数リポジトリで共通で扱う画像」などを、１つの Dart パッケージで管理できるようになりました。
Dart パッケージの可能性が上がったので、pubdev の発展も見込めます。
認識が違ったので、修正です。
asset 経由でファイルを読み込む際、パッケージを指定することで独自の読み込みを“かませる”ことができるようです。
以下は、公式で紹介されている、SVG の読み込みパッケージとして vector_graphics_compilerをかませて、専用の vector_graphics パッケージで表示している例。
flutter:
assets:
- path: assets/logo.svg
transformers:
- package: vector_graphics_compiler
import 'package:vector_graphics/vector_graphics.dart';
const Widget logo = VectorGraphic(
loader: AssetBytesLoader('assets/logo.svg'),
);
flutter_gen
flutter_gen はどう対応するのか、わたし気になります。
早速 Issue も上がってました。
ColorScheme の background が非推奨になった
background の役割は、surface に置き換わりました。
同名の変数へ置き換える、少々面倒な破壊的変更ですが、Material Design の ColorScheme のページと、Flutter の ColorScheme の違いは前から気になっていたので、個人的には嬉しさの方が強い変更です。
議論は以下の Issue にあります。
before
Color myColor1 = Theme.of(context).colorScheme.background;
Color myColor2 = Theme.of(context).colorScheme.onBackground;
Color myColor3 = Theme.of(context).colorScheme.surfaceVariant;
after
Color myColor1 = Theme.of(context).colorScheme.surface;
Color myColor2 = Theme.of(context).colorScheme.onSurface;
Color myColor3 = Theme.of(context).colorScheme.surfaceContainerHighest;
### ColorScheme.fromSeed
ColorScheme.fromSeed のアルゴリズムが変わりました。
さらに、アルゴリズムを分岐できるようなパラメータが追加。。。。
https://docs.flutter.dev/release/breaking-changes/new-color-scheme-roles#migration-guide
されてない！！！
ドキュメントにあるパラメータやクラスが、どこにも存在しない（どころか表記揺れがある）ので、続報が待たれる…
ドキュメントが間違いだったようです
最後に
これだけではない、プラットフォームのパフォーマンス改善やその他変更が色々ありますので、ぜひ一読ください。
色々改善が進んだり、公式 Medium の別ページでは、 Universal Studio が Flutter を選定したり、LG のモニターの OS に Flutter が採用されたり、前向きなニュースも多く発表されました。
Going beyond mobile and the web
- The Canonical team has been working with Flutter since 2021 to enable support for the Flutter ecosystem in Ubuntu. Over the past year the Canonical team has rebuilt the Ubuntu Installer from the ground up with Flutter.
- LG has chosen Flutter to enhance their smart TV operating system, webOS. Flutter’s performance, productivity, and strong ecosystem allow LG to rapidly develop and deploy webOS system apps that run smoothly. By 2025, Flutter will power system apps on tens of millions of LG TVs worldwide.
あと、Dart 3.4（macro とか）も記事に書こうとしてましたが、Flutter だけでもてんこ盛りだったので別記事にします。
宣伝
アンドエーアイは、事業拡大のため、即戦力となるエンジニアを募集中です。
Flutterトップエンジニアが参画するプロジェクトを複数抱えており、Flutterへの深く体系的な知見とコード資産が社内共有されています。
現在 Azure、AWSの経験があるインフラエンジニアも募集しているので、インフラに関する知識があれば優先的に選考いたします。
Flutterは、常に更新され続け、非常に拡張性の高い技術です。
そのため、常に最新技術にキャッチアップし続け、社内での知見向上に貢献できる人材を求めています。
新しい技術を取り入れる積極性、自走力、ポジティブさは大きく評価されるポイントです。
採用ページ
エンジニア採用ページ
公式ドキュメント
Discussion
Transforming assets at build timeはビルド時に特定パッケージを利用して変換ができるって機能で、パッケージが含むassetを使えるではないと思います👀
めっちゃ認識間違えてました！
ありがとうございます！修正します！