了解 Flutter 3.16 功能更新

作者 / Kevin Chisholm
我們在季度 Flutter 穩定版發布會上帶來了 Flutter 3.16,此版本包含諸多更新: Material 3 成為新的默認主題、為 Android 帶來 Impeller 的預覽版、允許添加適用于 DevTools 的擴展程序等等,以及同步推出 Flutter 休閑游戲工具包重大更新!
自上次發布以來,僅僅三個月,我們便收到了 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 拓展!

Provider

Patrol

Drift
您可以查看 Kenzie Davisson 撰寫的 Dart 和 Flutter DevTools 擴展公告,深入了解 DevTools 擴展。
DevTools 更新
此版本的 DevTools 有以下亮點:
- 添加了對 DevTools 擴展的支持
- 添加了新的 "主" 屏幕,顯示已連接應用的摘要

其他改進包括:
- 整體性能
- 熱重啟的穩健性
- 文本選擇及復制行為
- 網絡性能分析器響應查看器的優化
您可以查看 DevTools 2.26.1、2.27.0 和 2.28.1 的版本說明了解詳情。
VS Code 界面可檢測性
感謝 Flutter 社區成員 DanTup 的出色工作, Flutter VS Code 擴展現已配備 Flutter 側邊欄,您可以輕松:
- 打開 Flutter DevTools 屏幕
- 查看處于活躍狀態的調試會話
- 查看可用設備
- 創建新項目
- 熱重載和重啟
- 運行 Flutter Doctor -v
……

棄用和重大變更
此版本中的重大變更包括 v 3.13 版本后過期并被棄用的 API。如果您想查看所有受影響的 API 以及其他背景信息和遷移指南,您可以參閱 此版本的棄用指南。其中的許多 API 都受 Flutter Fix 支持,包括 IDE 中的快速修復,您也可以使用 dart fix 命令評估和應用批量修復。
非常感謝社區一如既往地 提供測試,幫助我們推進了以上重大變更。如需了解詳情,您可以查看 Flutter 的重大變更政策。
在下個版本中,我們計劃將棄用政策的適用范圍擴展到除已支持的 package (flutter 和 flutter_test) 之外的 flutter_driver package。
即刻體驗
我們特意在本文的開篇部分列出了貢獻者的數量。大家 (卓越社區) 的共同努力,讓 Flutter 在當下成為輕松易用且能提高工作效率的工具包。再次謝謝大家。
有關此版本中包含的 PR 完整列表,您可以查看 版本說明和更新日志。
Flutter 3.16 目前已發布至穩定渠道,包括 Dart 3.2,您只需單擊 flutter upgrade 即可開始使用這些最新的更新。
浙公網安備 33010602011771號