這次 Flutter 3.10 與 Dart 3 又強大了多少？Google IO 告訴你

Yii Chen

Follow

Published in

Flutter Formosa

14 min readMay 12, 2023

--

今年的 Google I/O 在位於 Mountain View, California 的總部進行全球直播，最期待的當然是 Flutter 與 Dart 的改版，出現了 Flutter 3.10 與 Dart 3，最大的事情應該就是 Dart 3 大升級，補上了大家期望的語言特性，讓它更全面。而 Flutter 就是持續兌現承諾，讓許多東西穩定釋出，像是 Impeller、Web、Wasm 的改進。還是先感謝官方與所有開發者，有大家的貢獻，Flutter 才能持續壯大並幫助更多人!廢話不多說，我們趕快瀏覽今年 IO 有什麼吧～

Flip Game

這次 Google 和 VGV 團隊推出了一個翻轉卡牌遊戲，每次的版本釋出總會呈現出一些驚喜給大家，裡面的主要人物包括 Dash、Sparky、Android 以及恐龍 Dino，主要使用 Flutter、Firebase、Google Cloud、MakerSuite 和 PaLM AI 完成。整體 UI、效果和趣味性都很棒，還結合排行榜，讓大家可以爭奪名次

Dart 3

包含三個主要改進

完成了 100% sound null safety
添加了 Record、Pattern 和 class modifier 新語言特性
對未來 Flutter Web 提供 preview，通過 Wasm 編譯擴大了對網絡原生代碼的平台支持，結合 Dart 運行

詳細資訊請看：

Announcing Dart 3

100% sound null safety. Records, patterns, and class modifiers. And a peek into the future.

jeetwincasinos.com

Flutter Core

Beautiful — 掌握螢幕上的每個像素，搭配豐富的 UI 元件庫
Fast — 硬體加速圖形的支援
Productive — 使用 Hot-Reload 和 Devtool 實現高生產力
Portable — 可移植的，Single shared code base 支持多平台
Open — 完全開放原始碼

Flutter Apps from Official and others

Flutter 在六個平台（Android、iOS、Web、Windows、macOS 和 Linux）上，已經有超過一百萬個應用使用 Flutter。以下是相關應用：

Nearby Share，它是支援 Windows Desktop，允許和 Android 設備之間無線共享照片和文件
Google Play Console，目前處於公開測試階段，讓開發者查看 APP 統計資訊，還能回覆評論
Google Cloud，隨時監控我們的雲端服務
Google Classroom，可用來創建和發放互動式的作業，提供即時回饋幫助學生。本身使用 Impeller 渲染引擎，實現快速、無卡頓的 UI，啟動時間更快。目前 iOS 已推出
SNCF Connect，法國的火車旅行應用
Agapé，維護與朋友、家人關係、健康的應用
Betterment，美國的金融產品，幫忙管理民眾資產

Material 3

持續讓越多元件升級成 M3 風格的樣式，在下一個穩定版本中，useMaterial3 默認為 true，到時候就不需要自行設置了。

另外有新的配色方式 ColorScheme.fromImageProvider()，可以從圖片擷取生成。以下是新的元件升級：

Dropdown Menu
Navigation Drawer
TabBar，添加了 Secondary Tab 呈現
SnackBar
SearchBar
TimePicker、DatePicker

http://jeetwincasinos.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

iOS、macOS

Spell Checking → TextField 支援拼寫檢查
Wireless Debugging → 在沒有 USB 線接電腦的情況下使用 Hot Reload

啟用方式： XCode → Window → Devices and Simulators → Devices → Connect via network

DevTools

UI 都使用 Material 3 重新設計，提高 Accessibility

1. Memory View

Diff Snapshots 分頁 → 查看互動前後的內存狀況，並且在 APP 運行中，不需要像原本需要暫停

2. Trace Viewer

使用 Perfetto 開源工具重寫，可處理更多數據，同時性能表現更好
可使用 WASD 操控
可框選多幀的工作任務，查看過程的詳細資訊
可使用 SQL 查詢，擷取特定數據

Pub.dev

過濾有螢幕截圖的套件，搜尋使用 has:screenshot
可設置 5 個主題標籤，方便瀏覽相關套件

SLSA Security

Google 支持的供應商中立協議(vendor-neutral initiative)，提供標準和技術來確保產品的完整性
已達成 Level 1，在被信任的建置平台上實驗自動化 SDK 建置，並且所有的發布都需要多人批准，附帶紀錄
目標為 Level 2 防止篡改，還有 Level 3 附加控制

Wide gamut images

支援 iOS 廣色域圖片
使用 P3 color，比 sRGB 多 25% 色彩空間
體驗上更鮮豔、真實
設置方式，在 info.plist 加上 FLTEnableWideGamut，設為 true

Impeller Engine

替換 Flutter Engine 的 Rendering 部分
使用 Tessellation 曲面細分演算法，搭配 GPU，避免運行時的卡頓
啟用 Lossy texture compression 可在不影響真實度的情況下減少記憶體使用
解決了需編譯著色器並加載到GPU的需求。一般使用 Fragment shader 處理三角形，開啟和關閉三角形的每個像素，並對範圍外的三角形進行裁剪，最後進行抗鋸齒處理，但效果可能不一致。Shader compliation 的情境在面對複雜動畫時常常有一開始卡頓後面順暢的問題，因為剛開始需要時間處理
接下來將注意力轉向 Android 的 preview support，底層使用 Vulkan API，並支持舊設備的向後兼容模式

Flutter WEB

使用 CanvasKit rendering engine，降低三分之一整體大小。介紹一下 CanvasKit，它是由 WebAssembly 編譯的開源 Skia 庫
更快的載入時間，減少 40% 以上
Dart compiler 實現 tree shaking，在編譯期間去除未使用的 Icon 和 Font 檔案
Fragment Shader 以 stable 釋出，實現 Mobile 與 Web 都支援。可控制每個像素的顏色值
Element Embedding 以 stable 釋出，可遷入任何的 Web app 與 CSS 互動，例如：嵌入至原有的 Angular app

Flutter WEB & WebAssembly ( Wasm )

Wasm is a Binary instruction format
作為高階語言的編譯目標
第一個圍繞 CanvasKit 和 WebAssembly 等新型網絡技術進行架構設計的框架。使用 Wasm 來分發 CanvasKit，將 Dart 和 Flutter 編譯成 Wasm
Wasm 本身不支援 GC，對於 Dart 擁有 GC 的語言是一種阻礙，而新的 WasmGC 架構可讓 Dart 與 Flutter 使用。相比編譯成 JavaScript，Wasm 模組更底層，更接近機器代碼，可以提供更高的性能、更少的卡頓和更一致的幀率，執行速度比原本快了三倍

Usage

使用 master 分支
運行時使用 --wasm

flutter build web --wasm

3. 需要在 Chrome 網址列輸入 chrome://flags/ ，將 WebAssembly Javascript 和 WebAssembly Garbage Collection 開啟，重啟 Chrome 後網頁就能正常顯示了

圖像解碼的優化

支援 APNG 格式，可使用現有 API 來載入圖片
添加新的加載 API，instantiateImageCodecWithSize()，處理 AspectRatio 未知、RenderBox約束、原有的 AspectRatio 約束的情況

Google IO which I followed

WebGPU

完全釋放 GPU 性能
筆電、桌電、手機都適用
支援本地運算，節省成本、提升速度
適合運行 AI 模型、複雜圖像
與原有的 WebGL 相比，速度快10秒以上

Bard

Bard AI 的優勢是與自家產品的高整合性，包含 Google Doc、Sheet、Map 等等，例如：可以請他規劃行程、尋找地點，接著顯示 Google Map 並進行標示，並包含圖片顯示。另外對於工程師來說，我詢問了 Flutter 相關開發問題也能給予良好回覆，在下圖範例中我提問了 Shader 如何實作，它能給予階段、區塊程式碼，並針對屬性提供個別解釋，對於參考或是快速理解概念來說非常方便，很期待之後的更新

Other News

2023 Google Mobile Ads Updates for Flutter

We added new GMA Flutter features based on your feedback!