Flutter 3.19 & Dart 3.3 改版重點！
不能錯過的好消息
又到了 Flutter 改版的時刻，整理了本次的更新重點，以簡潔的方式說明，希望讓開發者們快速地了解它們。也建議大家有時間的話，可以去閱讀官方原文。
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 的互通性特別有用，可以直接使用原生類型，無需創建包裝器和花費間接的成本。
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);
}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
Google AI Dart SDK
為了迎接 Gemini AI，推出新的 pub.dev 套件 google_generative_ai 以及開發文件，讓大家能輕易地夠過 Flutter 建立自己的 AI 功能，例如：智慧聊天機器人、視覺圖像的搜尋和互動功能，擁有與眾不同地用戶體驗。
官方範例：
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);
};另外，可以操作 AI Studio 體驗 Gemini 給予的協助，也能取得自己的 API Key，結合自身產品。
右上角有一個 Get code 選項，讓開發者能直接複製對話內容的程式碼，針對你的喜好語言進行選擇，直接複製到專案裡就完成功能的開發了。不過目前還沒有 Dart，近期官方會釋出，大家可以期待一下。
目前許多團隊都已經在產品中整合 Gemini Model
- LeanCode 建立了arb_translate 套件，允許開發人員自動執行翻譯 arb 檔案的工具，有效節省大量時間 (迫不及待想嘗試了！)
- We Spot Turtles! 建立的 Flutter 產品，完成拯救海龜即將滅絕的使命。他們也參與了 Google Play 的 #WeArePlay 活動
- AutoGPT 是一個實驗性開源專案，擁有跨 iOS、Android、Web、macOS 和 Windows 運行的 Flutter 應用
有關 google_generative_ai 的套件說明，可以閱讀
撰寫的文章。官方也歡迎大家如果有開發 Gemini Model 的產品，如果要發文，要搭配 #BuildWithGemini 主題標籤，協助大家有曝光的機會。
以下提供相關文章：
Flutter Roadmap
從 2020 年以來，Flutter 每年都會發佈路線圖，讓所有開發者能了解團隊的每一步與後續發展。而今年的 2024 Roadmap 已釋出，官方一樣持續專注於相同目標，創建一個最受歡迎、成長最快、生產力最高的跨平台(多端)UI 框架，以建立豐富的應用程式體驗。而到目前為止，非 Google 貢獻者的數量已經超過了 Google 員工的數量。
Flutter Framework
Scrolling improvements
原本，如果使用兩根手指拖曳，滾動速度會加快兩倍。而我們現在可以配置ScrollBehavior 為 MultiTouchDragStrategy.latestPointer，獲得與手指數量無關的滾動行為，維持相同速度。
解決 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 在所有平台上都完全相同。
SemanticsProperties accessibility identifier
新的 Accessibility identifier 為SemanticsProperties，在 Native 原生的層次結構中提供識別。在 Android 上，顯示為resource-id。在 iOS 上，設定UIAccessibilityElement.accessibilityIdentifier。
Increased access to text widget state
對TextField添加了 MaterialStatesController 和 TextFormField，讓開發者可以監聽 MaterialState 狀態更新。
UndoHistory stack
修正了撤銷歷史記錄在日文鍵盤上可能消失的問題。
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。
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。
Backdrop filter speedups
此版本對 Backdrop Filters 和 Impeller 的 Blur 進行了一些不錯的性能改進。特別是，開源貢獻者 @knopp 注意到 Impeller 錯誤地請求了讀取螢幕紋理的功能，刪除此功能可以改善包含多個背景濾鏡的場景。
此外，Impeller不再將 stencil buffer 儲存在每個背景濾鏡上。相反，任何影響操作的剪輯都會被記錄下來，並在恢復背景濾鏡的保存層時重新處理到新的模板緩衝區中。
Android
Deeplinking Web Validator
官方從開發人員那裡了解到，深度連結始終難以實現，容易出錯。因此創建了一個驗證工具來幫助開發人員了解哪些連結配置不正確，並提供實作指導。
Flutter deeplink validator 的早期版本現已推出！
在此版本中，支援 Android 上的 Web 檢查，可驗證資源檔案assetlinks.json。開發人員可以開啟 DevTools，點擊進入Deep Links 選項，然後匯入包含深層連結的 Flutter 專案，Validator 會告訴您 Web 檔案是否配置正確。
支援 Share.invoke
Android 之前缺少 TextField 和 View 上的預設 Share 按鈕，在此版本中新增了它，確保所有預設按鈕在每個平台上都可用。
Custom system-wide text selection toolbar buttons
Android 可以自定義選單(長按文字時出現的選單)的選項， Flutter 的TextField選單現在包含了這些功能。
Native assets feature
如果對 Flutter 與其他語言的函數的互通性感興趣，現在可以透過 Android 上的 Native assets 執行 FFI 調用。
Texture Layer Hybrid Composition (TLHC) mode
現在使 Google Maps 和文字輸入放大鏡在 TLHC 模式下運作，這意味著應用程式具有更好的效能。
這項工作不包括框架或引擎下的提交，但大家可以在 PR 5408 中看到這項工作，以及測試 THLC 的步驟。
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，對於套件開發很有幫助
- 現在，沒有連接的應用程式時，Performance 和 CPU profiler 螢幕現在可用。可以重新載入先前從 DevTools 儲存的相關資料，方便進行檢視
- VS Code 中的 Flutter 側邊欄現在能夠在當前專案未啟用的情況下啟用新平台，並且側邊欄中的 DevTools 選單具有在外部瀏覽器視窗中開啟 DevTools 的選項。
要了解更多信息，請查看 DevTools 2.29.0、2.30.0 和 2.31.0 的 release notes。
Desktop
Windows Arm64 support
Windows 上的 Flutter 現在開始支持 Arm64 架構，在運行上更有效率。目前仍處於開發階段，可在 GitHub 問題 #62597 上追蹤進度。
Ecosystem
Required reason privacy manifest
Flutter 現在在 iOS 上包含了隱私清單，以滿足即將推出的 Apple 要求。
Progress of the Flutter and Dart package ecosystem
可閱讀 1 月份關於 Flutter 和 Dart 套件生態進展的部落格文章。
Deprecations and breaking changes
Dropping Windows 7 and 8 support
在 Dart 3.3 和 Flutter 3.19 版本上終止對 Windows 7 和 8 的支持，從而專注於最新技術。這項轉變符合微軟的策略，使團隊能夠在現代作業系統上增強 Flutter，在受支援的 Windows 版本上打造更安全、更有效率且功能豐富的開發環境。
Impeller dithering flag
全域標誌Paint.enableDithering已被刪除。
Deprecate iOS 11
由於呼叫某些網路 API 時發生 runtime crash，Flutter 不再支援 iOS 11，這表示 Flutter 3.16.6 及更高版本建置的應用程式將無法在這些裝置上執行。
其他 API 的改動
請閱讀官方文件
本次是小型的改版更新，主要著重在問題修復與優化上。而新添加的 Dart Extension Types、Flutter deeplink validator、GPU tracing，對於開發上都有很大的幫助，如何便利地協助專案，之後再整理一些實際情境跟大家分享。
另外，隨著 google_generative_ai 套件的釋出，讓 Flutter AI 應用的產出會有更大的成長，可以期待之後社群與開發者們的作品分享，趕緊透過 AI 讓自身產品變得獨特吧。有很多好玩的點子在腦中出現了 :)
Flutter 版本升級🔝
flutter upgrade
Articles
- Use Dart 3 to Improve Development Skills. More Examples and Tips.
- Flutter December 2023 💙 Flutter Monthly
- Flutter November 2023 💙 Flutter Monthly
- Get Familiar with Dart 3, Make your Life Easier!
- Flutter 3.16 & Dart 3.2 重點整理來了！
- Flutter October 2023 💙 Flutter Monthly
- Flutter September 2023 💙 Flutter Monthly
- Flutter August 2023 💙 Flutter Monthly
- Flutter July 2023 💙 Flutter Monthly
- 添加預覽影片到 App Store，提升品牌形象
- Fluttercon 2023 技術研討會
- Flutter 六月大小事
- Wow! Flutter runs on Apple Vision Pro!
- 這次 Flutter 3.10 與 Dart 3 又強大了多少？Google IO 告訴你
- Flutter Meetup #1 聚會有什麼？還有 Flutter 四月大小事！
- 提升開發效率的好物，Mason 讓你輕鬆撰寫自定義模板！
- 教你製作強大的 Rive 動畫，完成一隻 Flutter Dash，在 APP 跟它互動！
- Flutter 如何根據 Flavor 多環境載入對應的 Firebase Config
- Isolates 在 Flutter 3.7 & Dart 2.19 的升級，你該知道一下！
- 讓人驚艷的 Flutter Forward，釋出 Flutter 3.7 和 Dart 2.19
- 學會運用 Flutter Widgetbook，該管好自己和公司的元件庫了！
- 剛進入 Flutter 嗎？適合初學者食用，GetX 是否適合你呢！
- 你知道 Maestro 嗎，兼具人性的自動化測試框架，Flutter 品質就靠它了 — Part 1: 介紹與使用
- 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.1
- 輕鬆了解 Isar NoSQL DB，用它來實作 Flutter 資料庫吧！
- Flutter 輕鬆實作 i18n，使用 easy_localization_generator 就對了
- Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
- 使用 CodeMagic 和 Firebase 實現 Flutter CICD
About
- GitHub: chyiiiiiiiiiiii
- Twitter: yiichenhi
- Instagram: flutterluvr.yii
- Linkedin: yiichenhi
- Youtube: Yii
- Email: ab20803@gmail.com
