這次 Flutter 3.10 與 Dart 3 又強大了多少？Google IO 告訴你
Published in
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 運行
詳細資訊請看：
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
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 --wasm3. 需要在 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
Reference
- https://www.youtube.com/watch?v=yRlwOdCK7Ho&ab_channel=Flutter
- https://www.youtube.com/watch?v=a0Da8TNMTyM&ab_channel=Flutter
- https://www.youtube.com/watch?v=r8T0SnwHRNI&t=2050s&ab_channel=GoogleforDevelopers
- https://www.youtube.com/@flutterdev/videos
- https://medium.com/dartlang/announcing-dart-3-53f065a10635
- https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73
- https://medium.com/flutter/racing-forward-at-i-o-2023-with-flutter-and-dart-df2a8fa841ab
Articles
- 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
- 輕鬆完成Flutter開發環境，最新版！
- Easily understand StatefulWidget LifeCycle of Flutter
- “freezed” makes model class strong and easily
- 提高Flutter性能的小技巧！(一)
- What are Async and Isolates in Flutter?
- LoadBalancer is optimization for Isolates in Flutter
About
- GitHub： chyiiiiiiiiiiii
- Instagram： flutterluvr.yii
- Linkedin： yiichenhi
- Youtube： Yii
- Youtube： 一起饅頭(美食頻道)
- Email： ab20803@gmail.com
Contribution
如果覺得文章不錯的話可以贊助，讓我有更多動力和熱情分享學習紀錄和生活！請我喝一杯咖啡吧～
希望有幫助到你/妳，歡迎追蹤我，方便瀏覽最新的文章～
