What’s new in Flutter 3.16 [日本語訳]

Flutter標準

訳者 はじめに

Kevin Chisholmさんによる「What’s new in Flutter 3.16」(原文)の日本語訳です。気がつけば3回目。勝手に訳して、後から許可を取ります(笑)
RemiさんのRiverpodがついに「Flutter Favorites」に選ばれました！バージョン1になる前から使っていて、Udemyで講座まで出したので、非常に嬉しいです！

はじめに

四半期ごとのFlutter安定版リリース、今回はFlutter 3.16へようこそ。このリリースでは、Material 3が新しいデフォルトテーマとして設定され、ImpellerのプレビューがAndroidに提供され、DevTools用の拡張機能の追加などが可能になりました！また、Flutter Casual Games Toolkitの大幅なアップデートも行われました！

前回のリリースからわずか3ヶ月で、145人のコミュニティメンバーから928のプルリクエストがマージされ、40人のコミュニティメンバーがFlutterへの最初のコミットを行いました！

Flutterコミュニティがこの最新リリースに貢献した新しい追加や改善について、読み進めてください！

Framework

Material 3が新しいデフォルト
2023年5月の3.10リリース以降、Materialライブラリは最新のMaterial Design仕様に更新されました。新しいコンポーネントやコンポーネントテーマ、更新されたコンポーネントのビジュアルなどが含まれます。3.16リリース前は、useMaterial3テーマフラグを使って「オプトイン」でしたが、このリリースからはデフォルトでuseMaterial3がtrueになります。(#130764)

MaterialライブラリのM3バージョンをオプトアウトするには、MaterialAppテーマでuseMaterial3: falseを指定しますが、Material 2は最終的に非推奨となり削除されます。また、単に更新するだけでなく、完全に新しい実装が必要なウィジェットもあります。そのため、Material 3として実行されるとUIが少し変に見えるかもしれません。これを修正するには、NavigationBarのような新しいウィジェットに手動で移行してください。詳細は、GitHubのMaterial 3 umbrella issueをご覧ください。

コンポーネントを試すためのデモアプリケーションがあります。このデモはuseMaterial3の切り替えをサポートしており、変更点を比較できます。

Material 3コンポーネントの外観は、主に[ThemeData.colorScheme]と[ThemeData.textTheme]の値によって決まります。Material 3カラースキームを作成する推奨される方法はColorScheme.fromSeed()を使用することで、これにより視覚的にもアクセシビリティのコントラスト要件にも準拠したダークおよびライトスキームが作成されます。ColorScheme.fromImageProviderを使用して画像の支配色からカラースキームを作成することもできます。Material 3コンポーネントの外観をさらにカスタマイズするには、ThemeData.segmentedButtonThemeやThemeData.snackBarThemeなどのコンポーネントテーマをThemeDataに追加します。非nullのコンポーネントテーマプロパティは、コンポーネントのAPIドキュメントで指定されたデフォルトを上書きします。

Material 3モーションのサポート
Material 3モーションの改善には、EasingとDurationsクラスの追加が含まれます。Material 2のカーブは「legacy」という単語を含むように名前が変更され、最終的に非推奨となり削除されます。(#129942)

編集メニューに追加オプションを追加
ネイティブiOSでは、ユーザーがテキストを選択して共有メニューを開始できるようになりました。このリリースでは、ルックアップ、検索、共有オプションが追加されました。

グローバルテキストスケールファクターを指定するTextScaler
視覚障害者を支援するためのAndroid 14の非線形フォントスケーリング機能をサポートするために、新しいTextScalerクラスがText.textScaleFactorプロパティに取って代わりました。(#128522)

SelectionAreaの更新
FlutterのSelectionAreaは、マウスを使用してシングルまたはダブルクリック、またはタッチデバイスで長押しする際のネイティブジェスチャをサポートするように更新されました。これらの新しいジェスチャは、SelectionAreaおよびSelectableRegionでデフォルトで利用可能です。

  • シングルクリック：クリックした位置に折りたたまれた選択を設定します。
  • ダブルクリック：クリックした位置の単語を選択します。
  • ダブルクリック+ドラッグ：単語ブロックで選択を拡張します。
  • 長押し+ドラッグ：単語ブロックで選択を拡張します。

フォーカスされたウィジェットに操作するメニューアイテム
このリリースでは、メニューアイテムを使用する際のフォーカス変更のクリーンアップが特徴です。FocusManagerのapplyFocusChangesIfNeeded関数は現在、メニューフォーカスを復元します。つまり、ユーザーがメニューアイテムをクリックすると、フォーカスはメニューが開かれる前にフォーカスされていたアイテムにすでに戻っています。(#130536)

iOS、macOSのメニューアイテムショートカットの自動並べ替え
Macプラットフォーム上のFlutterアプリでは、メニューのショートカット修飾子がApple Human Interface Guidelinesに従って並べ替えられるようになりました。(#129309)

Before

After

MatrixTransitionアニメーション
新しいMatrixTransitionウィジェットは、アニメーション遷移を作成する際に変換を可能にします。現在のアニメーション値に基づいて、子ウィジェットに適用される行列変換を提供できます。これにより、以下のGIFのような効果を作成できます。(DartPadでの例)

flutter_testにPaintPatternを追加
flutter_testパッケージでは、新しいPaintPatternクラスを使用して、CustomPaintersやDecorationsなどのウィジェットによってキャンバスに行われたペイントコールを検証できます（ユニットテストで使用）。以前は、正しい色とrectがペイントされたことを確認するためにゴールデンファイルが必要でしたが、現在はPaintPatternを使用できます。次の例では、MyWidgetがキャンバスに円をペイントしたことを検証しています：

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    )
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
);

このAPIは以前、フレームワークのテストファイルの奥深くに存在しており、開発者が非常に便利だと感じたため、自分のプロジェクトにコピーしていたことに気づきました。これに該当する場合は、Flutter 3.16にアップグレードした後、プロジェクトからコピーを削除できます。

スクロールの更新
Flutter 3.13で2次元スクロールの基盤の初期リリース後、このリリースではさらに多くの機能と磨きが加えられました。Flutter 3.16では、2D基盤はKeepAliveウィジェットをサポートし、デフォルトのフォーカストラバーサルと暗黙のスクロールもサポートします。2D基盤上に構築された2Dスクロールウィジェットは、このサポートを自動的に採用します。2D基盤上での構築に関する包括的なガイドについては、Flutter Build Showの最新エピソードをご覧ください。

3.13リリース直後に、two_dimensional_scrollablesパッケージが公開されました。このパッケージはFlutterチームによってメンテナンスされており、フレームワークの基盤上に構築された最初のいくつかの2Dスクロールウィジェットを含んでいます。初期リリース以降、TableViewにはさらに多くの装飾とスタイリングサポートが追加され、バグ修正も行われています。

Engine

Impeller

Android

  • このリリースでは、Android向けのImpellerがプレビューでフィードバックを受け付ける準備が整いました。今年初めから、チームはVulkanバックエンドのImpellerに取り組んでおり、このプレビューにはVulkan対応デバイスでのImpellerの特性に関するフィードバックが含まれます。

上記のチャートは、過去1年間にわたるImpellerのVulkanバックエンドで実行されるFlutter Galleryトランジションパフォーマンスベンチマークの99%タイル、90%タイル、平均フレームラスタライゼーション時間の改善を示しています。ユーザーは、より少ないジャンクと高い安定したフレームレートを観察することになります。この期間の終わりに、Samsung S10デバイスからPixel 7 Proデバイスに切り替えたことで、数値が大幅に低下しました。それでも、トレンドと全体的な結果は非常に励みになります。

Impellerは、Vulkanをサポートしていないデバイスではまだうまく機能するとは期待されていません。今後数ヶ月でImpellerのOpenGLバックエンドを機能完全にする予定であり、将来の安定リリースでそのようなデバイスでのImpellerの特性に関するフィードバックも求める予定です。

  • Flutter開発者は、Vulkan対応のAndroidデバイスでImpellerを試すことができます。flutter runに--enable-impellerフラグを渡すか、プロジェクトのAndroidManiest.xmlファイルの<application>タグの下に以下の設定を追加します。
 <meta-data 
    android:name="io.flutter.embedding.android.EnableImpeller" 
    android:value="true" />

デバイスがVulkanをサポートしているかどうかを判断するために、ImpellerはImpellerリポジトリのドキュメントで議論されているテストを使用します。一般的に、Impellerは64ビットOSでAndroid APIレベル29以上を実行しているデバイスでVulkanバックエンドを使用します。ユーザーは、Vulkanサポートの確認に関するアドバイスに従って、自分のデバイスがVulkanをサポートしているかどうかを判断することもできます。

これまでのところ、ImpellerのVulkanバックエンドの進捗には自信がありますが、プレビュー期間にはいくつかの既知の問題があります：

  • プラットフォーム・ビューがまだ実装されておらず、プラットフォーム・ビューを含むフレームのパフォーマンスがやや悪い。

  • カスタムシェーダーはまだ実装されていません。

  • 既知のバグや不足している機能の全リストについては、GitHubのImpellerプロジェクトボードに最新の情報が掲載されています。多くの問題はすでに3.17ベータ版で修正されていますので、そちらもお試しください。

    ImpellerのVulkanバックエンドについてこれまでの進捗に概ね満足していますが、iOSと比較して、Androidのハードウェアエコシステムははるかに多様であり、安定チャネルでデフォルトのバックエンドにする前に、Androidではより長いプレビュー期間が必要になると予想しています。
    そのため、Impellerに関する最も役立つフィードバックには、問題が発生した特定のデバイスとAndroidバージョンに関する詳細情報が含まれるべきです。
    さらに、ImpellerのVulkanバックエンドは「デバッグ」ビルドでSkiaを使用する場合よりも追加のデバッグ機能を有効にし、これらの機能には追加のランタイムオーバーヘッドがあります。したがって、Impellerのパフォーマンスに関するフィードバックは、プロファイルまたはリリースビルドからのものであり、DevToolsからのタイムラインと同じデバイス上のSkiaバックエンドとの比較を含むべきです。最後に、いつものように、問題を示す小さな再現可能なテストケースを含むフィードバックに非常に感謝しています。

Impellerのパフォーマンス、忠実度、安定性

Vulkanバックエンドに焦点を当てると同時に、年初からチームはAndroidとiOSの両方でテキストパフォーマンスの改善に多くの取り組みを行ってきました。特に、Impellerのグリフアトラスの管理とテキストワークロードがエンジンのUIスレッドとラスタースレッドに分割される方法の改善が行われました。その結果、テキストが多いワークロードでのジャンクが減少します。


このチャートは、iPhone 11でImpellerを使用してテキストが多いベンチマークの99%タイル、90%タイル、平均フレームラスタライゼーション時間のミリ秒単位での減少を示しています。特に、90%タイルと平均フレームラスタライゼーション時間はほぼ半減しています。

チームはまた、AndroidとiOSの両方で忠実度と安定性の改善にも取り組んでおり、特にユーザーから報告されたものです。特に、この安定リリースサイクルの3ヶ月間で、チームはflutter/engineリポジトリに209件のImpeller関連のコミットを行い、217件の問題を解決しました。これには、忠実度、安定性、またはパフォーマンスの問題に関する42件のユーザーレポートが含まれます。

エンジンのパフォーマンス

  • 異種マルチプロセッシングを備えたモバイルデバイスでのパフォーマンスをサポートするために、パフォーマンスに敏感なスレッド（UIスレッドやラスタースレッドなど）がデバイスのより強力なコアに親和性を持つようにエンジンを変更しました。この変更により、さまざまなベンチマークとデバイスで肯定的な影響が観察されました。場合によっては、99%タイルまたは90%タイルのフレーム時間が半分以下になるなど、劇的な改善が見られました。ユーザーは、AndroidでSkiaおよびImpellerバックエンドの両方でこの変更後にジャンクが減少することに気付くでしょう。iOSデバイスでは、より強力なコアとより弱いコアの間の差が小さいため、効果はそれほど顕著ではありません。
  • このチャートは、ほぼすべてのAndroidベンチマークとデバイスで、最悪の場合、99%タイル、90%タイル、平均フレームビルド、およびフレームラスタライゼーション時間の改善を示しています。
    –

APIと忠実度の改善

Impellerパフォーマンスオーバーレイ

以前のリリースでは、Flutterのパフォーマンスオーバーレイ機能はImpellerで表示されませんでした。このリリースでは、その問題を修正しました。Impellerが有効になっている場合、パフォーマンスオーバーレイが正しく表示されます。

ディザリングが正しく表示されるようになりました

このリリースでは、Paint.enableDitheringプロパティがtrueに設定され、Flutterの非推奨ポリシーに従って非推奨とされました。ディザリングはデフォルトで有効になり、開発者が設定可能なディザリングはサポートされなくなりました。これにより、バンディングの問題が解消されます。この変更と移行ガイドの完全な説明については、docs.flutter.devのブレーキングチェンジページをご覧ください。

Before

After

ゲーム

Flutter Games Toolkit

過去数年間で、カジュアルゲーム開発を取り巻くコミュニティが成長してきました。シンプルだが楽しいパズルから複雑なアーケードゲームまで、Flutterを使用して何万ものゲームが公開されています。私たちのお気に入りには、Etermaxの「Trivia Crack」、Lotumの「4 Pics 1 Word」（単語推測ゲーム）、Dong Digitalの「Brick Mania」（アーケードゲーム）、Onrizonの「StopotS」（カテゴリーゲーム）、I/OでFlutterを使って構築したレトロなピンボールゲーム、そしてPUBGモバイル（Flutterをソーシャルおよびメニュー画面で使用）などがあります。

ゲーム開発者がコンセプトからローンチまでより生産的になるために、今日Flutterはカジュアルゲームツールキットの大幅なアップデートを発表します。これは、カードゲームやエンドレスランナーゲームなどのジャンル固有のテンプレート、およびPlay Games Services、アプリ内購入、広告、実績、クラッシュリティクス、マルチプレイヤーサポートなどのサービス統合を含む、新しいリソースのコレクションです。詳細については、Zoey Fanによるゲームツールキットのローンチポストをご覧ください。

Web

FlutterのタイムラインイベントがChrome DevToolsで表示

Flutterのタイムラインイベントが、Chrome DevToolsのパフォーマンスパネルで表示されるようになりました。(#130132)
詳しくは、ウェブ・アプリケーションのパフォーマンス・デバッグをご覧ください。

Android

マウススクロールホイールサポート

Androidの大画面ガイドラインに合わせてWonderousを最適化する過程で、タブレットや折りたたみ式デバイスでマウスのスクロールホイールがうまく機能しないことが判明しました。これまで、画面が反応するためにはスクロールホイールをかなり動かす必要がありました。

このリリースでは、FlutterビューでのマウスによるスクロールがAndroidデバイス上のスクロール速度と一致するようになりました。(#44724)
Before

After

予測的バックナビゲーション

Android 14リリースには、デバイスのバックジェスチャーを使用して現在の画面の背後にあるホーム画面を「のぞき見」することができる予測的バックジェスチャー機能が含まれていました。このアップデートでは、Flutterに予測的バックジェスチャーが導入されました。マイグレーション・ガイドをご覧ください。

iOSでのアプリ拡張機能

Flutterは、iOSアプリの一部の拡張機能をターゲットにすることができるようになりました。これにより、Flutterウィジェットを使用して特定のタイプのiOSアプリ拡張機能のUIを描画できます。これは、APIの制限（例えば、ホーム画面ウィジェット）やメモリの制約があるため、すべてのタイプのアプリ拡張機能には適用されません。

詳細と共有拡張機能のターゲット設定の例については、docs.flutter.devの「Adding iOS app extensions」をご覧ください。

iOS

アプリ拡張機能

Flutterは、iOSアプリの拡張機能の一部をターゲットにすることができるようになりました。これにより、Flutterウィジェットを使用して特定のタイプのiOSアプリ拡張機能のUIを描画できます。これは、APIの制限（例えば、ホーム画面ウィジェット）やメモリの制約があるため、すべてのタイプのアプリ拡張機能には適用されません。

詳細と共有拡張機能のターゲット設定の例については、docs.flutter.devの「Adding iOS app extensions」をご覧ください。

パッケージエコシステム

新しいFlutterのお気に入り

Flutter Favoriteプログラムが再始動しました！今回のサイクルでは、Flutterエコシステム委員会が、flame、flutter_animate、flutter_rust_bridge、riverpod、video_player、macos_ui、fpdartのパッケージを新たなFlutterのお気に入りとして指定しました。おめでとうございます！

今後も新しいFlutterのお気に入りをご紹介します。パッケージやプラグインを将来のFlutterのお気に入りとして推薦したい場合、または委員会にその他の問題を報告したい場合は、flutter-committee@googlegroups.comまでメールを送ってください。

パッケージエコシステムの初のバーチャルサミット

8月に、パッケージエコシステムの初のバーチャルサミットを開催しました。このサミットには、pub.devへの貢献者である50人以上の非Google社員とGoogle社員が参加しました。目的は、アンカンファレンス形式の議論を通じて、コミュニティの間で計画、教育、学習、共有を行うことでした。イベント後のアンケートでは、満足度は100%でした。今後もコミュニティと協力して、パッケージエコシステムのための同様のイベント（対面およびバーチャル）を計画しています。詳細は、近日公開されるパッケージエコシステムアップデートのブログ記事でご確認ください。

クラウドベースのGoogleマップスタイリング

Googleマッププラットフォームでは、Google Cloudコンソールのマップスタイルページからマップのスタイルをカスタマイズすることができます。これにより、アプリコードを都度更新することなく、カスタマイズされた体験を提供できます。


Flutterでこの機能を使用するには、コンソールで設定したマップIDを使用してマップを参照するだけです。

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

Camera Xの改善

3.10の安定版リリースで、FlutterのカメラプラグインにCamera Xの初期サポートを追加しました。Camera Xは、Androidアプリに豊富なカメラ機能を簡単に追加するためのJetpackライブラリです。

このリリースでは、カメラを使用するほとんどのアプリに必要な機能のほとんどを追加しました。CameraXは、プラグインのCamera 2実装に存在する多くの問題を解決します。

CameraXプラグインの使用をお勧めします。オプトインするには、pubspec.yamlファイルに次の行を追加してください。

dependencies:
  camera: ^0.10.4
  camera_android_camerax: ^0.5.0

今後のリリースでCameraXをデフォルトの実装にする予定ですので、ぜひフィードバックをお寄せください。

macOSビデオプレーヤー

ビデオプレーヤープラグインにmacOSのサポートを追加し、開発者がウィジェットサーフェス上でビデオを再生できるようにしました。

詳細については、pub.devのビデオプレーヤープラグインをご覧ください。

DevTools

DevTools 拡張機能

新しいDevTools拡張機能フレームワークにより、以下が可能になります：

  • パッケージ作者が、DevTools内で直接利用できるカスタムツールを構築できます。
  • パッケージ作者が、DevToolsの既存のフレームワークやユーティリティを活用して強力なツールを作成できます。
  • DartおよびFlutter開発者が、DevToolsでアプリをデバッグしている際に、自分のユースケースに特化したツールにアクセスできます（アプリの依存関係と、DevTools拡張機能を提供する依存関係によって決まります）。

Provider、Drift、Patrolのパッケージ作者のおかげで、このエコシステムは既に構築され始めており、これらのパッケージのDevTools拡張機能を今日から使用できます！

Provider

Patrol

Drift

DevTools拡張機能についての詳細は、Kenzie DavissonによるDartおよびFlutter DevTools Extensionsの発表をご覧ください。

DevToolsのアップデート

このリリースでのDevToolsのハイライトは以下の通りです：

  • DevTools拡張機能のサポートが追加されました。
  • 接続されたアプリの概要を表示する新しい「ホーム」画面が追加されました。

その他の改善には以下が含まれます：

  • 全体的なパフォーマンス
  • ホットリスタートの堅牢性
  • テキスト選択とコピーの動作
  • ネットワークプロファイラのレスポンスビューアの洗練

DevTools 2.26.1、2.27.0、および2.28.1のリリースノートで詳細を確認できます。

VS Code UIの発見性

FlutterコミュニティメンバーであるDanTupの素晴らしい作業のおかげで、FlutterのVS Code拡張機能には、以下に簡単にアクセスできるFlutterサイドバーが追加されました：

  • Flutter DevTools画面を開く
  • アクティブなデバッグセッションを表示する
  • 利用可能なデバイスを表示する
  • 新しいプロジェクトを作成する
  • ホットリロードとリスタート
  • Flutter Doctor -vを実行する
  • その他多くの機能

廃止予定および破壊的変更

このリリースに含まれる破壊的変更には、v3.13のリリース後に期限切れとなった非推奨のAPIが含まれます。影響を受けるすべてのAPI、追加のコンテキスト、および移行ガイドについては、このリリースの廃止ガイドをご覧ください。これらの多くはFlutter fixによってサポートされており、IDEでのクイック修正が可能です。一括修正は、dart fixコマンドを使用して評価および適用できます。

コミュニティからのテストへの貢献に感謝します。これにより、これらの破壊的変更を特定することができます。Flutterの破壊的変更ポリシーについて詳しくはこちらをご覧ください。

次のリリースでは、flutter_driverパッケージを、既にサポートされているパッケージflutterおよびflutter_testに加えて、廃止ポリシーの対象範囲を拡大する予定です。

結論

このアナウンスの冒頭でコントリビューターの数を挙げたのは意図的です。Flutterは、皆さん―私たちの素晴らしいコミュニティ―の努力なしには、今日のような楽しく生産的なツールキットにはならなかったでしょう。ありがとうございます。

このリリースに含まれるPRの完全なリストについては、リリースノートと変更ログをご覧ください。

Flutter 3.16は、本日より安定チャンネルで利用可能です。Dart 3.2を含むこれらの最新のアップデートを始めるには、flutter upgradeを実行するだけです。