讓人驚艷的 Flutter Forward，釋出 Flutter 3.7 和 Dart 2.19

這篇寫於 2023 年。工具和 API 變化很快，部分步驟可能已經不適用。

Impeller, WASM, Element Embedding, and more

Material 3#

接近完整支援，可以安心使用，在 ThemeData 使用 useMaterial3 = true，元件即可切換成新的風格，接下來搭配 ColorScheme api 完成專案的配色

ThemeData ( 
    useMaterial3 : true, 
    colorSchemeSeed : Colors.blue, 
)

iOS release validation#

iOS 發布的分析與驗證，使用 build 操作時會幫忙檢查每個細節部分是否有完成和正常

flutter build ipa

https://medium.com/flutter/whats-new-in-flutter-3-7-38cbea71133c

Dart 3a and Future#

新增 Records 集合型態，回傳值可以是匿名且多數個，不需要獨立的 Class 來紀錄和消耗，很像是熟知的 Tuple 寫法

新增 Patterns，可以在 switch case 中進行複雜的格式比對

https://medium.com/dartlang/dart-3-alpha-f1458fb9d232

Introducing Dart 3 alphaPreview the most productive, portable, and approachable version of Dart yet. Now available for early testing and…medium.com

支援 100% sound null safety，對於專案的穩定性會有一定的提升，這部份也讓老舊專案面臨著很大的挑戰
支援 WASM(WebAssembly) Web，大大提升運行速度以及體積優化，第一個支援 Dart GC 的 WASM 應用
支援 RISC-V Linux，在新的平台架構上運行 Flutter

Impeller#

Impeller Engine，擁有更好的性能表現，支援完整3D效果。本身透過 Metal、Vulkan 和 iOS、Android 的 Low level api 實作，使用 precompile 減少 shader 編譯導致的丟幀，在複雜且多動畫的情境上能達到順暢

預計在下個穩定版本會將 Impeller 做為預設的渲染引擎，取代原本的 Skia，不過只會先支援 iOS，Android 還在進行中。可以透過以下指令運行 Impeller 引擎

flutter run —enable-impeller

以下為比較範例，左邊為目前的 Skia 引擎，右邊則為新的 Impeller，在使用 SVG 圖像的複雜呈現下，Impeller 大部分時候都能保持 60 幀順暢，可以看到畫面完全不卡頓，很驚人的性能

官方展示了如何在裝置上運行 3D，使用 glb 檔案和模型搭配很少的代碼完成 3D 效果，支援 hot reload 即時更新，並在 iPhone 6 上運行了 3D 遊戲場景，透過 Impeller 達到順暢效果，對於舊機也非常友善。3D 對跨平台領域是很大的躍進，更有利於遊戲開發者，能在 Flutter 上展現很多酷炫的想法

Element Embedding#

支援 Web 與 Flutter 集成，將 Flutter 嵌入原生網頁，像是 Web component 一樣，化身為一個 div 區塊，一個 Web DOM 元件，能與 JavaScript 互相溝通與控制狀態，達到 UI 同步更新，還能使用 CSS 來控制 Flutter div 的樣式，完全不影響性能以及呈現

Flutter 開發時，使用 @JSExport註解任意函式，然後從 JavaScript 直接呼叫，進行指定操作

@js.JSExport()
void increment() {
  if (_currentDemoScreen == DemoScreen.counter) {
    setState(() {
      _counterScreenCount++;
      _streamController.add(null);
    });
  }
}

samples/experimental/element_embedding_demo at main · flutter/samplesThis package contains the application used to demonstrate the upcoming Flutter web feature: “Element Embedding”. This…github.com

Custom Shaders#

除了 Android、iOS，Flutter Web 也會支援 Pixel Shader，掌握像素的呈現，擁有更多自定義的 UI 以及圖像效果

FFIgen & JNIgen#

Dart 可以直接與 iOS(Object C) 和 Android(Java) 原生 API 互動，不需要經由套件操作 MethodChannel 存取原生資料，使用 Codegen 方式產生相關的類別和方法，直接與原生互動，省略了套件與中間溝通的程式碼

flutter pub run ffigen --config ffigen.yaml

Holobooth Web App#

Flutter 與 VGV 知名開發團隊合作，製作出很有趣的網頁應用 Holobooth，使用了 Firebase、MediaPipe、TensorFlow 和 Rive，透過前置鏡頭掃描你的臉部，經由 AI 了解你的表情、動作，整理出來的數據與動畫做綁定，觸發動畫更新，呈現出的虛擬 Dash 會跟我們互動，最後還可以錄製 Dash Gif 和影片跟大家分享。是一個很有趣的項目，另外 Rive 能呈現的效果真豐富呀