【Flutter】3.24がリリースされたので内容について解説してみたよ

概要

さぁ、とうとう来ましたね、 Flutter 3.24 ！

今回もいくつかの変更が入ってるので、ザクっとまとめて解説したいと思います。

それでは行ってみましょー！

Impeller

Flutter SDK に新しい GPU の API がアーリープレビューとして組み込まれました。

僕は GPU 周りは明るくないので、詳しく解説は出来ないのですが、より GPU に近い部分に

直接触ることでパフォーマンス良く 3D などのレンダリングが出来ると言う事かと認識しています。

また、 flutter_scene パッケージを触る事で、とっつきやすくしてくれている様ですね。

VisionOS などとの親和性などが非常に気になります！

ですが、まだプレビュー版で今後頻繁に APIの変更があるため main チャンネルで開発してね、とのことです。

iOS

Swift Package Manager

我々は、勝利しました…！

ようやく、、、ようやく cocoapods から解放され、 Swift Package Manager に移行出来る時がやってきたのです！

CocoaPods が必要なくなると、ほとんどのプロジェクトで Ruby のインストールも必要なくなります。

Flutter のインストールがとても楽になりそうですね。

…とはいえ、まだ安定版ではなさそうです。

やり方などは、こちらのページを参照してください。

Swift Package Manager for app developers | Flutter

Cupertino

上記 SPM もそうですが、iOSに忠実なアプリを提供できるように、 Cupertino 系の Issue 解決やウィジェット追加が行われました。

macOS

platform viewや webview が正式にサポートされ、 Flutter アプリケーションにネイティブの macOSの UIを表示出来るようになりました。

Web

マルチビューや埋め込みモードなどの機能が追加されました。

マルチビューでは、ウェブアプリケーションの起動時にFlutterはすぐに描画されず、代わりに addView メソッドが呼ばれると最初の描画処理が走ります。

詳細は Embedding Flutter web | Flutter

Flutter

Sliverの追加

その名の通り、ピン留めされている状態を提供する PinnedHeaderSliver、

スクロールに合わせてリサイズされる SliverResizingHeaderなどが追加されました。

Cupertinoライブラリ

CupertinoActionSheet の選択肢をタップした状態で上下にスワイプすると Haptic Feedback が行われる様です。

iOS純正もそうなっていたと記憶しています。

どんどんネイティブに近付いていてとても良いですね。

CupertinoButton も追加されています。

TreeView

Flutter 公式から提供されている、 two_dimensional_scrollablesがTreeView ウィジェットが使える様になります。

出典: https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4

表の様な形式の表現幅が、グッと増しましたね！

CarouselView

CarouselView は今回のアップデートで地味に一番注目度が高かったように思えます笑

僕の身近な方々が、しばしば話していた印象です。

今までは PageView や SingleChildScrollView を使って自作していたり、flutter_carousel_widget | Flutter packageなどを使って実現していたかと思います。

カルーセル表現は何かと使うので、ようやく！と言う感じですね笑

Material から Widgetsライブラリへの移行

今まで material.dart にあった、Feedback ウィジェットや、 Checkboxの元となる ToggleablePainter などが widgets.dart に移動しました。

AnimationStatus

AnimationStatusに幾つかの getter が追加され、全ての Animationのサブクラスからアクセス可能となりました。

また、現在のアニメーションの方向を切り替える AnimationController.toggle メソッドが追加されました。

SelectionArea

SelectionArea が、ダブルタップやマウスのトリプルクリックなどのジェスチャを受け付けられる様になりました。

出典: https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4

Impeller

大量の絵文字をスクロールするときのジャンクや、テキスト描画の際の文字の太さやスペーシング、カーニングなどの、パフォーマンスが改善されました。

将来的な iOS における Impeller のオプトアウトの削除を見越して、とても注力しているみたいですね。

また、 Android は今年終わりまでデフォルトレンダラーにはしない様で、それまでに多くのフィードバックをくださいとのことでした。

画像の描画

デフォルトの FilterQuality が low から medium に変更されました。

Flutter GPU

Flutter GPU は Flutter によって描画できるものが拡張され、ネイティブコードの開発なしに(！) シェーダーを使うことで、カスタムレンダラーを作成することができます！

最近、 Xでの Flutter 界隈がグニョグニョしたアニメーションを作ってる人で賑わっているのはこれの影響でしょうか？

SharedPreferences

shared_preferences パッケージに、 SharedPreferencesAsyncや SharedPreferencesWithCacheの二つのAPIが追加されました。

SharedPreferencesAsync によって、プラットフォームに保存されている最新のデータにアクセスすることが出来ます。

SharedPreferencesWithCache はその名の通り、キャッシュであり値に同期的にアクセス出来ます。

将来的にこれらのAPIによって置き換えられるそうですが、少し時間がかかりそうです。

そしてなんと、今回の変更により Android では内部的に利用するのが Shared Preferences ではなく Preferences DataStore になるそうです。

「パパー、なんで shared_preferences って名前なの？」って訊かれて答えられなくなる日もそう遠くはなさそうですね…笑

@Koji Wakamiya より、少し解釈が異なっていそうとのご指摘をいただきました。

ありがとうございました！

DevTools

Rebuild Stats 機能が追加され、特定のフレームで何回ウィジェットがビルドされたかという情報を得ることが出来ます。

出典: https://medium.com/flutter/whats-new-in-flutter-3-24-6c040f87d1e4

また、VSCode のサイドバーからアクセスしやすくなるなど、IDE 上での体験が改善されました。

(サイドバーには元からあった認識なので、どう良くなったかは楽しみですね。)

2.35.0 release notes | Flutter

2.36.0 release notes | Flutter

2.37.2 release notes | Flutter

動画広告

新しいパッケージが追加され、動画広告をサポートしました。

3D表現も強化され、動画広告も表示出来るとなればハイパーカジュアルゲームなんかも作れてしまいそうですね…！

interactive_media_ads | Flutter package

Breaking Changes

Navigator

x.com

x.com

Navigator.onPopPage は Navigator.onDidRemovePage に変更されました。

PopScope

x.com

x.com

まず、PopScope が Generics に対応しました。

自身を含むRouteに対応した Generics を指定出来ます。

そして、PopScope.onPopInvoked は その値を引数に受け取れるonPopInvokedWithResult に変更されました。

ButtonBar → OverflowBar

ボタンを横一列に並べるための ButtonBar が非推奨になり、 OverflowBar になります。

Material に依存しない、と言う文脈の一環の様です。

SurfaceTexture

createSurfaceTextureは createSurfaceProducer に変更し、

- TextureRegistry.SurfaceTextureEntry entry = textureRegistry.createSurfaceTexture();
+ TextureRegistry.SurfaceProducer producer = textureRegistry.createSurfaceProducer();

entry.surfaceTexture() は producer.getSurface() に変更します。

- Surface surface = new Surface(entry.surfaceTexture());
+ Surface surface = producer.getSurface();

最後に

いかがだったでしょうか？

Dart 3.5も後ほど書ければ書いていきたいと思っております。

毎回、 Flutter のアップデートはなんでこんなにワクワクするんでしょうね〜。

引き続き、技術を熱いうちに打っていきたいと思います！

参考記事

Announcing Flutter 3.24 and Dart 3.5

What’s new in Flutter 3.24

Breaking changes | Flutter

Twitterフォローお願いします

Twitterコミュニティ参加お願いします

☕️ Buy me a coffee