讓人驚艷的 Flutter Forward,釋出 Flutter 3.7 和 Dart 2.19
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
Dart 3a and Future
新增 Records
集合型態,回傳值可以是匿名且多數個,不需要獨立的 Class 來紀錄和消耗,很像是熟知的 Tuple 寫法
新增 Patterns,可以在 switch case 中進行複雜的格式比對
- 支援 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);
});
}
}
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 能呈現的效果真豐富呀
Other Reminds
- 現在 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 這個技術,以後也希望能認識各地的開發者,技術與文化交流一下,我們真的還要再加把勁,雖然成長比較緩慢但會越來越好的,你說是吧?!
- 學會運用 Flutter Widgetbook,該管好自己和公司的元件庫了!
- 剛進入 Flutter 嗎?適合初學者食用,GetX 是否適合你呢!
- 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.1
- 教你為 Riverpod 2.0 撰寫 Flutter 測試 part.2
- 輕鬆了解 Isar NoSQL DB,用它來實作 Flutter 資料庫吧!
- Flutter 輕鬆實作 i18n,使用 easy_localization_generator 就對了
- Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.1
- Flutter CICD 使用 Gitlab Runner 和 App Center 實作 part.2
- 使用 CodeMagic 和 Firebase 實現 Flutter CICD
- 輕鬆完成Flutter開發環境,最新版!
- 實作Flutter多變有趣的滾動效果CustomScrollView!
- 如何在Flutter使用 Makefile 節省你的時間?
- Easily understand StatefulWidget LifeCycle of Flutter
- “freezed” makes model class strong and easily
- 提高Flutter性能的小技巧!(一)
- 提高Flutter性能的小技巧!(二)
- 提高Flutter性能的小技巧!(三)
- What are Async and Isolates in Flutter?
- LoadBalancer is optimization for Isolates in Flutter
- Riverpod 輕鬆學,原來這麼好用!
- Riverpod 輕鬆學(二),一些進階用法!
About
- GitHub: chyiiiiiiiiiiii
- Instagram: flutterluvr.yii
- Linkedin: yiichenhi
- Youtube: Yii
- Youtube: 一起饅頭(美食頻道)
- Email: ab20803@gmail.com
Contribution
如果覺得文章不錯的話可以贊助,讓我有更多動力和熱情分享學習紀錄和生活!請我喝一杯咖啡吧~
希望有幫助到你/妳,歡迎追蹤我,方便瀏覽最新的文章~