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

Dart

概要

どうも、@daiki1003です!

本日、11月16日、とうとうFlutter 3.16Dart 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.useMaterial3falseを明示的に指定する必要があります。

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

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

Material 3モーション

EasingDurationsといった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も対応するとのことで個人的にすごく楽しみです!

https://x.com/ashdik1003/status/1725039536319926382?s=20

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

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
);

Camera X

Flutter 3.10.xで事前サポートを追加したCamera X
本リリースで、いろんなアプリで使うであろうカメラの機能のほとんどが追加されました。

camera_android_camerax | Flutter Package
Android implementation of the camera plugin using the CameraX library.

macOSのビデオプレイヤー

video_player | Flutter Package
Flutter plugin for displaying inline video with other Flutter widgets on Android, iOS, and web.

こちらのプラグインが、macOSに対応したそうです。

DevTools

DevTools Extension

devtools_extensions | Flutter Package
A package for building and supporting extensions for Dart DevTools.

パッケージや開発中のプロダクトに紐づいたDevToolsを独自で作成出来るようです!
これはかなりワクワクする発表ですね!

既に、Provider, Drift, Patrolなどのパッケージでは利用されているようです。

確かに、DBパッケージにおける中身の確認とかめちゃくちゃ重宝しそうです。

Homeタブ

開発中のアプリのサマリを表示する画面が追加されました。

その他

以下のような改善がされています。

・全体的なパフォーマンス
・ホットリスタートの堅牢性
・テキスト選択やコピーの挙動
・ネットワークプロファイラのビューア

VSCode

VSCodeFlutterプラグインも改善されています!


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

サイドバーから以下に簡単にアクセスできます。

・DevToolsを開く
・現在のデバッグセッション
・利用可能なデバイス
・新規プロジェクトの作成
・ホットリロード&リスタート
flutter doctor -vの実行
・その他色々

Deprecated

Deprecated API removed after v3.13
After reaching end of life, the following deprecated APIs were removed from Flutter.

一般的なAPIは含まれていない印象なので、困る人はそこまで多くないのではないでしょうか。

誰かのお役に立てば。

Twitterフォローお願いします

「次回以降も記事を読んでみたい!」
「この辺分からなかったから質問したい!」

そんな時は、是非Twitter (@daiki1003)Instagram (@ashdik_flutter)のフォローお願いします♪

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

Twitterコミュニティ「Flutter lovers」を開設しました!
参加お待ちしております😁

☕️ Buy me a coffee

また、記事がとても役に立ったと思う人は
コーヒーを奢っていただけると非常に嬉しいです!
@daiki1003

コメント

タイトルとURLをコピーしました