[Translation] New features in Flutter 3.10

原文：https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

Welcome to Flutter 3.10! We can't wait to showcase the great efforts of our amazing Flutter community. This Flutter release runs the incredible Dart 3 and is available today too!

Flutter 3.10 includes many improvements to web, mobile, graphics, security, and more. Let's get down to business!

Framework

Material 3

The Material library is now compliant with the latest Material Design specifications. This update includes new components and component themes, updated component visuals, and more. Developers who want to use new features must first use opt into import these features. In the next stable release, use Material3the default will be true.

To opt-in to the version Material libraryof M3, set it in your MaterialApptheme useMaterial3 : true. flutter createThis command will add it to your theme when you create a new application.

To preview these changes, check out  the DemoApp . The demo lets you see useMaterial3the effect of toggling on and off.

ColorScheme.fromImageProvider()

All M3 components are configured with the theme's ColorSchemedefault colors. The default color scheme uses various shades of purple. seedYou can create a custom color scheme from a single color or from an image. Try both variations in the demo. The resulting color scheme should look good and be ready to use.

NavigationBar

这提供了一个M3版本的BottomNavigationBar小部件。虽然 M3 使用了不同的颜色、高亮和标高，但它的工作原理与以前一样。要覆盖NavigationBars小组件的默认外观，请使用NavigationBarTheme小组件。虽然你不需要把现有的应用程序迁移到这个组件上，但你应该把它用于新的应用程序。

NavigationDrawer

这提供了一个基于Drawer小组件的M3目的地选择小组件。 NavigationDrawer显示了一个NavigationDestinations部件的单选列表。你也可以在这个列表中包括其他小部件。NavigationDrawer在需要时可以滚动。要覆盖NavigationDrawers小部件的默认外观，请使用NavigationDrawerTheme小部件。

SearchBar and SearchAnchor

这些组件为搜索查询提供预测性文本。当用户输入一个搜索查询时，该应用程序在 "搜索视图 "中计算出一个匹配的响应列表。用户要么选择一个，要么调整查询。要覆盖这些组件的M3设计，请使用SearchBarTheme和SearchAnchorTheme小工具。

Secondary Tab Bar

M3允许你创建第二层的标签内容。为了区分这个第二层的 TabBar，可以使用 TabBar.secondary。

DatePicker updated for M3

M3 DatePicker更新了日历和文本框版本的颜色、布局和形状。这并没有改变API，但增加了一个新的DatePickerTheme。

TimePicker updated for M3

M3 TimePicker和DatePicker一样，更新了普通版和紧凑版小组件的颜色、布局和形状。

BottomSheet updated for M3

除了M3颜色和形状的更新，底层页面现在增加了一个可选的拖动手柄，当你把showDragHandle设置为true时，就会包含 drag handle。

ListTile updated for M3

M3的ListTile更新了这个小部件的位置和间距。这包括内容填充、前导和尾随小部件对齐、最小前导宽度和垂直间距。API保持不变。

Drawer updated for M3

M3的 Drawer更新了颜色和标高，同时做了一些小的布局改动。

TextField Updates

M3 updates all TextField widgets to support native gestures. Double clicking or triple clicking with a mouse work the same as double tapping or triple tapping on a touch device. By default, the TextField and CupertinoTextField widgets use these features.

M3更新了所有的 TextField 部件以支持本地手势。用鼠标双击或三击的效果与触摸设备上的双击或三击相同。默认情况下， TextField 和 CupertinoTextField 小组件使用这些功能。

TextField double click/tap gestures

• Double click + drag:  功能拓展
• Double tap + drag:  功能拓展

TextField triple click/tap gestures

Triple click

• 在多行 TextField 内，在点击的位置选择一个段落块（Android/Fuchsia/iOS/MacOS/Windows）。
• 当在多行 TextField "内，在点击的位置上选择一个行块（Linux）。
• 选择单行 TextField 中的所有文本。

Triple tap

• 在多行 TextField 内，选择被点击位置的段落块。
• 选择单行 TextField 中的所有文本。

Triple click + drag

• 在段落块中扩展选择（Android/Fuchsia/iOS/MacOS/Windows）。
• 在行块中扩展选择（Linux）。

Flutter supports SLSA level 1

Flutter框架现在与软件工件的供应链级别（SLSA）Level 1 进行编译。这实现了许多安全功能的实施，包括：

• Scripted build process : Flutter的构建脚本现在允许在可信的构建平台上进行自动构建。在受保护的架构上构建有助于防止工件被篡改，从而提高供应链的安全性。
• Multi-party approval with audit logging : Flutter发布工作流程仅在多个工程师批准后执行。所有的执行都会创建可审计的日志记录。这些变化确保没有人可以在源代码和工件生成之间引入变化。
• Provenance. 测试版和稳定版现在都用 provenance 构建。这意味着具有预期内容的可信来源构建了框架发布的工件。每个版本都在 SDK档案 上发布了查看和验证来源的链接。

这项工作还允许团队朝着 SLSA L2 和 L3 合规性迈进。这两个级别侧重于在构建过程中和之后保护工件。

Web

Flutter Web 应用程序改进了加载时间

此版本减小了图标字体的文件大小。它从 Material 和 Cupertino 中删除了未使用的字形。

CanvasKit 缩小了所有浏览器的大小

基于 Chromium 的浏览器可以使用更小的自定义 CanvasKit“风格”。托管的 CanvasKit 从谷歌行业领先的 CDN 提供服务。这应该会进一步提高性能。

元素嵌入

您现在可以从页面中的特定元素提供 Flutter 网络应用程序。在此版本之前，您的应用程序可以填充整个页面主体或显示在iframe标记内。可以在 GitHub 中找到示例代码。

着色器支持

Web 应用程序可以使用 Flutter 的片段着色器支持。

Engine

Impeller

在 3.7 稳定版中，我们在 iOS 上预览了Impeller 。从那时起，我们收到并解决了用户的大量反馈。在此版本中，我们对 Impeller 进行了 250 多次提交，我们将 Impeller 设置为 iOS 上的默认渲染器。默认情况下，所有使用 Flutter 3.10 为 iOS 构建的应用程序都使用 Impeller。这些 iOS 应用程序将有更少的卡顿和更一致的性能。

自 3.7 版本以来，iOS 上的 Impeller 改进了内存占用。Impeller 使用较少的渲染通道和中间渲染目标。在较新的 iPhone 上，启用有损纹理压缩可在不影响保真度的情况下减少内存占用。这些进步也显着提高了 iPad 的性能。

考虑一个复杂的屏幕，比如Wonderous应用程序中的“pull quote”屏幕。总之，这些改进将这些屏幕的内存占用量减少了近一半。内存使用量的减少也适度降低了 GPU 和 CPU 负载。Wondrous 应用程序可能不会记录负载下降。它的框架之前已经低于预算，但这一变化应该会延长电池寿命。

Impeller 还释放了团队更快地交付流行功能请求的能力。一个示例导致在 iOS 上支持更广泛的 P3 色域。在这篇文章的其他地方查看该功能的描述。

社区贡献加速了我们的进步，特别是 GitHub 用户ColdPaleLight和luckysmg。他们编写了多个与 Impeller 相关的补丁，提高了保真度和性能。

虽然 Impeller 满足大多数 Flutter 应用程序的渲染需求，但您可以选择退出 Impeller。如果您选择退出，请考虑在 GitHub 上提交问题以告诉我们原因。应用程序用户可能会注意到 Skia 和 Impeller 在渲染时存在细微差别。这些差异可能是错误，所以不要犹豫，提出问题。在未来的版本中，我们将删除适用于 iOS 的旧版 Skia 渲染器以减小 Flutter 的大小。

Impeller 的 Vulkan 后端继续取得进展。Android 上的 Impeller 仍在积极开发中，但尚未准备好进行预览。我们计划在不久的将来分享更多相关信息。

要了解我们的进展，请查看我们的 GitHub 项目板。

Performance

此版本涵盖了除 Impeller 之外的更多性能改进和修复。

## Eliminating Jank 消除卡顿

我们要感谢开源贡献者luckysmg。他们发现他们可以缩短从 Metal 驱动程序获取下一个可绘制层的时间。要获得该奖励，您需要将FlutterViews背景颜色设置为非零值。此更改消除了最近 iOS 120Hz 显示器上的低帧率。在某些情况下，它会使帧速率增加三倍。 这帮助我们解决了六个 GitHub 问题。这一变化意义重大，以至于我们向后移植了一个修补程序到 3.7 版本中。

在 3.7 稳定版中，我们将本地图像的加载从平台线程转移到 Dart 线程，以避免延迟来自平台线程的 vsync 事件。但是，用户 注意到Dart 线程上的这项额外工作也导致了一些卡顿。在此版本中，我们将本地图像的打开和解码从 Dart 线程移至后台线程。此更改消除了具有大量本地图像的屏幕上潜在的长时间停顿，同时避免了延迟 vsync 事件。在我们的本地测试和自动化基准测试中，此更改将多个同步图像的加载时间缩短了一半。

我们继续在 Flutter 新的内部 DisplayList 结构之上构建优化。在此版本中，我们添加了基于 R-Tree 的剔除机制。这种机制在我们的渲染器中更早地移除了绘制操作的处理。例如，此优化加速了输出在屏幕外失败的自定义画家。我们的微基准测试显示 DisplayList 处理时间最多减少了 50%。具有裁剪自定义绘画的应用程序可能会看到不同的改进。改进的程度取决于隐藏绘制操作的复杂性和数量。

减少 iOS 启动延迟

应用程序包中标识符查找的低效策略增加了应用程序启动延迟。此启动延迟的增长与应用程序的大小成正比。在此版本中，我们修复了 bundle identifier lookup。这将大型生产应用程序的启动延迟减少了 100 毫秒或大约 30–50%。

缩小尺寸

Flutter 用作SkParagraph文本整形、布局和渲染的默认库。我们包括了一个标志以回退到遗留libtxt和minikin图书馆。由于我们对 有充分的信心SkParagraph，我们 在此版本中删除了libtxt和以及他们的标志。minikin这将 Flutter 的压缩大小减少了 30KB。

Stability

在 3.0 版本中，我们在渲染管道后期启用了一项 Android 功能。此 Android 功能使用高级 GPU 驱动程序功能。当只有一个“脏”区域发生变化时，这些驱动程序功能会重新绘制较少的屏幕。我们将此添加到早期的优化中，以达到类似的效果。尽管我们的基准测试结果鼓舞了我们，但还是出现了两个问题。首先，改进最多的基准可能不代表实际用例。其次，事实证明很难找到支持此 GPU 驱动程序功能的设备和 Android 版本集。鉴于有限的进步和支持，我们在 Android 上禁用了部分重绘功能。

使用 Skia 后端时，该功能在 iOS 上保持启用状态。我们希望在未来的版本中通过 Impeller 启用它。

API 改进

APNG解码器

Flutter 3.10 解决了我们最受关注的问题之一。它增加了解码图像的能力APNG。APNG您可以使用 Flutter 现有的图片加载 API 来加载图片。

图片加载 API 改进

受人尊敬的 Flutter 工程总监tvolkertdart:ui已对的图像加载 API进行了改进。我们添加了一个新方法 instantiateImageCodecWithSize。这支持加载满足以下三个条件的图像的用例：

• 加载时宽高比未知
• 边界框约束
• 原始纵横比约束

一个例子是当一个应用程序试图显示从网络加载的可能性池中的一个图像时。

Mobile

iOS

无线调试

您现在可以在没有电缆的情况下运行和热重新加载您的 Flutter iOS 应用程序！在 Xcode 中成功无线配对您的 iOS 设备后，您可以使用 flutter run 将您的应用程序部署到该设备。如果您遇到问题，请在Window > Devices and Simulators > Devices下验证网络图标出现在您的设备旁边。要了解更多信息，请查看我们的文档。

宽色域图像支持

iOS 上的 Flutter 应用现在可以支持宽色域图像的精确渲染。要使用宽色域支持，应用程序必须使用 Impeller 并在文件FLTEnableWideGamut中添加标志Info.plist。

拼写检查支持

该SpellCheckConfiguration()小部件现在默认支持Apple在 iOS 上的拼写检查服务。要使用此小部件，请使用spellCheckConfiguration中的参数对其进行设置CupertinoTextField。

自适应复选框和单选

此版本将CupertinoCheckBox和CupertinoRadio小部件添加到库中Cupertino。他们创建符合 Apple 样式的复选框和单选按钮组件。

Material 复选框和单选小部件添加了.adaptive构造函数。在 iOS 和 macOS 上，这些构造函数使用相应的 Cupertino 小部件。在其他平台上，他们使用 Material 小部件。

优化 Cupertino 动画、过渡和颜色

Flutter 3.10 改进了一些动画、过渡和颜色以匹配 SwiftUI。这些改进包括：

• 更新过渡CupertinoPageRoute_
• 添加标题放大动画CupertinoSliverNavigationBar
• 添加几种新的 iOS 系统颜色CupertinoColors

平台视图性能

当PlatformViews出现在屏幕上时，Flutter会限制iOS 上的刷新率以减少卡顿。当应用程序显示动画或可滚动时，应用程序用户会注意到这一点PlatformViews。

macOS 和 iOS 可以在插件中使用共享代码

Flutter 现在支持插件文件sharedDarwinSource中的密钥。pubspec.yaml这个键表示 Flutter 应该共享 iOS 和 macOS 代码。

ios:  
    pluginClass: PathProviderPlugin  
    dartPluginClass: PathProviderFoundation  
    sharedDarwinSource: true  
macos:  
    pluginClass: PathProviderPlugin  
    dartPluginClass: PathProviderFoundation  
    sharedDarwinSource: true

应用扩展的新资源

我们为 Flutter 开发人员添加了使用 iOS 应用程序扩展的文档。这些扩展包括实时活动、主屏幕小部件和共享扩展。

为了简化创建主屏幕小部件和共享数据，我们向path_provider和homescreen_widget插件添加了新方法。

跨平台设计的新资源

该文档现在包括针对特定UI 组件的跨平台设计注意事项。要了解有关这些 UI 组件的更多信息，请查看Flutter UX GitHub 存储库中的讨论。我们感谢任何输入或反馈！

安卓

Android CameraX 支持

Camera X是一个 Jetpack 库，可简化向 Android 应用添加丰富的相机功能的过程。此功能适用于多种 Android 相机硬件。在此版本中，我们为 Flutter Camera 插件添加了对 CameraX 的初步支持。此支持涵盖以下用例：

• 图像捕捉
• 视频录制
• 显示实时相机预览

要尝试一下，请选择使用 CameraX 实现。要选择加入，请将以下行添加到您的pubspec.yaml 文件中。

    Dependencies:  
        camera: ^0.10.4 # 最新相机版本  
        camera_android_camerax: ^0.5.0

我们希望收到您的反馈，因为我们将继续添加更多 CameraX 功能，然后将 CameraX 设为默认实现。

开发者工具

我们继续改进 DevTools，这是一套用于 Dart 和 Flutter 的性能和调试工具。一些亮点包括：

• DevTools UI 使用 Material 3。这既使外观现代化又增强了可访问性。
• DevTools 控制台支持在调试模式下评估正在运行的应用程序。在此版本之前，您只能在暂停应用程序时执行此操作。
• 嵌入式Perfetto 跟踪查看器取代了以前的时间线跟踪查看器。Perfetto 可以处理更大的数据集，并且比传统的跟踪查看器表现得更好。Perfetto 包含更多功能，例如：
  • 允许您固定感兴趣的线程。
  • 单击并拖动以从多个帧中选择多个时间轴事件。
  • 使用 SQL 查询从时间轴事件中提取特定数据。

要了解更多信息，请查看DevTools 2.23.1、DevTools 2.22.2和DevTools 2.21.1的发行说明。

弃用和重大更改

弃用的 API

此版本中的重大更改包括在 v3.7 发布后过期的弃用 API。要查看所有受影响的 API 以及其他上下文和迁移指南，请查看此版本的弃用指南。Dart Fix可以修复其中的许多问题，包括在 IDE 中快速修复和使用dart fix命令批量应用。

Android Studio Flamingo 升级

After upgrading Android Studio to Flamingo, you may see errors when trying to flutter run or flutter build your Flutter Android app. This error occurs because Android Studio Flamingo updated its bundled Java SDK from 11 to 17. Gradle versions prior to 7.3 will not work when using Java 17 . We update flutter analyze --suggestions to verify if this error occurs due to an incompatibility between Java SDK and Gradle versions.

To learn about different ways to fix this error, check out our migration guide .

window singleton deprecation

This release deprecates the window singleton. Applications and libraries that depend on it should migrate from it. This prepares your app for multi-window support when your app launches in a future version of Flutter.

Thanks to the community

As always, a big thanks to the community for the tests that helped us identify these breaking changes. To learn more, please review our Breaking Changes Policy .

to sum up

As we wrap up this release, the Flutter team at Google would like to thank all the contributors who made this release possible. Your dedication and hard work have helped make Flutter a game changer for the industry and continue to revolutionize app development. We encourage you to start exploring the latest stable release of Flutter to take advantage of all the amazing features it has to offer. Just do it flutter upgrade! Stay tuned for more exciting updates on Flutter in the future.