Flutter 3.16 & Dart 3.2 重點整理來了！
不能錯過的好消息
幫大家整理了本季的 Flutter 更新重點，以中文相對白話、簡潔的方式說明，希望讓開發者們快速地了解它們。也建議大家有時間的話，可以閱讀官方原文，會有非常大的幫助哦！
Dart 3.2#
Non-null Type Promotion for final, private fields#
小更新但卻大大感動，針對 final 且 private 的屬性現在會協助自動檢查 nullable，當前面檢查確認不為 null 之後，後面的存取都被認定為有值，這時候就不需要給予 ! 承諾以及使用 ?? 給予預設值了。能有效地提升開發體驗！
主要改進了 Flow Analysis 引擎，可確認值在初始分配後就永遠不會再更新。因此，只需檢查一次就可以被認為是安全且可信任的。
原本只支援區域變數
lints and flutter_lints v3 Upgrade#
關於代碼靜態分析，改善了程式碼的分析規則，持續隨著 better practice 提升專案品質，只要透過 dart create或 flutter create 建立的專案，未來都會預設添加套件 v3 版本
新版改動，關於驗證 pubspec URL、驗證呼叫 collection api 時的參數正確等等，以下為更新日誌：
DevTools Extension#
DevTools 結合一個新的 devtools_extensions 套件，讓開發者能夠為自家的套件建立自定義工具，且直接在 DevTools 中顯示，提升開發便利性。例如：Serverpod 即將在 v1.2 版本釋出擴充功能
Dart Interoperability#
Dart 的核心是希望能夠在廣泛的平台上運行，完成順暢且安全的跨平台開發，所以 Interoperability 互通性為關鍵點。從與 C API 互動的 FFI，到目前正在努力支援與 Java + Kotlin 和 Objective C + Swift 的溝通，官方提到了一些這次改版的細節：
- 引入了
NativeCallable.isolateLocalC FFI 的建構函數，它從任意 Dart 函數建立一個 C 函數指標。Dart 部分使用Pointer.fromFunction，而它只能從 top-level function 建立。 - 更新了 Objective-C binding generator (
NativeCallable.listener)，現在可以自動處理包含非同步回呼的 API，例如：Core Motion - 改進 JNIgen 與 Java 和 Kotlin 溝通，從手動撰寫 binding 程式碼遷移到自動產生
C interop using dart:ffiTo use C code in your Dart program, use the dart:ffi library.dart.dev
Java interop using package:jnigenTo use Java in your Dart program, use package:jnigen.dart.dev
Dart to WASM(WebAssembly)#
Dart GC 已經被添加到 Wasm 標準中
對於 Flutter Web，官方完成了一個新的「Skwasm」渲染引擎。為了最大限度地提高效能，透過 wasm-to-wasm binding 將編譯後的程式碼直接連接到 CanvasKit Wasm 模組，進一步提高了幀數。
Wasm 在 Flutter Web 開發與實驗完成之前，還有一些工作要處理：
- Dual compile：產生 Wasm 和 JavaScript 輸出，並在執行時間啟用功能偵測，以支援擁有 Wasm-GC 和沒有 Wasm-GC 的瀏覽器
- Modern JavaScript-interoperability：新的 JS 互通機制，可以在 Dart Code、Browser API 和 JS Library 之間進行簡潔、類型安全的存取
- 支援 Wasm 的 Browser API：基於第二點的 JavaScript-interoperability的
package:web新套件，取代了 dart:html。在 JS Web 和 Wasm Web 上，都能輕鬆訪問 Browser API
Flutter 3.16#
The state of open source and rise of AI in 2023#
近年來越來越多的貢獻來自 Google 以外的第三方開發者，最近 Github 公布的 The state of open source and rise of AI in 2023 報告，Flutter 為所有 GitHub 開源專案中的第三名。
Company Apps#
- 瑞典，Skandia
- 波蘭，Credit Agricole 銀行APP
- 荷蘭，CZ 保險APP
- 加拿大，Kijiji 購物APP
- 美國，MarketWatch 證券APP
- 美國，Caribou Coffee 咖啡APP
- 美國，Lucid Motors 汽車APP
- 騰訊，Tencent Cloud Chat 聊天APP
Impeller Engine#
在 Flutter 3.16，Android 上的 Impeller 渲染引擎已準備好在 stable 上提供preview support 預覽。在 Flutter Gallery 基準測試中，Impeller on Vulkan 的光柵化性能大約是原本的兩倍。
目前有預覽版本可以測試，在支援 Vulkan 的 Android 裝置上試用 Impeller。
- 第一個方法，是在運行
flutter run命令時設置參數--enable-impeller - 第二個方法，在
AndroidManifest.xml文件裡設定，新增 meta-data 標籤
<meta-data
android:name="io.flutter.embedding.android.EnableImpeller"
android:value="true" />有關目前的最新進度，可以在 Impeller Project 中了解
Material 3#
Flutter SDK 的 Material 元件現在完全支援 Material 3，而且 Material 3 已經是 APP 預設樣式。新的配色方案除了美觀之外又符合 Accessibility 的對比要求，符合無障礙需求。大家可以查看官方的 Material 3 範例。
以下為使用 WasmGC 的 Material 3 網頁範例：
New TextScaler Class for Android#
TextScaler 負責管理全域文字的比例，有效支援 Android 14 的非線性字體縮放功能，來幫助視力障礙者，替換了 Text.textScaleFactor 屬性。
Mouse Scroll Wheel Support on Android#
主要讓滾輪的滾動速度與 Android 裝置上的滾動速度同步，解決滑鼠滾輪在平板或折疊裝置上操作不順暢 (原本需要大幅地滾輪移動才能使畫面有反應)
Predictive Back Navigation in Android#
Android 14 現在支援在執行後退手勢的同時「窺視」後面的內容，使用者可以決定是繼續後退還是取消手勢。現在可以透過 PopScope API 設定布林值，指示是否可以進行後退導航，在開發上非常友善。
PopScope(
canPop: _myPopDisableEnableLogic(),
onPopInvoked: (bool didPop) {
// Handle the pop. If `didPop` is false, it was blocked.
},
)iOS Edit Menu with More Options#
使用者現在可以在選擇文字後，啟動提供多種快捷動作的選單，本次更新多了 look up、search、和 share 操作。
Flutter for iOS App Extension#
Flutter 從 3.16 開始，已經可以支援 iOS APP 的擴充功能，例如：當用戶在裝置要分享東西的時候，分享清單可以顯示 APP 的操作捷徑。
Adding iOS app extensionsLearn how to add app extensions to your Flutter appsdocs.flutter.dev
SelectionArea of Text#
SelectionArea已支援使用滑鼠點擊或雙擊以及長按相關的手勢，可通過SelectionArea來使用SelectableRegion
- 點擊：在點選的位置設定調整區域
- 雙擊：選擇指定位置的文字、單字
- 雙擊 + 拖曳、長按+拖曳：擴展文字的選擇範圍
Focus Widget Control Menu Item#
現在 FocusManager 的applyFocusChangesIfNeeded API 可以恢復焦點，也就是當使用者點擊選單後，焦點會返回到開啟選單之前關注的元件。
MatrixTransition Animation Widget#
新的MatrixTransition允許在動畫數值更新時進行 Matrix 更新。輕鬆完成矩陣動畫效果，以下提供程式碼範例
DartPadAn online Dart editor with support for console, web, and Flutter apps.dartpad.dev
Use PaintPattern in flutter_test#
在 Unit Test 中，現在可以使用 PaintPattern類別驗證CustomPainter 和Decoration 等等，元件對 Canvas 進行的繪製呼叫。
expect(
find.byType(MyWidget),
paints
..circle(
x: 10,
y: 10,
radius: 20,
color: const Color(0xFFF44336),
),
);
// Multiple paint calls can even be chained together.
expect(
find.byType(MyWidget),
paints
..circle(
x: 10,
y: 10,
radius: 20,
color: const Color(0xFFF44336),
),
..image(
image: MyImage,
x: 20,
y: 20,
),
);2D Scrolling Update#
此版本改善了 2D 滾動，現在支援KeepAlive 元件，以及預設的焦點遍歷(focus traversal)和隱式捲動(implicit scrolling)。如何開發 2D 滾動，可以查看 Flutter Build Show 的最新一集：
如果想要快速使用 2D 元件的話，可以了解 two_Dimension_scrollables 套件，在 Flutter 3.13 就發布囉。
Flutter Timeline Events in Chrome DevTools#
有關 Flutter 時間軸資訊，現在已經加入 Chrome 開發面板，顯示在 Performance 頁面，讓 Flutter Web 在 Profiling 部分前進了一步
Flutter Casual Games Toolkit#
遊戲開發工具包，從 2022 發布以來一直深厚開發者喜愛，透過它有效地協助遊戲開發。在這次的改版上，新增了許多資源，讓整體更加完整，官方也列舉了一些目前市面上使用 Flutter 製作的遊戲，其中包括：
- Etermax 的 Trivia Crack
- Lotum 的 4 Pics 1 Word
- Dong Digital 的 Brick Mania
- Onrizon 的 StopotS
- I/O Pinball 彈珠臺遊戲
- PUBG Mobile 的社交場景
本次添加了三個新的遊戲模板，給予開發者更好的開發起點。其中有一個基本模板、紙牌遊戲模板、Flame 2D 運行模板，輕鬆實現遊戲轉向、碰撞偵測、物件視差和各種視覺效果
工具包 Github：https://github.com/flutter/games
在官方文件中，也新增了幾種開發教學與 CodeLab，資源非常豐富，有興趣的朋友不要錯過了
- 使用 Cloud Firestore 協助多人連線
- 使用排行榜和成就系統，提升魅力
- 使用遊戲內廣告和 in-App purchases 購買，從中獲利
- 使用 Firebase Authentication 驗證使用者資訊
- 使用 Firebase Crashlytics 收集錯誤和崩潰數據
Flutter Favorites#
Flutter 官方回歸收藏目錄，為開發者推薦高品質套件，最近納入的套件有以下：
Google Maps shows Cloud Styling#
Google Maps 現在可以載入 Google Cloud Console 中自定義地圖樣式，在自訂體驗上更加豐富
GoogleMap(
onMapCreated: _onMapCreated,
initialCameraPosition: const CameraPosition(
target: _kMapCenter,
zoom: 7.0,
),
key: _key,
cloudMapId: _mapId
);video_player on macOS#
video_player 套件現在支援 macOS，可在桌面應用使用元件播放影片了。
版本升級#
flutter upgrade
Articles#
- Flutter October 2023 💙 Flutter Monthly
- Flutter September 2023 💙 Flutter Monthly
- Flutter August 2023 💙 Flutter Monthly
- Flutter July 2023 💙 Flutter Monthly
- 添加預覽影片到 App Store，提升品牌形象
- Fluttercon 2023 技術研討會
- Flutter 六月大小事
- Wow! Flutter runs on Apple Vision Pro!
- 這次 Flutter 3.10 與 Dart 3 又強大了多少？Google IO 告訴你
- 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
About#
- GitHub: chyiiiiiiiiiiii
- Twitter: yiichenhi
- Instagram: flutterluvr.yii
- Linkedin: yiichenhi
- Youtube: Yii
- Email: ab20803@gmail.com
Contribution#
If you think the article is good, you can sponsor it, so that I have more motivation and enthusiasm to share my learning and life! Buy me a cup of coffee!
I hope it can help you. Welcome to follow me to get the upcoming article.
本文原刊登於 Medium。