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 程式碼遷移到自動產生
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 的操作捷徑。
SelectionArea of Text
SelectionArea已支援使用滑鼠點擊或雙擊以及長按相關的手勢，可通過SelectionArea來使用SelectableRegion
- 點擊：在點選的位置設定調整區域
- 雙擊：選擇指定位置的文字、單字
- 雙擊 + 拖曳、長按+拖曳：擴展文字的選擇範圍
Focus Widget Control Menu Item
現在 FocusManager 的applyFocusChangesIfNeeded API 可以恢復焦點，也就是當使用者點擊選單後，焦點會返回到開啟選單之前關注的元件。
MatrixTransition Animation Widget
新的MatrixTransition允許在動畫數值更新時進行 Matrix 更新。輕鬆完成矩陣動畫效果，以下提供程式碼範例
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.
