Flutter 3.13 改版重點在這裡！

Yii Chen

Follow

Published in

Flutter Taipei

15 min readAug 17, 2023

--

Flutter 3.13 & Dart 3.1

在今天凌晨 Flutter 推出了新版 3.13！官方提到這次的版本合併了 724 個 PR，短時間內的更新數量真是不少，想必一定有許多值得關注的部分！

在此提醒，此文是閱讀過原文後的中文精簡版本，如果想了解更詳細的內容請查看作者 Kevin Chisholm 的文章。

What’s new in Flutter 3.13

2D scrolling, faster graphics, Material 3 updates and more

medium.com

Dart 3.1

Dart 3.1 & a retrospective on functional style programming in Dart 3

Pattern matching and exhaustive switches come together to enable functional style data models that blend seamlessly…

medium.com

Impeller 渲染引擎 for iOS

現在版本提供更低的延遲（完全改善 shader compilation jank）
在 flutter/gallery 性能測試中，平均的每幀光柵化時間約為 Skia 引擎的一半

Impeller 渲染引擎 for Android

Vulkan 在 Impeller 上有新進度，但還未達到 preview support 的品質，所以還不會公開。官方希望在年底前能以 stable 版本進入 Android 預覽。

可持續關注 Github 上的 Impeller project，目前進度已上升到 74% 🚀

Impeller * flutter

GitHub is where people build software. More than 100 million people use GitHub to discover, fork, and contribute to…

github.com

Impeller on Android Milestone · flutter/flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond - Impeller on Android Milestone ·…

github.com

Wonderous app in macOS

現在官方推出了在 macOS 平台上運行的 Wonderous app，使用 Impeller 渲染引擎。

官方希望大家可以幫忙測試並提供回饋，可以使用 DevTools 查找由著色器編譯而導致的卡頓狀況，將問題提交到 GitHub，詳細資訊最好能提供設備型號、螢幕錄影以及 Devtool 性能數據，幫助 APP 發展。

點擊以下安裝 Wonderous macOS：

‎Wonderous

‎Wonderous will educate and entertain as you uncover information about some of the most famous structures in the world…

apps.apple.com

AppLifecycleListener 掌控生命週期

新增了 AppLifecycleListener 類別，用於監聽 APP 生命週期中的更新
onStateChange() 負責監聽所有狀態的改變，詳細可查看 AppLifecycleState enum
onExitRequested() 可監聽 APP 退出時的請求，決定是否應該在請求時退出
使用 SchedulerBinding.instance.lifecycleState 取得當前的生命狀態，其中 name 屬性可取得狀態字串

AppLifecycleListener class

API docs for the AppLifecycleListener class from the widgets library, for the Dart programming language.

api.flutter.dev

2D Scrolling

支援 2D 滾動的全新 API，新增了很多類別

ChildVicinity，類似一維滾動中的索引，表示在二維中的相對位置
TwoDimensionalChildDelegate，類似於 SliverChildDelegate ，具有類似的子類別 TwoDimensionalChildBuilderDelegate和TwoDimensionalChildListDelegate
TwoDimensionalScrollView，一個抽象基類，創建TwoDimensionalScrollable 和 TwoDimensionalViewport
RenderTwoDimensionalViewport，二維滾動中佈局 box children 的主角

還可以使用 DiagonalDragBehavior實現對角滾動，並在 TwoDimensionalScrollView 或 TwoDimensionalScrollable 上配置

查看以下的 DartPad 範例，實現簡單的延遲加載、二維網格：

DartPad

An online Dart editor with support for console, web, and Flutter apps.

dartpad.dev

官方同時也釋出了 two_dimensional_scrollables 套件，包含許多實用的 API，可以使用 TableView.builder() 輕鬆實現 2D 滾動效果

two_dimensional_scrollables | Flutter Package

Widgets that scroll using the two dimensional scrolling foundation.

pub.dev

Sliver Widgets

SliverMainAxisGroup 和 SliverCrossAxisGroup 支援將多個 sliver 排列在一起。在主軸中，如果在有 sticky header 的情境，允許在 sliver 滾動時將固定的 header 推出 view。針對次軸操作，允許 sliver 並排
SliverCrossAxisExpanded 和 SliverConstrainedCrossAxis 能夠設置交叉軸中每個 sliver 的空間分配
DecoratedSliver，類似於 DecoratedBox，允許用 Decoration 來裝飾一個 sliver，甚至可以是一個 sliver group

DartPad

An online Dart editor with support for console, web, and Flutter apps.

dartpad.dev

DevTools

CPU Profiler，的 Table 滾動更快、更流暢。
Debugger，提高了 5 倍的查詢速度
在 Navigator 上添加了一個新的更多選單，避免空間擠壓的情況

在 Memory tab 新增類型圖標

iOS 顏色保真度

在 Flutter 3.13， Wide gamut colors 已經是默認的顏色設定

可折疊裝置

更好地支援可折疊設備，添加了新的 API 來了解裝置的各種屬性。使用 FlutterView.display 返回一個 Display 物件，可取得尺寸、設備像素比和刷新率。

display property

API docs for the display property from the FlutterView class, for the Dart programming language.

master-api.flutter.dev

實際範例：

setPreferredOrientations method - SystemChrome class - services library - Dart API

API docs for the setPreferredOrientations method from the SystemChrome class, for the Dart programming language.

master-api.flutter.dev

Material 元件更新

1. TextField 支援文字識別

在 iOS 上使用 TextField 時，可以看到一個設備掃描的圖案，幫助識別眼前的文字，並直接帶入輸入框。

2. Platform adaptive dialog

AlertDialog 中添加了Adaptive建構方法以及 showAdaptiveDialog()，可以根據平台顯示 Material 或 Cupertino Dialog。

3. CupertinoDatePicker

可以顯示有年和月的樣式，monthYear

4. CupertinoRadio

添加 useCheckmarkStyle 屬性
允許 Radio.adaptive 和 RadioListTile.adaptive 可控制是否在 iOS 上使用複選標記

5. More Material Custom

InputDecoration 可以使用 error 屬性來自定義 error 元件

ButtonSegment 可以設定 tooltips 提示

ExpansionPanelList 可以使用 materialGapSize 屬性設置間隙

Switch 可以自定義 trackOutlineWidth

NavigationDrawer 可以使用 tilePadding 屬性設置 padding

TabBar 可以使用 alignment 屬性設置如何對齊

Chips 可根據 MaterialState 設置顏色

Elevated Chips

新增了 FilterChip.elevated、ChoiceChip.elevated 和 ActionChip.elevated

SearchBar 支援 onSubmited()

當按下鍵盤上的完成按鈕時，可以進行特定處理

BaseTapAndDrag GestureDector

新增許多的操作支援，其中包括 TapAndPanGestureRecognizer 和 TapAndHorizontalDragGestureRecognizer 等等

Accessibility

CupertinoSwitch 添加了 onOffSwitchLabels 屬性以顯示 I/O 文字

iOS 平台更新

改善以前在 iOS 螢幕旋轉時會遇到一些扭曲現象

iOS Runner 重新命名

創建 Flutter project 時，預設會在該 ios 目錄中創建 Runner 專案。現在，我們可以重新命名 workspace。

重要變化

1. Material 3 for default

下一個穩定版本，APP 預設使用 Material 3，useMaterial3 預設值為 true。

material_3_demo

A new Flutter project.

flutter.github.io

2. Android minSdkVersion

Flutter 不再支援 Android Jelly Bean API 級別(16、17 和 18)。需要對 Android 的 build.gradle進行更新，它通常位於<YOUR FLUTTER PROJECT>/android/app/build.gradle，將 minSdkVersion 版本調整為到 19。