瞭解 Flutter 3.16 功能更新

框架
支援 Material 3 動畫
引擎
遊戲
Web
Android
iOSPackage 生態系統
DevTools棄用和重大變更
即刻體驗

作者 / Kevin Chisholm

我們在季度 Flutter 穩定版發布會上帶來了 Flutter 3.16，此版本包含諸多更新: Material 3 成為新的預設主題、為 Android 帶來 Impeller 的預覽版、允許新增適用於 DevTools 的擴充套件程式等等，以及同步推出 Flutter 休閒遊戲工具包重大更新！

Flutter 休閒遊戲工具包重大更新

https://medium.com/flutter/building-your-next-casual-game-with-flutter-716ef457e440

自上次發布以來，僅僅三個月，我們便收到了 145 名社群成員合併提出的 928 個拉取請求 (pull request)，其中有 40 名社群成員在 Flutter 上首次送出了他們的編寫！

歡迎你繼續閱讀本篇文章，瞭解 Flutter 社群為這個最新版本帶來的所有新功能和改進！

框架

Material 3 成為新的預設設計語言

Material 函式庫已更新至 3.10 版本 (2023 年 5 月)，以對應最新的 Material Design 規範。更改包括新的元件、元件主題以及更新的元件視覺效果。在 3.16 版本之前，這些更改在 useMaterial3 主題標誌旁顯示為 “選擇加入”；自此版本起，useMaterial3 預設為 true。(#130764)

雖然你仍然可以透過在 MaterialApp 主題中設定 useMaterial3: false 從而選擇退出 M3 版本的 Material 函式庫，但 Material 2 最終還是會被棄用和刪除。此外，一些 widgets 不僅需要更新，還需要全新的實現方式。因此，當你的介面以 Material 3 形式執行時，可能看起來有點奇怪。要解決此問題，你可以手動遷移到新的 widgets，例如 NavigationBar。你可以在 GitHub 上的 Material 3 umbrella issue 檢視更多詳情。

透過示範應用，你可以試用所有元件。示範版支援切換 useMaterial3，以便你針對更改進行比較。

Material 3 元件的外觀主要由 [ThemeData.colorScheme] 和 [ThemeData.textTheme] 的值決定。ColorScheme.fromSeed() 是 Material 3 配色方案的首選方式，可以生成既美觀又符合無障礙對比度要求的深色和淺色方案。你還可以使用 ColorScheme.fromImageProvider，以根據影象中的主色調生成配色方案。如果你想進一步自定義 Material 3 元件的外觀，可以將元件主題新增到 ThemeData，例如 ThemeData.segmentedButtonTheme 或 ThemeData.snackBarTheme。非空元件主題屬性會覆蓋元件的 API 文件中指定的預設值。

支援 Material 3 動畫

對 Material 3 動畫的改進包括新增 Easing 和 Durations 類。Material 2 曲線被重新命名後包含了 “legacy” 提示，最終將被棄用和刪除。(#129942)

在編輯選單中新增其他選項

在原生 iOS 系統上，使用者現在可以選擇文字並啟動提供多種標準服務的共享選單。在此版本中，我們新增了查詢、搜尋和共享選項。

用於指定全域文字縮放係數的 TextScaler

為了支援 Android 14 中為視障人士提供幫助的非線性字型縮放功能，我們使用新的 TextScaler 類替代 Text.textScaleFactor 屬性。(#128522)

SelectionArea 更新

Flutter 的 SelectionArea 經過更新，可支援與使用滑鼠單擊或雙擊以及觸屏裝置上長按相關的原生手勢。你可以在預設情況下透過 SelectionArea 和 SelectableRegion 使用這些新手勢:

單擊: 在點選位置設定摺疊的選項。
雙擊: 選擇點選位置的字詞。
雙擊 + 拖動: 擴充套件所選詞區塊。

長按 + 拖動: 擴充套件所選詞區塊。

可在焦點 widget 上操作的選單項

此版本支援在使用選單項時清除焦點更改: FocusManager 的 applyFocusChangesIfNeeded 函式現在可用於恢復選單焦點——當用戶單擊選單項時，焦點會回傳至選單開啟之前焦點所在的專案。(#130536)

iOS、macOS 中選單項快捷方式的

自動重新排序

Mac 平台上的 Flutter 應用現在會按照《Apple 人機界面指南》對選單中的快捷方式修飾符進行排序。(#129309)

△ 排序前

△ 排序後

MatrixTransition 動畫

新的 MatrixTransition widget 可用於變換轉場動畫。根據當前動畫值，你可以提供應用於子 widget 的矩陣變換，也可以檢視 DartPad 中範例的實現效果。(#131084)

PaintPattern 已新增到 flutter_test

在 flutter_test package 中，新的 PaintPattern 類允許你驗證 CustomPainter 和 Decoration (在單元測試中使用) 等 widget 對畫布進行的繪製呼叫。

以前，驗證顏色和矩形是否繪製正確需要使用 golden 檔案，但你現在可以使用 PaintPattern。以下是驗證 MyWidget 是否在畫布上繪製了圓圈的範例:

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

此 API 以前深藏於框架測試檔案，我們注意到一些開發者發現它非常有用並將其複製到了自己的專案中。如果該 API 也適用於你的專案，你可以在升級到 Flutter 3.16 後從專案中刪除該副本。

捲動更新

在 Flutter 3.13 首次發布二維捲動基礎後，此次 3.16 版本帶來了更多功能和最佳化，2D 基礎現在支援 KeepAlive widget，以及預設的焦點遍歷和隱式捲動。在此基礎之上建立的 2D 捲動 widget 將自動採用此支援。有關在 2D 基礎上建立的綜合指南，你可以觀看最新一集的《Flutter Build Show》。

3.13 版本發布後不久，two_dimensional_scrollables package 也隨之發布。此 package 由 Flutter 團隊維護，包含首個基於框架基礎建立的 2D 捲動 widget — TableView。自首次發布以來，我們新增了更多裝飾和樣式支援，並修復了其他問題。

引擎

Impeller

Android

在此版本中，我們很高興地與你分享，Impeller 已在 Android 上準備就緒，可用於在穩定渠道上收集預覽版反饋。自今年早些時候，團隊一直在努力為 Impeller 開發 Vulkan 後端，此次預覽版包括收集 Impeller 在支援 Vulkan 的裝置上表現的相關反饋。

△ 這張圖表顯示了在過去一年裡，在對 Impeller 的 Vulkan 後端上執行的 Flutter Gallery 進行的轉換效能基準測試中，99% 幀時間、90% 幀時間和平均幀光柵化時間都有所改善，由於卡頓更少、穩態幀率更高，使用者可以直觀地看到這些改善。在此測試結束時，由於我們從 Samsung S10 裝置改用 Pixel 7 Pro 裝置，導致資料大幅下降。儘管如此，趨勢和整體結果仍然鼓舞人心。

在不支援 Vulkan 的裝置上，預計 Impeller 表現不佳。我們計劃在未來幾個月內為 Impeller 的 OpenGL 後端提供完備功能，以及在未來的穩定版本中徵集有關 Impeller 在這些裝置上的表現的反饋意見。

要在支援 Vulkan 的 Android 裝置上試用 Impeller，Flutter 開發者可以將 — enable-impeller 標誌傳遞給 flutter run，或將以下設定新增到 <application> 標籤下的專案 AndroidManifest.xml 檔案中:

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true" />

為了確定裝置是否支援 Vulkan，你需要對 Impeller 進行 Impeller repo docs 中討論的測試。一般來說，在執行 Android API 級別 29 或更高版本的 64 位作業系統的裝置上，Impeller 使用的是 Vulkan 後端。使用者還可以按照檢查是否支援 Vulkan 中的建議從而確定裝置是否支援 Vulkan。

雖然迄今為止，我們對在 Impeller 的 Vulkan 後端上取得的進展比較滿意，但預覽階段仍有一些已知問題:

由於平台檢視尚未實現，因此包含平台檢視的框架效果不佳。
自定義著色器尚未實現。
有關已知錯誤和缺失功能的完整清單，你可以參閱 GitHub 的 Impeller 專案板中的最新訊息。我們已在 3.17 beta 版中修復了一些問題，你也可以試用新版本。

我們對嘗試在支援 Vulkan 的 Android 裝置上取得的 Impeller 保真度和效能進展感到滿意。然而，與 iOS 相比，Android 硬體生態系統更加多樣化，因此我們預計 Android 的預覽版試用期比 iOS 更長，然後才能將其作為穩定渠道上的預設後端。基於上述原因，關於 Impeller 的最實用反饋應包括發生問題的具體裝置和 Android 版本的詳細訊息。

此外，Impeller 的 Vulkan 後端在 “除錯” 版本中啟用了超出 Skia 使用範圍的額外除錯功能，這些功能會產生額外的執行時開銷。因此，有關 Impeller 效能的反饋務必來自設定檔案或發布版本，並且應包括來自 DevTools 的時間軸以及與同一裝置上的 Skia 後端的比較。我們非常感謝每一個包含可復現的小型測試用例的反饋。

Impeller 效能、保真度和穩定性

除了關注 Vulkan 後端，自今年年初以來，團隊還對 Impeller 中的文字效能進行了許多改進，這對 Android 和 iOS 都有好處。特別是我們改進了 Impeller 字形圖集的管理以及在引擎的介面和光柵執行緒中劃分文字工作負載的方式。因此，使用者會注意到，即使處理繁重的文字工作負載，發生卡頓的情況也會減少。

△ 這張圖表顯示了在使用 Impeller 的 iPhone 11 上進行的其中一項大量文字基準測試中，99% 幀時間、90% 幀時間和平均幀光柵化時間均有減少 (以毫秒為單位)。特別是，90% 幀時間和平均幀光柵化時間幾乎減半。

團隊還一直在努力改進 Android 和 iOS 的保真度和穩定性，特別是使用者報告的內容。在此穩定版本發布的三個月中，團隊已經針對 Flutter/引擎 repo 送出了 209 個與 Impeller 相關的內容，解決了 217 個問題，其中包括 42 個有關保真度、穩定性或效能問題的使用者報告。

引擎效能

為了在採用異構多處理的行動裝置上提供更好的效能支援，我們修改了引擎，以便注重效能的執行緒 (例如，介面和光柵執行緒) 可適應裝置更強大的核心。我們觀察到，這一變化對一系列基準和裝置產生了積極影響。在某些情況下，這種改善十分顯著，99% 幀時間或 90% 幀時間至少減半。我們預計，經過此次更改後，無論在 Android 上使用 Skia 後端還是 Impeller 後端，使用者都會注意到卡頓情況有所減少。在 iOS 裝置上，因為更強大的核心和更弱的核心之間的差異較小，所以效果並不太明顯。

△ 這張圖表顯示了，我們幾乎所有 Android 基準和裝置的最差幀時間、99% 幀時間、90% 幀時間以及平均幀建立時間和幀光柵化時間都有所改善。

API 和保真度改善

Impeller 效能疊加

在以前的版本中，Flutter 的效能疊加功能未在 Impeller 中顯示。此版本修復了該問題，效能疊加在 Impeller 啟用後將會正確顯示。

抖動現在會正確顯示

在此版本中，Paint.enableDithering 屬性被設定為 true，並且根據 Flutter 的棄用策略已被棄用。抖動現在預設啟用 (不再支援開發者可設定的抖動)，你將不會再遇到漸變問題。你可以參閱 docs.flutter.dev 中的重大變更頁面瞭解有關此更改的完整說明和遷移指南。

△ 之前

△ 之後

遊戲

Flutter 遊戲工具包

過去幾年，休閒遊戲開發社群不斷發展壯大。從簡單而有趣的解謎遊戲到更復雜的街機遊戲，數以萬計使用 Flutter 開發的遊戲得以發布。深受喜愛的遊戲包括 Etermax 的 Trivia Crack、Lotum 的 4 Pics 1 Word (猜詞遊戲)、Dong Digital 的 Brick Mania (街機遊戲)、Onrizon 的 StopotS (分類遊戲)、我們為 I/O 大會開發的復古彈球遊戲以及在社交和選單螢幕中使用 Flutter 的 PUBG 手遊等。

為了幫助遊戲開發者提高工作效率，我們對 Flutter 的休閒遊戲工具包進行了重大更新。此次更新包括提供一系列新資源，可幫助開發者利用更多特定型別的樣板把遊戲從概念走向發布，例如紙牌遊戲、無盡跑酷遊戲以及 Google Play 遊戲服務、應用內購買、廣告、成就、crashlytics 和多人遊戲支援等服務整合。

Web

Chrome DevTools 中的 Flutter 時間軸事件

Flutter 時間軸事件現在顯示在 Chrome DevTools 的效能面板中。(#130132)

你可以檢視 Web 應用的除錯效能瞭解更多詳細訊息。

Android

滑鼠滾輪支援

在最佳化 Wonderous 以符合 Android 的大屏指南要求時，我們發現了一個問題，滑鼠滾輪在平板電腦或可摺疊裝置上表現不佳。這導致出現了一個普遍現象，使用者必須大幅移動滾輪才能讓螢幕回應。

透過此版本更新，使用滑鼠在 Flutter 檢視上的捲動速度與在 Android 裝置上的捲動速度得以對應。(44724)

之前

之後

預測性回傳導向

Android 14 版本包含預測性回傳手勢功能，允許你在裝置上使用回傳手勢 “檢視” 當前螢幕後面的主螢幕。此更新也為 Flutter 帶來了預測性回傳手勢！你可以檢視遷移指南瞭解詳情。

iOS

應用擴充套件

Flutter 現在可用於定位某些 iOS 應用擴充套件。這意味著可以使用 Flutter widget 為某些型別的 iOS 應用擴充套件繪製介面。這並不適用於所有型別的應用擴充套件，因為 API (例如，主螢幕 widget) 或記憶體可能存在限制。

你可以訪問 docs.flutter.dev 中的新增 iOS 應用擴充套件瞭解詳情並檢視有關如何定位 “共享” 擴充套件的範例。

Package 生態系統

新的 Flutter Favorite 內容

我們已重新啟動 Flutter Favorite 專案！在此週期中，Flutter 生態系統委員會將 flame、flutter_animate、flutter_rust_bridge、riverpod、video_player、macos_ui 和 fpdart package 指定為新的 Flutter Favorite。

敬請你持續關注更新的 Flutter Favorite 內容。你可以向委員會傳送電子郵件訊息 (電子郵件地址: flutter-committee@googlegroups.com)，來提名 package 或外掛成為潛在的未來 Flutter Favorite，還可以提醒委員會注意任何其他問題。

首屆 package 生態系統網路峰會

8 月，我們舉辦了首屆 package 生態系統網路峰會，超過 50 名非 Google 員工和 Google 員工貢獻者透過 pub.dev 參與了本次峰會。我們的目標是將貢獻者們聚集在一起，開展非會議式的討論，讓大家交流計劃、傳授經驗、互相學習並在社群中分享想法。會後調查顯示，大家對會議的滿意度為 100%。我們計劃在未來與社群合作，舉辦類似的 package 生態系統 (面對面和網路) 活動。

基於 Cloud 的 Google 地圖樣式

利用 Google Maps Platform，你可以在 Google Cloud Console 的 “地圖樣式” 頁面中自定義地圖樣式，而無需在每次更改樣式時更新應用程式碼，即可享受自定義體驗。

如果你想要在 Flutter 中使用此功能，只需使用控制台中設定的地圖 ID 即可引用地圖:

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

CameraX 改進

在 3.10 穩定版中，我們對 Flutter 相機外掛新增了初步的 CameraX 支援。CameraX 是一款 Jetpack 函式庫，可簡化向 Android 應用新增豐富相機功能的流程。

在此版本中，我們新增了使用相機的應用所需的大部分功能。CameraX 解決了 Camera2 外掛實現方式中存在的許多問題。

我們建議你使用 CameraX 外掛。如果你選擇啟用，可以將以下行新增到 pubspec.yaml 檔案中。

Dependencies:
camera: ^0.10.4 # Or try the latest camera version
camera_android_camerax: ^0.5.0

我們計劃在未來版本中將 CameraX 作為預設實現方式，期待你的反饋。

macOS 影片播放器

我們為影片播放器外掛新增了 macOS 支援，允許開發者在 widget 表面播放影片。

影片播放器外掛

你可以在 pub.dev 中搜索影片播放器外掛瞭解詳情。

DevTools

DevTools 擴充套件

新的 DevTools 擴充套件框架支援:

package 作者可以直接在 DevTools 中為 package 建立自定義工具。
package 作者可以利用 DevTools 中的現有框架和實用程式編寫功能強大的工具。
正在使用 DevTools 除錯應用的 Dart 和 Flutter 開發者可以訪問特定於其用例的工具 (取決於其應用的依賴項以及哪些依賴項提供 DevTools 擴充套件)。

感謝 Provider、Drift 和 Patrol 的 package 作者，這個生態系統已經在建立中，你可以立即使用這些 package 的 DevTools 拓展！