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

Yii Chen
Flutter Formosa
Published in
11 min readJan 27, 2023

--

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 寫法

https://youtu.be/zKQYGKAe5W8

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

https://youtu.be/zKQYGKAe5W8
https://medium.com/dartlang/dart-3-alpha-f1458fb9d232
  • 支援 100% sound null safety,對於專案的穩定性會有一定的提升,這部份也讓老舊專案面臨著很大的挑戰
  • 支援 WASM(WebAssembly) Web,大大提升運行速度以及體積優化,第一個支援 Dart GC 的 WASM 應用
  • 支援 RISC-V Linux,在新的平台架構上運行 Flutter
https://youtu.be/zKQYGKAe5W8

Impeller

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

https://youtu.be/zKQYGKAe5W8

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

flutter run —enable-impeller

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

https://youtu.be/Z7v-YRdHusM

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

https://youtu.be/zKQYGKAe5W8

Element Embedding

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

https://youtu.be/zKQYGKAe5W8
https://youtu.be/zKQYGKAe5W8

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

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

Custom Shaders

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

https://youtu.be/zKQYGKAe5W8

相關套件

FFIgen & JNIgen

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

flutter pub run ffigen --config ffigen.yaml
https://youtu.be/zKQYGKAe5W8

Holobooth Web App

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

Other Reminds

  1. 現在 StelessWidget 也可以檢查 Widget 是否在 Widget Tree 上,本身的 BuildContext 有提供 mounted 屬性

2. Dart 2.19 添加新的 Isolate.run()api,針對一次性的繁重任務,不需要使用 spawn() 維護狀態,同時也簡化了 compute() 寫法,不管是同步或非同步方法都能夠處理

Official Articles

Official Videos

Conclusion

對我來說很吸引的是 Impeller、WASM Web、Element Embedding,相信 WASM 的性能會突出,雖然都還在開發中,但給予的想像與期望很多,接下來也會規劃自己的 Flutter Web,來玩些有趣的東西。

而沒想到非洲的 Flutter 社群已經很大了,很多新創都選擇 Flutter 這個技術,以後也希望能認識各地的開發者,技術與文化交流一下,我們真的還要再加把勁,雖然成長比較緩慢但會越來越好的,你說是吧?!

About

Contribution

如果覺得文章不錯的話可以贊助,讓我有更多動力和熱情分享學習紀錄和生活!請我喝一杯咖啡吧~

https://www.buymeacoffee.com/yiichenhi

希望有幫助到你/妳,歡迎追蹤我,方便瀏覽最新的文章~

--

--

Yii Chen
Flutter Formosa

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