Flutter 3.19 & Dart 3.3 改版重點！

不能錯過的好消息

又到了 Flutter 改版的時刻，整理了本次的更新重點，以簡潔的方式說明，希望讓開發者們快速地了解它們。也建議大家有時間的話，可以去閱讀官方原文。

Sharing Flutter’s 2024 roadmapAs an open source project with a thriving community, we strive to be transparent about our plans, with everything from…medium.com

Starting 2024 strong with Flutter and DartAn introduction, two new SDK releases, and bringing Flutter and Dart into the Gemini eramedium.com

New in Dart 3.3: Extension Types, JavaScript Interop, and MoreDart 3.3 has landed, and it’s a game-changer for performance and cross-platform development! Get ready to supercharge…medium.com

What’s new in Flutter 3.19Revolutionizing App Development with the Gemini API, Impeller Updates, and Windows Arm64 Supportmedium.com

Harness the Gemini API in your Dart and Flutter AppsIntroducing the Google AI Dart SDKmedium.com

Dart#

Extension Types#

“擴充類型” 的出現，是為了效能最佳化以及強化與 Native 程式碼的互動。零成本包裝器。在與原生平台溝通時，提供了具有特定成員的自訂類型，同時消除了典型的 wrapper 分配開銷。

extension type Wrapper(int i) {
  void showValue() {
    print('my value is $i');
  }
}

void main() {
  final wrapper = Wrapper(42);
  wrapper.showValue(); // Prints 'my value is 42'
}

我們可以將 Extension Types 作為一般的 Dart Class，可以實例化並呼叫自定義函數，不同的地方在於 Dart 將它編譯為普通 int。而且針對新的 Extension Types 功能也可以使用 Extension members API。

官方說明這對於與 Native 的互通性特別有用，可以直接使用原生類型，無需創建包裝器和花費間接的成本。

Extension typesLearn how to write a static-only interface for an existing type.dart.dev

JavaScript Interop#

引進了一個與 JavaScript libraries 和 Web 互通的新模型，新的 API dart:js_interop library。現在，Dart 開發人員可以使用 typed API 來與 JavaScript 互動，透過靜態強制確保了兩種語言的邊界，可以在編譯之前就消除 Class 的相關問題。除了用於存取 JavaScript 程式碼的新 API 之外，Dart 現在還提供一個新模型，用來代表 JavaScript type，在撰寫 Extension Types 時會使用。對於 Dart 端在撰寫 JavaScript API 時會更加便利。

import 'dart:js_interop';

/// Represents the `console` browser API.
extension type MyConsole(JSObject _) implements JSObject {
  external void log(JSAny? value);
  external void debug(JSAny? value);
  external void info(JSAny? value);
  external void warn(JSAny? value);
}

JavaScript interoperabilityIntegrate JavaScript code into your Dart web app.dart.dev

Improved Browser Libraries & Get Ready for WebAssembly#

瀏覽器 library 的支援，將集中在 package:web 上。簡化了版本控制、加速更新改版並與 MDN 資源保持一致。加強 type safety 和提供更友好的方式開發 Web，所有的改善都是為了支援 WebAssembly。

Flutter Web 中的 WebAssembly 支援仍處於試驗階段，團隊正在努力。而要使用 WebAssembly，需要遷移應用和所有依賴套件的所有程式碼，使用新的 JavaScript Interop 機制和 package :web。

官方創建了一個遷移指南來幫助開發者開始使用 Wasm，而接下來希望當 Wasm 為穩定版本的時候，最受歡迎的 package 套件都會支援它。

下一個階段，就是將 Dart 編譯為 WebAssembly

site-www/src/content/interop/js-interop/package-web.md at main · dart-lang/site-wwwSource for Dart website. Contribute to dart-lang/site-www development by creating an account on GitHub.github.com

Google AI Dart SDK#

為了迎接 Gemini AI，推出新的 pub.dev 套件 google_generative_ai 以及開發文件，讓大家能輕易地夠過 Flutter 建立自己的 AI 功能，例如：智慧聊天機器人、視覺圖像的搜尋和互動功能，擁有與眾不同地用戶體驗。

google_generative_ai | Dart packageThe Google AI Dart SDK enables developers to use Google’s state-of-the-art generative AI models (like Gemini).pub.dev

Quickstart: Get started with the Gemini API in Dart or Flutter apps | Google AI for DevelopersLearn how to use the Gemini API with Dart to generate text from both image and text prompts and to build a chat…ai.google.dev

官方範例：

import 'package:google_generative_ai/google_generative_ai.dart';

const apiKey = ...;

void main() async {
  final model = GenerativeModel(model: 'gemini-pro', apiKey: apiKey);

  final prompt = 'Write a story about a magic backpack.';
  final content = [Content.text(prompt)];
  final response = await model.generateContent(content);

  print(response.text);
};

DartPadAn online Dart editor with support for console and Flutter apps.dartpad.dev

另外，可以操作 AI Studio 體驗 Gemini 給予的協助，也能取得自己的 API Key，結合自身產品。

https://aistudio.google.com/app/prompts/new_chat

右上角有一個 Get code 選項，讓開發者能直接複製對話內容的程式碼，針對你的喜好語言進行選擇，直接複製到專案裡就完成功能的開發了。不過目前還沒有 Dart，近期官方會釋出，大家可以期待一下。

目前許多團隊都已經在產品中整合 Gemini Model

LeanCode 建立了arb_translate 套件，允許開發人員自動執行翻譯 arb 檔案的工具，有效節省大量時間 (迫不及待想嘗試了！)
We Spot Turtles! 建立的 Flutter 產品，完成拯救海龜即將滅絕的使命。他們也參與了 Google Play 的 #WeArePlay 活動

#WeArePlay | Google Play ConsoleCelebrating the global community of people creating apps and games. Teams of all sizes - founded by coders since…play.google.com

AutoGPT 是一個實驗性開源專案，擁有跨 iOS、Android、Web、macOS 和 Windows 運行的 Flutter 應用

GitHub - Significant-Gravitas/auto_gpt_flutter_clientContribute to Significant-Gravitas/auto_gpt_flutter_client development by creating an account on GitHub.github.com

有關 google_generative_ai 的套件說明，可以閱讀 Ander Dobo 撰寫的文章。

Harness the Gemini API in your Dart and Flutter AppsIntroducing the Google AI Dart SDKmedium.com

官方也歡迎大家如果有開發 Gemini Model 的產品，如果要發文，要搭配 #BuildWithGemini 主題標籤，協助大家有曝光的機會。

Flutter Roadmap#

從 2020 年以來，Flutter 每年都會發佈路線圖，讓所有開發者能了解團隊的每一步與後續發展。而今年的 2024 Roadmap 已釋出，官方一樣持續專注於相同目標，創建一個最受歡迎、成長最快、生產力最高的跨平台(多端)UI 框架，以建立豐富的應用程式體驗。而到目前為止，非 Google 貢獻者的數量已經超過了 Google 員工的數量。

RoadmapFlutter makes it easy and fast to build beautiful apps for mobile and beyond — Roadmap · flutter/flutter Wikigithub.com

Flutter Framework#

Scrolling improvements#

原本，如果使用兩根手指拖曳，滾動速度會加快兩倍。而我們現在可以配置ScrollBehavior 為 MultiTouchDragStrategy.latestPointer，獲得與手指數量無關的滾動行為，維持相同速度。

Default multitouch scrollingScrollBehaviors will now configure how Scrollables respond to multitouch gestures.docs.flutter.dev

解決 SingleChildScrollView和 ReorderableList 錯誤，解決了崩潰和意外行為。

TableView 的 two_dimensional_scrollables進行了更新，添加了 merged cells 的支持，並添加更多 2D 新功能。同時解決了一個問題，原本在任一方向上滾動時進行拖曳或點擊，滾動將停止。

AnimationStyle#

TahaTesser 作者為 Flutter 新增了 AnimationStyle 元件，允許覆蓋MaterialApp、ExpansionTile、PopupMenuButt 等元件的預設動畫行為，提供覆蓋 Animation Curves 和 Duration 的能力。

SegmentedButton.styleFrom#

AcarFurkan 作者新增了 styleFrom靜態方法，可以建立與其他按鈕共用的ButtonStyle或應用配置的SegmentedButtonTheme

Adaptive Switch#

在 macOS 和 iOS 上看起來是原生的，在其他平台具有 Material Design 的外觀。不依賴 Cupertino 庫，因此 API 在所有平台上都完全相同。

Switch.adaptive constructorAPI docs for the Switch.adaptive constructor from Class Switch from the material library, for the Dart programming…api.flutter.dev

SemanticsProperties accessibility identifier#

新的 Accessibility identifier 為SemanticsProperties，在 Native 原生的層次結構中提供識別。在 Android 上，顯示為resource-id。在 iOS 上，設定UIAccessibilityElement.accessibilityIdentifier。

對TextField添加了 MaterialStatesController 和 TextFormField，讓開發者可以監聽 MaterialState 狀態更新。

UndoHistory stack#

修正了撤銷歷史記錄在日文鍵盤上可能消失的問題。

Add undoStackModifier to UndoHistory by Renzo-Olivares · Pull Request #138674 · flutter/flutterThis change adds a feature to UndoHistory that allows the user to modify the value being pushed onto the undo stack…github.com

Flutter Engine#

Impeller on Android#

在3.16 穩定版中，團隊邀請了用戶，在使用支援 Vulkan 的 Android設備上試用 Impeller，涵蓋了 77% 的設備。同時讓 Impeller 的 OpenGL 實現了與 Vulkan 相同的功能，例如，增加了對 MSAA 的支援。

另外，Impeller 的 Vulkan 在 debug 中啟用了超出 Skia 的附加偵錯功能，它們會產生額外的執行時間成本。因此，大家提供 profile 或 release 版本中有關 Impeller 效能的回饋非常重要。希望錯誤報告裡能包括 DevTools 的 timelines 以及與運行 Skia 的比較資訊。最好的話，能提供一個能重現問題的 Demo 影片。

Roadmap：

在處理渲染保真度之後， Impeller Android preview 階段的主要重點是效能
期望利用 Vulkan subpasses 來大幅提高進階混合模式的效能
渲染策略從對 CPU 上的每條路徑進行細分到 Stencil-then-cover 方法的改變，將大大降低 Android 和 iOS 上 Impeller 的 CPU 使用率
預計高斯模糊的新實作方式將與 Skia 的吞吐量相匹配，並改進 iOS 上 blurring 模糊的慣用用法

API improvements#

Glyph Information#

dart:ui library Paragraph物件上的兩個新的方法，getClosestGlyphInfoForOffset 和getGlyphInfoAt，它們各自傳回一個新類型的物件GlyphInfo。

GlyphInfo class - dart:ui library - Dart APIAPI docs for the GlyphInfo class from the dart:ui library, for the Dart programming language.main-api.flutter.dev

GPU tracing#

在 Metal（iOS、macOS、Simulator）和支援 Vulkan 的 Android 裝置下，Flutter 引擎可以在 debug 和 profile 建置中，顯示時間軸中每幀的 GPU 時間。在 DevTools 中的「GPUTracer」下檢查。

請注意，由於非 Vulkan Android 的裝置可能會錯誤報告，因此只能對於支援 Impeller 的設備開啟 GPU 追蹤，設定 AndroidManifest.xml。

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

Performance optimizations#

Specialization constants#

該團隊向 Impeller 添加了對 specialization constants 的支援。利用著色器中的這項功能，將 Flutter 引擎的未壓縮二進位檔案大小減少了近 350KB。

[Impeller] support static shader variants using specialization constants · Issue #119357 ·…Originally in go/impeller-shader-variants, related to #116103 Problems Some shader source code is highly repetitive due…github.com

Skia Performance MonitoringEdit descriptionflutter-flutter-perf.skia.org

Backdrop filter speedups#

此版本對 Backdrop Filters 和 Impeller 的 Blur 進行了一些不錯的性能改進。特別是，開源貢獻者 @knopp 注意到 Impeller 錯誤地請求了讀取螢幕紋理的功能，刪除此功能可以改善包含多個背景濾鏡的場景。

[Impeller] Reduce render-pass overhead when using wide gamut (iOS) · Issue #131567 ·…Consider the following example: code import ‘dart:ui’; import ‘package:flutter/material.dart’; void main() {…github.com

此外，Impeller不再將 stencil buffer 儲存在每個背景濾鏡上。相反，任何影響操作的剪輯都會被記錄下來，並在恢復背景濾鏡的保存層時重新處理到新的模板緩衝區中。

[Impeller] stencil buffer record/replay instead of MSAA storage. by jonahwilliams · Pull Request…When restoring from a backdrop filter, replay the clip affecting cmds into a new stencil buffer instead of storing 4x…github.com

Android#

Deeplinking Web Validator#

官方從開發人員那裡了解到，深度連結始終難以實現，容易出錯。因此創建了一個驗證工具來幫助開發人員了解哪些連結配置不正確，並提供實作指導。

Flutter deeplink validator 的早期版本現已推出！

在此版本中，支援 Android 上的 Web 檢查，可驗證資源檔案assetlinks.json。開發人員可以開啟 DevTools，點擊進入Deep Links 選項，然後匯入包含深層連結的 Flutter 專案，Validator 會告訴您 Web 檔案是否配置正確。

https://docs.google.com/document/d/1fnWe8EpZleMtSmP0rFm2iulqS3-gA86z8u9IsnXjJak/edit

支援 Share.invoke#

Android 之前缺少 TextField 和 View 上的預設 Share 按鈕，在此版本中新增了它，確保所有預設按鈕在每個平台上都可用。

Missing default context menu buttons on each platform · Issue #107578 · flutter/flutterBy default, Flutter’s text selection toolbar shows cut, copy, paste, and select all. However, on native platforms…github.com

Android 可以自定義選單(長按文字時出現的選單)的選項， Flutter 的TextField選單現在包含了這些功能。

Native assets feature#

如果對 Flutter 與其他語言的函數的互通性感興趣，現在可以透過 Android 上的 Native assets 執行 FFI 調用。

☂️ Native assets support · Issue #129757 · flutter/flutterNative assets support in Flutter MacOS, iOS, Linux, and Windows is available on the master channel behind an…github.com

Texture Layer Hybrid Composition (TLHC) mode#

現在使 Google Maps 和文字輸入放大鏡在 TLHC 模式下運作，這意味著應用程式具有更好的效能。

這項工作不包括框架或引擎下的提交，但大家可以在 PR 5408 中看到這項工作，以及測試 THLC 的步驟。

Fix Google Maps rendering issues in TLHC mode when using LATEST renderer by johnmccutchan · Pull…The Google Maps LATEST renderer always uses a TextureView. We can use a signal from this TextureView to perform view…github.com

iOS#

Flutter iOS native fonts#

Flutter 文字現在在 iOS 上看起來更緊湊、更原生。根據蘋果設計指南，iOS 上較小的字體應該更加分散，以便在行動裝置上更容易閱讀，而較大的字體應該更加緊湊，以免佔用太多空間。之前，Flutter 在所有情況下都錯誤地使用了更小、間距更大的字體。

DevTools#

DevTools updates#

在 DevTools 中新增了 Flutter deeplink validator，驗證 Android 上的 Deep Link 設定
在「Enhance Tracing」選單中新增了一個選項 Tracking platform channels，用於追蹤 platform channel，對於套件開發很有幫助