Flutter 3.22 & Dart 3.4 改版重點

Yii Chen
Flutter Taipei
Published in
23 min readMay 15, 2024

--

不能錯過的好消息

隨著 Google IO 年度大會的到來,意味著 Dart 與 Flutter 新版推出。順便整理了本次的更新重點,以簡潔的方式說明,希望讓開發者們快速地了解它們,掌握最新資訊。非常建議大家有時間的話,可以去閱讀官方原文。

Dart 3.4

WebAssembly & Wasm

正式 stable 支援 Flutter Web 編譯成 WebAssembly,Wasm 為一種可移植的、平台中立的二進位程式碼格式。下一步工作將在純 Dart 應用中支援 Wasm,並完成一些缺少的功能(例如:deferred loading)。

flutter build web --wasm

目前可在 Chrome(Chromium 119 以上版本)和 Firefox (120 以上版本) 中運行。

同時,持續改善 Web 和 JavaScript 有關互通性的套件,以最好的方式支援 Wasm。

Macros: 提升抽象的層次

中文稱為“巨集”,是一種程式碼生成的解決方案。完全整合到 Dart 語言中,並由 Dart 工具在背景自動執行,為開發提供最大的效能、效率和生產力。搭配 hot reload,整個過程順暢不需等待,能有效地提升開發體驗。

開發人員經常遇到的情境就是 JSON Serialization, 需要很多的乏味的模板代碼。可能會依賴 JsonSerializable 類似套件,透過外部工具進行程式碼的生成工作。

@JsonCodable 巨集能協助我們開發者改善這個情況。它負責產生兩個成員函數,一個為 toJson()序列化和一個fromJson()反序列化建構子。

@JsonCodable()
class Vehicle {
final String description;
final int wheels;
Vehicle(this.description, this.wheels);
}
void main() {
final jsonString = Vehicle('bicycle', 2).toJson();
print('Vehicle serialized: $jsonString');
}

如果 Macros 的支持和進展順利,對性能和穩定性充滿信心,最終目標是讓 Dart 開發者能夠定義自己的巨集。

目前 JsonCodable 在實驗階段,還不穩定。它僅適用於 Dart3.5.0-152 以上版本。

Flutter 3.22

Wasm

Wasm 現已 stable 支援,帶來了顯著的效能改進。在 M1 MacBook 上使用 Chrome 進行的內部測試中,Wonderous 應用程式的 frame rendering 時間平均提高了 2 倍,在最壞情況下提高了 3 倍。實現更流暢的動畫體驗。

引擎

  • 在 Android 上完成 Vulkan 後端
  • 更流暢的圖形性能
  • 對模糊(blur)效果和複雜路徑渲染的持續優化

在未來的版本中,Impeller 將成為 Android 預設引擎。當用戶在不支援 Vulkan 的裝置上運行時,Flutter 將自動優雅地切換到原本的 OpenGL ES 和 Skia 引擎。

官方希望開發人員都能使用 v3.22 新版,並踴躍提交有關 Impeller 發現的任何問題。並且希望能夠自信地在今年讓 Android Impeller 穩定釋出。

模糊性能

重新實作 Impeller 中的模糊處理,在基準測試中 CPU 和 GPU 時間成本減少了近一半。

Stencil-then-Cover

Impeller 轉向基於 Stencil-then-Cover 方法的新渲染策略。此方法解決了 Raster Thread 花費過多時間計算 tessellations 處理 CPU 複雜路徑的問題。改善 SVG 以及 Lottie 動畫的渲染表現,讓整體 CPU 使用率較低,GPU 使用率稍高。

Widget state properties

MaterialState已移出 Material library 並重新命名為WidgetState,不在侷限於 Material 風格,讓 Cupertino 和其他情境能共同使用。

Dynamic view sizing

改善 ViewConfiguration API,專注於動態視圖的調整,有利於開發人員建立 responsive layout,確保 UI 在各種螢幕上具有更好的適應性。

Improved form validation

更靈活的表單驗證方法,讓開發人員可以建立更強大的輸入處理,同時增強可用性和安全性。

https://github.com/flutter/flutter/pull/135578/files

Covariants in 2D APIs

減少 2D 圖形 API 中對類型轉換的需求,可以簡化開發流程並提高效能,對於遊戲和複雜動畫非常重要。

Flavor-conditional asset bundling

現在使用 flavor 時,可以設定每個 flavor 運行時需要載入的 asset 資源。可以防止應用體積因未使用的資源而變得臃腫。

Transformation of assets using Dart packages

可以轉換 asset 資產檔案到使用的 Dart Package。

Android

Deep linking

在上一個 Flutter 3.19 版本中,DevTools 中引入了 deep link validator 工具,支援檢查 Android 應用程式的 Web 配置。在這個版本中,添加了一組新功能來協助驗證 Android 清單檔案中的設定。

目前 validator 僅支援 Android,未來將會擴展到 iOS

Predictive back gesture

增加了對 Android 即將推出的 predictive back 有更多支持,用戶可以在返回手勢期間查看先前的應用程式。

return MaterialApp(
theme: ThemeData(
brightness: Brightness.light,
pageTransitionsTheme: const PageTransitionsTheme(
builders: {
// Use PredictiveBackPageTransitionsBuilder to get the predictive back route transition!
TargetPlatform.android: PredictiveBackPageTransitionsBuilder(),
},
),
),
home: const MyApp(),
);

Platform views improvements

由於 Android 14 的問題,使用舊版 Flutter 建置的應用程式可能無法在裝置上正常運作。

Flutter 3.22 修正了此問題並提升了 Android native components 的整體效能。因此官方提醒,請務必使用 Flutter 3.22 重建並發布您的應用程式。

此更新還包括 behind-the-scenes improvements,使 Android 上的 Platform views 更加可靠和高效能。

End of support for Android KitKat

Flutter 支援的最低 Android 版本現在是 Lollipop (API 21)。Flutter 3.22 將不再支援 Android KitKat (API 19) 的裝置。

iOS

Platform view performance

官方知道 iOS 上的 Platform view 效能一直是痛點,尤其在 Scrolling 元件中嵌入(例如:廣告、地圖)最為明顯。

  • 減少 GPU 使用量: GPU 使用量減少了 50%,帶來更流暢的使用者體驗
  • 改進 frame rendering:平均渲染時間減少了 1.66 毫秒 (33%)
  • 最小化卡頓:最壞情況下的幀渲染時間減少了 3.8 毫秒 (21%)

Ecosystem

Vertex AI for Firebase Dart SDK preview

Vertex AI for Firebase 已發佈預覽版,其中包含 Dart SDK。讓開發者能夠使用 Gemini API 為 Dart 或 Flutter 應用程式建立生成式 AI 功能。同時,經由 Firebase,它與 Firebase App Check 集成,可保護 API 被安全調用,並保護後端免受計費欺詐、網路釣魚和應用假冒等嚴重威脅。

💡 安裝套件

flutter pub add firebase_vertexai

💡 開發

import 'package:firebase_vertexai/firebase_vertexai.dart';
import 'package:firebase_core/firebase_core.dart';

await Firebase.initializeApp();
// Initialize the Vertex AI service and the generative model
// Specify a model that supports your use case
// Gemini 1.5 Pro is versatile and can accept both text-only and multimodal prompt inputs
final model =
FirebaseVertexAI.instance.generativeModel(modelName: 'gemini-1.5-pro-preview-0409');

// Provide a prompt that contains text
final prompt = [Content.text('Write a story about a magic backpack.')];

// To generate text output, call generateContent with the text input
final response = await model.generateContent(prompt);
print(response.text);

Google 原本提供的 AI Dart SDK (google_generative_ai)仍然存在,但建議僅用於原型設計。高級實現能選擇使用新的 Vertex AI SDK 開發。

DevTools updates

提供 devtools_app_shared 開發者套件。可以將擴充功能連接到新的 Dart Tooling Daemon (DTD) ,這允許 DevTools extensions 存取由其他 DTD 用戶端(例如 IDE)註冊的公開方法,並允許存取 minimal file system API 以便於開發專案。

Google Mobile Ads SDK for Flutter

xGoogle Mobile Ads for Flutter 剛剛發布了版本 5.0.1 的重大更新!

增強了對使用者訊息傳遞平台 (UMP) SDK 的支援,讓開發者更輕鬆地獲得用戶對個人化廣告的同意。此新版本引入了幾個新的 API 來簡化收集過程。

官方擴大了中介合作夥伴(包括UnityMetaAppLovinIron SourceMintegralPangleDT ExchangeInMobiLiftoff )合作,拓寬了用戶的廣告獲利視野。

Breaking Changes and Deprecations

ColorScheme.fromSeed

如果seedColor使用的ColorScheme.fromSeed色度值較高,則ColorScheme可能會產生缺乏活力的柔和調色板。為了確保輸出顏色與種子顏色的預期感覺緊密匹配,請考慮設定 DynamicSchemeVariantDynamicSchemeVariant.fidelityDynamicSchemeVariant.content。這些選項產生的調色板與原始種子顏色更加一致。

ColorScheme.fromSeed(
seedColor: Color(0xFF0000FF), // Bright blue
schemeVariant: FromSeedVariant.fidelity,
)

Deprecations removed in 3.22

此版本中的重大變更包括已棄用的 API,這些 API 在 v3.19 發布後過期。可以使用 Dart CLI 解決修復工作,或是直接從新的 IDE 功能執行。

dart fix

若要查看所有受影響的 API 以及其他相關資訊,請查慨 3.19 棄用指南。

企業應用

Virgin Money

英國,金融機構

GEICO

美國,保險公司

Universal Parks

美國,環球影城

遊戲

為 Flutter 遊戲開發者提供新資源,幫著開發者強化用戶體驗

SoLoud

SoLoud 音訊引擎、套件。與 Marco Bavagnoli 合作開發,提供低延遲、高效能的聲音。

官方還創建了一個音樂代碼實驗室:Add sound and music to your Flutter game

Codelabs

🕹️在高效的情境下產生大範圍的填字遊戲內容:Build a word puzzle with Flutter

🕹️️️ ️能優化 Flutter Web 遊戲載入速度的最佳指南:Best practices for optimizing Flutter web loading speed

Flutter Global Gamers Challenge 頒獎

Flutter 2024 年 1 月舉辦的遊戲競賽與活動,與 Global Citizen 合作,強調 Flutter 設計、建構,以及專注永續發展的遊戲。目的在激勵玩家為環境採取小而有意義的行動。

獲獎名單與影片都釋出了,一起來了解這些厲害的參賽作品吧!

同時跟大家分享我們團隊的作品 ”Better World”,在這次活動中獲得了 Best Integration 1st Place。令人開心的一件好消息,同時也獲得能和 Google Wallet 團隊交流的機會,非常感激,很棒的經驗。

Flutter 版本升級🔝

flutter upgrade

--

--

Yii Chen

Flutter Lover || Organizer FlutterTaipei || Writer, Speaker || wanna make Flutter strong in Taiwan. https://linktr.ee/yiichenhi