Google I/O 2023 - Flutter 3.10 がリリースされました。新機能を見てみましょう

コア部分の元のリンク: https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

この I/O の中心となる基調講演は主に AI ですが、Flutter の新しい安定版はいつものようにリリースされていますが、それは誰もが予想していた 4.0 ではなく 3.10 であり、Flutter のバージョン番号は依然として予想外です。

Flutter 3.10 には主に、Web、モバイル、グラフィックス、セキュリティなどに関連する改善が含まれています。実際のコアは次のとおりです。

  • iOS はデフォルトで Impeller を使用します
  • 新しいマテリアル 3 コントロールが多数登場します
  • iOSの新しいパフォーマンス最適化、Androidの付随的に必要なアップデート
  • iframe を使用せずに Web を他のアプリケーションにネストできる

フレームワーク

資料3

Google はマテリアル 3 のデザイン仕様を非常に懸念しているようです。最新のマテリアル デザイン仕様仕様によると、Flutter は新しいコンポーネントとコンポーネント テーマ、新しい視覚効果を含む関連する変更もフォローアップしています

現時点では、開発者はMaterialApp引き続きuseMaterial3テーマ設定のフラグ ビットを通じてマテリアル 3 を使用するかどうかを選択できますが、次の安定バージョンからは、useMaterial3デフォルトが に調整されますtrue

マテリアル 3 については、https://flutter.github.io/samples/material_3.html の関連デモを通じてプレビューできます。

ColorScheme.fromImageProvider

すべての M3 コンポーネントはテーマのデフォルト カラー を構成しColorSchemeデフォルトの配色では以前のデフォルトの青とは異なる紫の色合いが使用されます

単一の「シード」カラーから構成スキームをカスタマイズすることに加えて、カスタム カラー スキームをfromImageProvider画像。

ナビゲーションバー

今回は M3 バージョンのBottomNavigationBarコントロール。M3では異なる色、ハイライト、エレベーションが使用されていますが、その作業方法は以前と同じです。

NavigationBarsのデフォルトの外観を調整する必要がある場合は、 を使用NavigationBarThemeして変更をオーバーライドできます。既存のアプリを に移行する必要はありませんが、NavigationBars公式の推奨事項は、可能な限り新しいプロジェクトのナビゲーション コントロールNavigationBarsとして。

ナビゲーションドロワー

NavigationDrawer M3 には、単一選択リストNavigationDestinationsを表示するDrawer 用の新しいものも用意されており、リストに他のコントロールを含めることもできます。

M3 で同期 色と高さDrawerも更新され、レイアウトに若干の変更が加えられました。

NavigationDrawer必要に応じてスクロールでき、 のデフォルトNavigationDrawerの、NavigationDrawerThemeを使用してオーバーライドすることもできます。

サーチバーとサーチアンカー

これは、クエリを検索し、予測を提供するための Flutter の新しいコントロールです。

ユーザーが検索クエリを入力すると、一致する応答のリストが「検索ビュー」で計算され、ユーザーは結果を選択するか、一致する結果を調整します。

のデフォルトSearchBarThemeの、SearchAnchorThemeを使用してオーバーライドすることもできます。

セカンダリタブバー

M3 の Flutter は、デフォルトで第 2 レベルのタブ付きコンテンツの作成をサポートするようになりました。これは、第 2 レベルの Tab に使用できますTabBar.secondary

DatePicker と TimePicker が更新されました

M3では、コントロールのカレンダー、テキストフィールドの色、レイアウト、形状などがDatePicker 更新され対応するAPIは変更ありませんが、DatePickerThemeコントロールのスタイルを調整するためのAPIが新たに追加されます。

TimePickerと同様DatePickerに、コントロールの通常バージョンとコンパクト バージョンの色、レイアウト、形状が更新されました。

ボトムシートの更新

M3 では、色と形状の更新BottomSheetに加えて、オプションのドラッグ ハンドルが追加されました。これはshowDragHandle、 に設定するtrueと有効になります。

ListTile 更新

M3 では、コンテンツのパディング、先頭と末尾のコントロールの配置、先頭の最小幅、垂直方向の間隔などを含む位置と間隔がListTile更新されが、API は変更されません。

テキストフィールドの更新

M3 では、ネイティブ ジェスチャTextFieldの。

マウスでダブルクリックTextFieldまたはタッチ デバイスでのダブルクリックまたはトリプルクリックと同じ効果があり、デフォルトTextFieldで と の両方でCupertinoTextField 使用できます。

TextFieldダブルクリック/タップジェスチャー

  • ダブルクリック + ドラッグ: ブロック内の選択範囲を展開します。
  • ダブルタップ + ドラッグ: 選択範囲をブロック単位で展開します。

TextFieldトリプルクリック/タップジェスチャ

トリプルクリック

  • 複数行TextFieldのクリック位置の段落ブロックを選択します(Android/Fuchsia/iOS/macOS/Windows)。
  • 複数行内TextField(Linux) では、クリック位置にある行のブロックを選択します。
  • 単一行のすべてのテキストを選択しますTextField

トリプルタップ

  • マルチラインTextField内のクリックした位置にある段落ブロックを選択します。
  • 1 行内TextField

トリプルクリック+ドラッグ

  • 段落ブロック内の選択範囲を拡張します (Android/Fuchsia/iOS/macOS/Windows)。
  • 行ブロック内の選択を展開します (Linux)。

簡単に言うと、ジェスチャとマウスはダブルクリックとトリプルクリックで異なる選択効果をトリガーしますが、Linux ではトリプルクリック効果で少し違いがあります。

Flutter は SLSA レベル 1 をサポートします

Flutter フレームワークは現在、ソフトウェア アーティファクト サプライ チェーン レベル ( SLSA ) レベル 1 を使用してコンパイルされており、次のような多くのセキュリティ機能の実装をサポートしています。

  • スクリプト化されたビルド プロセス: Flutter のビルド スクリプトでは、アーティファクトの改ざんを防止し、サプライ チェーンのセキュリティを向上させるために保護されたアーキテクチャ上に構築された、信頼できるビルド プラットフォーム上での自動ビルドが可能になりました。
  • 監査ログを使用したマルチパーティの承認: Flutter リリース ワークフローは、複数のエンジニアによる承認後にのみ実行され、すべての実行で監査可能な変更ログが作成され、ソース コードとアーティファクトの生成の間に誰も変更を導入できないようにします。
  • 来歴: ベータ版と安定版リリースは来歴を使用してビルドされるようになりました。つまり、予想されるコンテンツ ビルド フレームワーク リリース アーティファクトを備えた信頼できるソースと、SDK アーカイブの出自を表示および検証するためのリンクが各リリースで公開されます。

この取り組みでは、ビルド中およびビルド後のアーティファクト保護に重点を置いた SLSA L2 および L3 への準拠も目指しています。

ウェブ

ロード時間の改善

3.10 では、アイコン フォントのファイル サイズが削減され、マテリアルとクパチーノから未使用のグリフが削除され、読み込みが高速化されています。

CanvasKit が小さい

Chromium ベースのブラウザは、より小規模なカスタム CanvasKit チャネルを使用でき、Google gstatic.comでホストされている CanvasKit を使用すると、パフォーマンスをさらに向上させることができます。

埋め込まれた要素

ページ内の特定の要素からFlutter Web を読み込めるようになりました。いいえiframe、このバージョンより前は、Flutter Web をページ本文全体に表示するか、iframeタグ Flutter Web を他の Web の下にネストする方が便利です。 。

特定のデモは https://github.com/flutter/samples/tree/main/web_embedding でご覧いただけます。

シェーダのサポート

Web アプリケーションは Flutter のフラグメント シェーダーを使用できます。

flutter:
  shaders:
    - shaders/myshader.frag

エンジン

インペラ

iOS は3.7 安定版リリースでImpellerプレビュー サポートを提供し、それ以来、Impeller はユーザーから多くのフィードバックを受け取り、対応してきました。

バージョン 3.10 では、Impeller に対して 250 を超えるコミットを行い、現在では Impeller を iOS のデフォルトのレンダラーにしています

Flutter 3.10 を使用して iOS 用に構築されたすべてのアプリはデフォルトで Impeller を使用するため、iOS アプリは途切れが少なく、より安定したパフォーマンスが期待できます。

バージョン 3.7 以降、iOS の Impeller はメモリ フットプリントを改善し、使用するレンダー パスと中間レンダー ターゲットを減らしました。

新しい iPhone では、非可逆テクスチャ圧縮を有効にすると、忠実度を損なうことなくメモリ使用量が削減され、これらの進歩により iPad のパフォーマンスも大幅に向上します

たとえば、Wonderousアプリケーションの「プル クォート」ページでは、これらの改善により、現在のページのメモリ使用量がほぼ半分に削減されました

メモリ使用量の削減により、GPU と CPU の負荷も適度に軽減されます。Wondrous アプリはおそらくこれらの負荷の低下を記録しません。そのフレームワークは以前にすでに適切に最適化されていましたが、この変更によりバッテリー寿命が改善されるはずです。

また、Impeller により、チームは、iOS でのより広い P3 色域のサポートなど、人気のある機能リクエストをより迅速に提供できるようになります。

コミュニティの貢献、特に忠実度とパフォーマンスを向上させるいくつかの Impeller 関連のパッチを作成したGitHub ユーザーのColdPaleLightluckysmg のおかげで、私たちの進歩は加速しました。

Impeller はほとんどの Flutter アプリのレンダリング ニーズを満たしますが、Impeller をオフにすることも選択できます。オプトアウトすることを選択した場合は、GitHub で問題を提出してその理由を知らせることを検討してください。

<key>FLTEnableImpeller</key>
<false/>

ユーザーは、Skia と Impeller のレンダリングにおける小さな違いに気づくかもしれません。これらの違いはバグである可能性があります。そのため、Github に問題を報告しないでください。将来のリリースでは、Flutter のサイズを削減するために iOS 用の従来の Skia レンダラを削除する予定です

さらに、Impeller の Vulkan バックエンドは引き続きサポートされており、Android 上の Impeller は引き続き開発中ですが、まだプレビューの準備ができていません。

Impeller の進捗状況を確認するには、https://github.com/orgs/flutter/projects/21 をチェックしてください。

パフォーマンス

3.10 リリースでは、Impeller 以外にも多くのパフォーマンスの改善と修正が含まれています。

カトンを排除する

背景色をゼロ以外の値に設定すると、Metal ドライバーから次の描画可能レイヤーを取得する時間を短縮できることを発見したluckysmgに感謝します。FlutterViews

この変更により、最近の iOS 120Hz ディスプレイでのフレームレートの低下の問題が解消され、場合によってはフレームレートが 3 倍になり、GitHub の 6 つの問題の解決に役立ちました。

この変更は非常に重要だったので、修正をバージョン 3.7 にバックポートしました

3.7 安定版リリースでは、プラットフォーム スレッドからの vsync イベントの遅延を避けるために、ローカル イメージの読み込みをプラットフォーム スレッドから Dart スレッドに移動しました。しかしユーザーは、 Dart スレッドでのこの余分な作業によってジャンクが発生することに気づきました。

3.10 では、ローカル イメージのオープンとデコードを Dart スレッドからバックグラウンド スレッドに移動しました。この変更により、ローカル テストと自動ベンチマークで、vsync イベントの遅延を回避しながら、ローカル イメージがたくさんある画面での潜在的な長い一時停止がなくなりました。変更により、複数の同時画像の読み込み時間が半分に短縮されました。

私たちは Flutter の新しい内部 DisplayList 構造の上に最適化を構築し続け、3.10 ではR-Tree ベースのカリングメカニズムを追加しました。

このメカニズムにより、レンダラでの初期の描画操作の処理が削除されます。たとえば、最適化により、出力が画面外に失敗するカスタム ペインタが高速化されます。

当社のマイクロベンチマークでは、DisplayList の処理時間が最大 50% 短縮されたことが示されており、クリップされたカスタム ペイントを使用するアプリでは、非表示のペイント操作の複雑さと数に応じてさまざまな改善が見られる可能性があります。

iOSの起動遅延を軽減する

アプリケーションでの識別子検索に関する以前の非効率的な戦略では、アプリケーションの起動待ち時間が増加し、アプリケーションのサイズに比例して増加していました。

そして 3.10 では、バンドル識別子の検索を修正しました。これにより、大規模なアプリの起動遅延が 100 ミリ秒、つまり約 30 ~ 50% 削減されます。

縮小サイズ

Flutter はテキスト、レイアウト、レンダリングのデフォルト ライブラリSkParagraphとして。以前は、レガシーlibtxtおよびへのフォールバックをサポートするフラグが含まれていましたminikin

私たちは に完全な自信をSkParagraph持っている、 3.10 では と 、およびそれらのフラグを削除し、Flutter の gzip 圧縮サイズを 30 KB 削減しましlibtxtminikin

自信があるように見えます。

安定

バージョン 3.0 では、レンダリング パイプラインの後半で、「ダーティ」領域のみが変更された場合に再描画される画面コンテンツを少なくする高度な GPU ドライバーを使用する Android 機能を有効にしました。

以前、同様の効果を達成するためにこれを以前の最適化に追加しました。ベンチマーク結果は良好でしたが、2 つの問題が発生しました。

進捗状況とサポートが限られているため、 Android では一部の再描画が無効になっています。

Skia バックエンドを使用している間、この機能は iOS で有効なままであり、将来のリリースでは Impeller 経由で有効にすることを期待しています。

APIの改善

APNGデコーダ

Flutter 3.10 では、私たちが最も懸念していた問題の 1 つが解決され、画像をデコードする機能がAPNG追加され、Flutter の既存の画像読み込み API を使用して画像。APNG

画像読み込み API の改善

3.10 では、次の 3 つの条件を満たすユースケースをサポートする新しいメソッドが追加されています。 instantiateImageCodecWithSize

  • ロード時のアスペクト比が不明
  • バウンディングボックス制約
  • 元のアスペクト比の制約

モバイル

iOS

ワイヤレスデバッグ

Flutter iOS アプリを無線で実行およびホット リロードできるようになりました

Xcode で iOS デバイスをワイヤレスでペアリングしたら、flutter run を使用してアプリをデバイスにデプロイできます。問題が発生した場合は、 [ウィンドウ] > [デバイスとシミュレータ] > [デバイス]でデバイスの横にネットワーク アイコンが表示されていることを確認してください。 。

詳細については、https://docs.flutter.dev/get-started/install/macos#ios-setup を参照してください。

広色域画像のサポート

iOS 上の Flutter アプリは、広色域画像の正確なレンダリングをサポートできるようになりました。広色域サポートを使用するには、アプリで Impeller を使用しInfo.plistFLTEnableWideGamut ファイルにフラグを追加する必要があります。

スペルチェックのサポート

SpellCheckConfiguration()このコントロールは、iOSAppleのスペル チェック サービスをデフォルトでサポートするようになりました。このサービスは、 のパラメータを使用して設定できます。spellCheckConfigurationCupertinoTextField

アダプティブチェックボックスとラジオ

3.10CupertinoCheckBoxライブラリCupertinoRadioにと が追加されCupertino、Apple スタイルのチェックボックスとラジオ ボタンのコンポーネントが作成されます。

マテリアル チェックボックスとラジオ コントロールには、iOS および macOS 上の対応する Cupertino コントロールと、他のプラットフォーム上のマテリアル コントロールを使用する.adaptiveコンストラクター。

クパチーノのアニメーション、トランジション、カラーを最適化する

Flutter 3.10 では、SwiftUI に合わせていくつかのアニメーション、トランジション、カラーが改善されています。これらの改善点には次のようなものがあります。

プラットフォームビューのパフォーマンス

Flutter は、iOS のリフレッシュ レートPlatformViews を制限して、アプリが画面に表示されるときの途切れを軽減します。これは、アプリがアニメーション化されたりスクロール可能になったりするときに。PlatformViews

macOS と iOS はプラグインで共有コードを使用できます

Flutter はpubspec.yamlsharedDarwinSourceプラグイン ファイル内のキーをサポートするようになりました。これは、Flutter が iOS と macOS コードを共有する必要があることを示します。

ios: 
  pluginClass:  PathProviderPlugin 
  dartPluginClass:  PathProviderFoundation 
  sharedDarwinSource:  true 
macos: 
  pluginClass:  PathProviderPlugin 
  dartPluginClass:  PathProviderFoundation 
  sharedDarwinSource:  true

アプリ拡張機能の新しいリソース

ライブ アクティビティ、ホーム スクリーン コントロール、共有拡張機能などの iOS アプリ拡張機能を使用する Flutter 開発者向けのドキュメントを追加しました。

ホーム画面コントロールの作成とデータの共有を簡素化するためにpath_providerhomescreen_widgetと プラグインに新しいメソッドを追加しました。

参照: https://docs.flutter.dev/development/platform-integration/ios/app-extensions

クロスプラットフォーム設計のための新しいリソース

このドキュメントには、特定のUI コンポーネントのクロスプラットフォーム設計に関する考慮事項が含まれるようになりました。これらの UI コンポーネントの詳細については、Flutter UX GitHub リポジトリのディスカッションを確認してください: https://github.com/flutter/uxr/Discussions

参照: https://docs.flutter.dev/resources/platform-adaptations#ui-components

アンドロイド

Android CameraX のサポート

Camera Xは、豊富なカメラ機能を Android アプリケーションに簡単に追加できる Jetpack ライブラリです。

この機能はさまざまな Android カメラ ハードウェアで動作し、3.10 では CameraX の予備サポートを Flutter Camera プラグインに追加しました。これは次のユースケースをカバーします。

  • 画像キャプチャ
  • ビデオ録画
  • ライブカメラのプレビューを表示
Dependencies: 
  camera:  ^0.10.4  # 最新相机版本
  camera_android_camerax:  ^0.5.0

開発者ツール

私たちは、Dart と Flutter 用のパフォーマンスおよびデバッグ ツールのスイートである DevTools の改善を続けました。いくつかのハイライトは次のとおりです。

  • DevTools UI はマテリアル 3 を使用しており、外観が最新化され、アクセシビリティが強化されています。
  • DevTools コンソールは、デバッグ モードでの実行中のアプリの評価をサポートしていますが、3.10 より前では、アプリが一時停止されている間にのみ実行できました。
  • 埋め込みPerfetto トレース ビューアは、以前のタイムライン トレース ビューアを置き換えます。

Perfetto は、より大きなデータセットを処理でき、次のような従来のトレース ビューアよりも優れたパフォーマンスを発揮します。

  • 対象のスレッドの固定を許可する
  • クリックしてドラッグし、複数のフレームから複数のタイムライン イベントを選択します
  • SQL クエリを使用してタイムライン イベントから特定のデータを抽出する

非推奨と重大な変更

非推奨の API

3.10 の重大な変更には、v3.7 リリース後に期限切れになった非推奨の API が含まれています。

影響を受けるすべての API、追加のコンテキストおよび移行ガイダンスを確認するには、以前のリリースの非推奨ガイドを参照してください。

Dart Fix は、IDE でのクイックフィックスやdart fixコマンドを使用したバッチ アプリケーションなど、これらの問題の多くを修正できます。

Android Studio Flamingo のアップグレード

Android Studio を Flamingo にアップグレードした後flutter runflutter buildAndroid アプリをビルドまたは Flutter しようとするとエラーが表示される場合があります。

このエラーは、Android Studio Flamingo がバンドルされている Java SDK を 11 から 17 に更新し、 Java 17 の使用時に以前の 7.3 Gradle バージョンが機能しないために発生します。

このエラーが Java SDK と Gradle のバージョン間の非互換性によって発生するかどうかを確認するために更新されました。flutter analyze --suggestions

このエラーを修正するさまざまな方法については、移行ガイド (https://docs.flutter.dev/go/android-java-gradle-error) を参照してください。

ウィンドウシングルトンは非推奨になりました

改訂版では Windows シングルトンが廃止されるため、これに依存するアプリケーションとライブラリは移行を開始する必要があります。

これにより、アプリが Flutter の将来のバージョンでマルチウィンドウ サポートをサポートする場合に、事前にアプリのマルチウィンドウ サポートが準備されます。

PS: この I/O: I/O FLIP ゲームによってリリースされた Flutter をベースにした新しいゲームにも注目してください。

おすすめ

転載: blog.csdn.net/ZuoYueLiang/article/details/130613683