【Flutter】3.16がリリースされたので解説してみたよ

概要

どうも、@daiki1003です！

本日、11月16日、とうとうFlutter 3.16、Dart 3.2がリリースされました！

本記事では、Flutter 3.16に焦点を当てて、下記記事の要約をしていこうと思います。

What’s new in Flutter 3.16

Material 3 by default, Impeller preview for Android, DevTools extensions, and much more

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

Framework

Material 3がデフォルトに

デフォルトで、Material 3になります。
オプトアウトはMaterialApp.useMaterial3にfalseを明示的に指定する必要があります。

ですが、Material 2はdeprecatedとなり、いずれ取り除かれます。
なので遅かれ早かれ対応する必要はあるようですね。

この時に、カラーパレットはColorScheme.fromSeedで生成することが推奨されています。

Material 3モーション

EasingやDurationsといったMaterial 3のモーション用クラスが追加されました。
モーションについては以下を参照ください。

Easing and duration – Material Design 3

Material easing and durations create responsive and expressive motion.

TextScalerウィジェット

Androidでは目がみえづらい方のために、非線形のフォントスケーリング機能があります。
これに対応するために、Text.stextScaleFactorプロパティの代わりに、
TextScalerクラスが追加されました。

TextScaler class - painting library - Dart API

API docs for the TextScaler class from the painting library, for the Dart programming language.

SelectionAreaの改善

ネイティブと同様にテキストを選択できるようになり、さらに単語単位で選択範囲を変更できるようになっています！

iOS/macOSにてショートカットメニューのアイコンを自動並び替え

出典：https://medium.com/flutter/whats-new-in-flutter-3-16-dba6cb1015d1

MatrixTransitionウィジェット

MatrixTransition class - widgets library - Dart API

API docs for the MatrixTransition class from the widgets library, for the Dart programming language.

アニメーションの値が変更されるたびに、onTransformコールバックが呼ばれ、現在の値が取得できます。
この値を利用したアニメーションを実現できるようになりました！

flutter_testにPaintPatternが追加

画面に正しい色で正しい矩形が描画されているか、確認する際に今までだとgolden_testを使う必要がありました。
PaintPatternAPIを使うことで、ユニットテストと同じ書き味でexpectを記述することが
可能になります。

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
// Multiple paint calls can even be chained together.
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
);

Scrollingの改善

KeepAlive class - widgets library - Dart API

API docs for the KeepAlive class from the widgets library, for the Dart programming language.

デフォルトでKeepAliveのサポートを受けることができます。
また、two_dimensional_scrollablesパッケージもリリースされました。

two_dimensional_scrollables | Flutter package

Widgets that scroll using the two dimensional scrolling foundation.

TableViewのような二次元スクロールをサポートするパッケージであり、Flutterチームによって
メンテナンスされます。

Impeller

Android

stableチャンネルにて、AndroidでのImpellerがプレビュー可能となりました！
Vulkanのサポートなしには動かないので、テストの際にはVulkanが対応しているか
確認の上で行ってください。
利用する際は、flutter runに--enable-impellerフラグを渡すかAndroidManifest.xmlを変更するだけです。

パワーアップ

Impeller上での文字列の表示でメチャクチャ改善がなされたようです！
これは楽しみですね！
変化が大きすぎて、ユーザーはアプリを触ってて気付くと思うよ、とまで書かれています。
iOSではそこまでの改善はされていないようです。

Performance Overlayが表示可能に

3.10のリリース時に、Impellerで表示されなくなってしまった
Performance Overlayが表示されるようになったようです。

ディザリングがデフォルトで有効化

ディザリングがデフォルトで有効化され、綺麗に表示されるようになりました。

ゲーム

最近は、ゲームを推してますね。
近い将来、3Dも対応するとのことで個人的にすごく楽しみです！

x.com

そして、個人的にはこのページにカタンっぽいのもあって気になるｗ

Casual Game Kitのアップデート

メジャーアップデートが施されたとのこと。

Web

Chrome DevToolsにパフォーマンス表示

Android

マウスのスクロールを精細に

Android端末には、マウスを接続することができます。
その際、いっぱい動かさないとスクロール出来なかったものがより精細になったそうです。

Predictive back navigation

Android14から搭載されたPredictive back navigationが使えるようになりました！

iOS

App Extension

いくつかのApp Extensionが使えるようになりました！

テキストのシェア

テキストを選択した際に、tooltipでShareが表示され、シェアシートが表示されるようになりました！

パッケージ

New Flutter Favorites

新たに7個のパッケージがFlutter Favoritesの仲間入りをしたようです。

Virtual Summit

パッケージ開発者同士の知見共有などを目的としたサミットを行うようです。
Googleに勤めている人を含めた50人以上の人を呼ぶ、とのことですごく楽しみですね！
(パッケージ開発しないと)

Google Mapsカスタマイズ

Google Play Console内のMap Stylesというページにて、
マップのスタイルをカスタマイズする機能を提供した様です。

出典：https://medium.com/flutter/whats-new-in-flutter-3-16-dba6cb1015d1

なにそれめっちゃ楽しそう…

Flutterで使うには、map IDをセットするだけみたいです。

GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: const CameraPosition(
          target: _kMapCenter,
          zoom: 7.0,
        ),
        key: _key,
        cloudMapId: _mapId
);