CrazyCodeBoy的技术博客官网

Flutter 3.16 新特性介绍

Sat, 18 Nov 2023 00:00:00 +0800

Flutter 3.16 默认采用 Material 3 主题，Android 平台预览 Impeller，DevTools 扩展等等

Flutter在每个季度通常都会有个稳定版本的发布。在2023 Q4的更新中为大家带来的是Flutter 3.16。这个版本将 Material 3 设为新的默认主题，并为 Android 带来了 Impeller 预览，支持为 DevTools 添加扩展等等！与此同时，我们在这个版本还可以看到Flutter Casual Games Toolkit 的重大更新。

在距离上一个版本发布仅三个月的时间里，共有145 位社区成员合并了 928 个拉取请求，其中有 40 位社区成员首次贡献了他们的 Flutter 代码！

接下来，就跟我一起继续阅读，了解 Flutter 社区为这个最新版本做出的所有新增和改进吧！

框架

Material 3 成为新的默认主题

从 3.10 版本（2023 年 5 月）开始，Material 库已更新以符合最新的 Material Design 规范。更改包括新的组件和组件主题，以及更新的组件外观。在 3.16 版本之前，这些更改是“选择加入”的，使用 useMaterial3 主题标志。从此版本开始，默认情况下 useMaterial3 为 true。（#130764）

您仍然可以通过在 MaterialApp 主题中指定 useMaterial3: false 来选择退出 Material 库的 M3 版本，但 Material 2 最终将被弃用和移除。此外，一些小部件不仅需要更新，还需要一个全新的实现。因此，当您看到它作为 Material 3 运行时，您的 UI 可能会显得有些奇怪。为了解决这个问题，请手动迁移到新的小部件，例如 NavigationBar。有关更多详细信息，请查看 GitHub 上的 Material 3 综合问题。

demo 应用允许您尝试所有组件。该演示支持切换 useMaterial3，以便您可以比较这些更改。

Material 3 组件的外观主要由 [ThemeData.colorScheme] 和 [ThemeData.textTheme] 的值确定。创建 Material 3 颜色方案的首选方法是使用 ColorScheme.fromSeed()，该方法创建出既美观又符合辅助功能对比要求的暗色和亮色方案。您还可以使用 ColorScheme.fromImageProvider 从图像的主导颜色创建颜色方案。要进一步自定义 Material 3 组件的外观，请向您的 ThemeData 添加组件主题，例如 ThemeData.segmentedButtonTheme 或 ThemeData.snackBarTheme。非空的组件主题属性将覆盖组件 API 文档中指定的默认值。

支持 Material 3 动效

Material 3 动效的改进包括添加了 Easing 和 Durations 类。Material 2 曲线已重命名，以包含“legacy”一词，并最终将被弃用和移除。(#129942)

编辑菜单中的额外选项

在原生 iOS 上，用户现在可以选择文本并启动共享菜单，提供了几个标准服务。在此版本中，我们添加了查找、搜索和共享选项。

TextScaler 用于指定全局文本缩放因子

为了支持 Android 14 的非线性字体缩放功能，新的 TextScaler 类替代了 Text.textScaleFactor 属性。(#128522)

SelectionArea 更新

Flutter 的 SelectionArea 已更新以支持与鼠标单击或双击以及触摸设备上的长按相关的本机手势。这些新手势默认情况下可用于 SelectionArea 和 SelectableRegion。

单击：在单击位置设置折叠选择。
双击：选择单击位置的单词。
双击 + 拖动：在单词块中扩展选择。

长按 + 拖动：在单词块中扩展选择。

在焦点小部件上运行的菜单项

这个版本主要清理了在使用菜单项时的焦点更改：FocusManager 的 applyFocusChangesIfNeeded 函数现在在用户点击菜单项时恢复菜单焦点 — 当用户点击菜单项时，焦点已经返回到在打开菜单之前具有焦点的项目。 (#130536)

iOS、macOS中菜单项快捷键的自动重新排序

在Mac平台上，Flutter应用现在按照苹果人机界面指南对菜单中的快捷键进行排序。 (#129309)

之前之后MatrixTransition动画

一个新的 MatrixTransition 小部件允许在创建动画过渡时进行变换。根据当前的动画值，您可以提供一个矩阵变换，应用于子小部件以创建像下面GIF中的效果一样的效果。 (DartPad中的示例) (#131084)

在`flutter_test`中添加了PaintPattern

在flutter_test包中，新的 PaintPattern 类允许您验证由小部件（如CustomPainter和Decoration）在单元测试中向画布发出的绘制调用。

以前，需要一个golden文件来验证正确的颜色和矩形是否被绘制，但现在您可以使用 PaintPattern。以下示例验证了 MyWidget 在画布上绘制了一个圆：

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,
    ),
);

此API以前存在于框架测试文件中，我们注意到一些开发人员发现它非常有用，将其复制到了自己的项目中。如果这适用于您，升级到Flutter 3.16后，您可以从项目中删除该复制。

滚动更新

在Flutter 3.13首次发布了二维滚动基础之后，此版本带来了更多功能和优化。Flutter 3.16现在支持KeepAlive小部件，以及默认焦点遍历和隐式滚动。基于该基础构建的二维滚动小部件将自动采用此支持。有关在二维基础上构建的详细指南，请参见Flutter Build Show的最新一集。

在3.13版本发布后不久，two_dimensional_scrollables包发布了。这个包由Flutter团队维护，包含了构建在框架基础上的第一个二维滚动小部件 — TableView。自初始发布以来，已添加了更多的装饰和样式支持，并进行了额外的错误修复。

引擎

Impeller

Android

在此版本中，我们很高兴地宣布Impeller在Android上已经准备好在稳定通道上进行预览反馈。从今年初以来，团队一直在为Impeller开发Vulkan后端，此预览版本包括收集关于Impeller在支持Vulkan的设备上的特性的反馈。

这张图表展示了在Flutter Gallery过渡性能基准测试中，Impeller的Vulkan后端在过去一年中在99%、90%和平均帧光栅化时间上的改进，用户将观察到更少的卡顿和更高的稳定帧率。在这段时间的末尾，我们从Samsung S10设备切换到Pixel 7 Pro设备，这导致数字大幅下降。尽管如此，我们发现趋势和整体结果非常令人鼓舞。*Impeller尚未在不支持Vulkan的设备上表现良好。随着我们在未来几个月将Impeller的OpenGL后端完善到功能完备，我们计划在未来的稳定版本中也收集关于在这些设备上的Impeller特性的反馈。

Flutter开发者可以通过在flutter run命令中添加--enable-impeller标志，或在项目的AndroidManifest.xml文件的``标签下添加以下设置，尝试在支持Vulkan的Android设备上使用Impeller：

为了确定设备是否支持Vulkan，Impeller使用了在Impeller仓库文档中讨论的测试。通常，Impeller在运行64位操作系统且Android API级别为29或更高的设备上使用Vulkan后端。用户还可以通过按照检查Vulkan支持中的建议来确定他们的设备是否支持Vulkan。

尽管我们对Impeller的Vulkan后端取得的进展感到满意，但在预览期间存在一些已知问题：

平台视图尚未实现，否则会执行相对较差的包含平台视图的帧。
自定义着色器尚未实现。
完整的已知问题和缺失功能列表，最新信息请参阅GitHub上Impeller的项目板。许多问题已经在3.17 beta中得到修复，所以请也尝试一下。

我们对在支持Vulkan的Android设备上尝试Impeller的忠实度、性能感到满意。然而，与iOS相比，Android硬件生态系统更加多样化，我们预计在iOS之前，在Android上会有一个较长的预览期。因此，有关Impeller最有帮助的反馈应包括有关出现问题的具体设备和Android版本的详细信息。

此外，Impeller的Vulkan后端在“debug”构建中提供了比Skia更多的调试功能，并且这些功能具有额外的运行时开销。因此，关于Impeller性能的反馈必须来自于配置文件或发布构建，并且应包括来自DevTools的时间轴以及与同一设备上Skia后端的比较。最后，一如既往，我们非常感激包含一个小而可重现问题的测试用例的反馈。

Impeller性能、忠实度和稳定性

除了关注Vulkan后端之外，从今年初开始，团队还对Impeller的文本性能进行了一些改进，这些改进对Android和iOS都有益。特别是，我们对Impeller的字形图集管理和文本工作负载在引擎的UI和光栅线程之间的分配方式进行了改进。因此，用户将在文本重负载中注意到更少的卡顿。

这张图表显示了在iPhone 11上使用Impeller进行的我们的一个文本重负载基准测试中，99%、90%和平均帧光栅化时间在毫秒上的减少，特别是90%和平均帧光栅化时间几乎减半。团队还在为Android和iOS的忠实度和稳定性做出了努力，特别是用户报告的问题。在这个稳定版本周期的三个月里，团队为flutter/engine repo做出了209个与Impeller相关的提交，关闭了217个问题，其中包括42个用户报告的忠实度、稳定性或性能问题。

引擎性能

为了在具有异构多处理的移动设备上实现更好的性能，我们修改了引擎，使对性能敏感的线程，如UI和光栅线程，与设备更强大的核心有关联。我们观察到这个改变在各种基准测试和设备上都产生了积极的影响。在某些情况下，改进效果显著，使99%或90%的帧时间减半或更好。我们预计用户在这个改变后，无论是在Android上使用Skia还是Impeller后端，都将注意到更少的卡顿。在iOS设备上效果较小，更强大和较弱的核心之间的差异较小。

这张图表显示了在几乎所有我们的Android基准测试和设备上，最差、99%、90%和平均帧构建和帧光栅化时间的改进。

API和忠实度改进

Impeller性能叠加

在先前的版本中，Flutter的性能叠加功能在Impeller上未显示。此版本修复了这个问题。性能叠加现在在启用Impeller的情况下正确显示。

抖动现在正确显示

在此版本中，Paint.enableDithering属性被设置为true，并根据Flutter的弃用政策已被弃用。现在，默认启用抖动（不再支持开发者配置的抖动），您将不再看到带状问题。有关此更改的完整说明和迁移指南，请参阅docs.flutter.dev上的破坏性变更页面。

之前之后游戏

游戏

Flutter Games Toolkit

在过去的几年里，我们看到了围绕休闲游戏开发的不断增长的社区。已经有数万款游戏使用Flutter发布，从简单但有趣的拼图到更复杂的街机游戏。其中一些我们喜欢的游戏包括Etermax的Trivia Crack，Lotum的4 Pics 1 Word（猜词游戏），Dong Digital的Brick Mania（街机游戏），Onrizon的StopotS（类别游戏），我们为I/O构建的复古弹球游戏以及在其社交和菜单屏幕中使用Flutter的PUBG手机。

为了帮助游戏开发者更高效，Flutter今天推出了其休闲游戏工具包的重大更新。这是一系列新资源，帮助您从概念到发布，包括更多特定于流派的模板，如卡片游戏、无尽奔跑游戏，以及Play Games Services、应用内购买、广告、成就、Crashlytics和多人支持等服务集成。要了解更多信息，请查看由Zoey Fan发布的游戏工具包启动帖。

Web

在Chrome DevTools的Flutter时间轴事件

Flutter时间轴事件现在在Chrome DevTools的性能面板中公开显示。 (#130132)

要了解更多，请查看Web应用程序性能调试。

Android

鼠标滚轮支持

在优化Wonderous以符合Android的大屏幕指南时，我们发现的一个问题是在平板电脑或可折叠设备上，鼠标滚轮的效果不佳。众所周知的是，用户必须移动滚轮相当多的距离才能使屏幕响应。

通过此版本，在Flutter视图上使用鼠标滚轮滚动的速度与Android设备上的滚动速度匹配。 (44724)

之前之后预测性的后退导航

iOS

App extensions

Flutter现在可以用于定位一些iOS应用扩展。这意味着您可以使用Flutter小部件为某些类型的iOS应用扩展绘制UI。这并不适用于所有类型的应用扩展，因为可能存在API（例如主屏幕小部件）或内存的限制。

了解更多并查看有关如何定位共享扩展的示例，请访问docs.flutter.dev上的添加iOS应用扩展。

包生态系统

新的Flutter收藏夹

我们重新启动了Flutter收藏夹计划！在此周期内，Flutter生态系统委员会指定了flame、flutter_animate、flutter_rust_bridge、riverpod、video_player、macos_ui和fpdart等包为新的Flutter收藏夹。祝贺所有获选者！

请期待将来的新的Flutter收藏夹。要提名包或插件作为潜在的未来Flutter收藏夹，或将任何其他问题带到委员会的注意，请发送电子邮件至。

首次包生态系统虚拟峰会

在8月，我们举办了第一次虚拟峰会，参与者包括50多名pub.dev的非Google和Google贡献者。目标是在非正式的会议中将贡献者聚集起来，计划、教育、学习和分享。在后续调查中，对活动的满意度达到了100%。我们计划与社区合作，在将来的包生态系统活动（线下和线上）中推出类似的活动。在即将发布的包生态系统更新博客文章中了解更多信息。

基于云的Google地图样式

Google Maps平台提供了从Google Cloud控制台的Map Styles页面自定义地图样式的能力。这使您可以在每次进行样式更改时，无需更新应用代码，创建自定义体验。

要在Flutter中使用此功能，您只需使用控制台中设置的Map ID引用您的地图：

GoogleMap(
        onMapCreated: _onMapCreated,
        initialCameraPosition: const CameraPosition(
          target: _kMapCenter,
          zoom: 7.0,
        ),
        key: _key,
        cloudMapId: _mapId
);

摄像头 X 改进

在3.10稳定版本中，我们为Flutter相机插件添加了对Camera X的初步支持。Camera X是一个Jetpack库，简化了将丰富的相机功能添加到Android应用程序的过程。

通过此发布，我们已添加了任何使用相机的应用程序所需的大多数功能。CameraX解决了插件的Camera 2实现存在的许多问题。

我们鼓励您使用CameraX插件。要选择加入，请在pubspec.yaml文件中添加以下行。

Dependencies: camera: ^0.10.4 # 或尝试最新的相机版本 camera_android_camerax: ^0.5.0

我们期待着您的反馈，因为我们计划在将来的发布中将CameraX作为默认实现。

macOS视频播放器

我们已将视频播放器插件添加到macOS支持，允许开发人员在小部件表面上播放视频。

要了解更多信息，请查看pub.dev上的视频播放器插件。

DevTools

DevTools扩展

新的DevTools扩展框架使以下内容成为可能：

包作者可以为其包构建自定义工具，这些工具直接在DevTools中显示。
包作者可以编写利用DevTools中的现有框架和实用程序的强大工具。
在使用DevTools调试应用程序的Dart和Flutter开发人员可以访问特定于其用例的工具（由其应用程序的依赖项确定，并提供DevTools扩展的依赖项）。

感谢Provider、Drift和Patrol的包作者，这个生态系统已经在建设中，您今天就可以使用这些包的DevTools扩展！

Provider

Patrol

Drift深入了解DevTools扩展，请查看Kenzie Davisson的Dart和Flutter DevTools扩展公告。

DevTools更新

此发布的DevTools的一些亮点包括：

增加了对DevTools扩展的支持
增加了一个新的“主页”屏幕，显示您连接的应用程序的摘要。

其他改进还包括：

总体性能
热重新启动的健壮性
文本选择和复制行为
网络分析器响应查看器的优化

要了解更多信息，请查看DevTools的发布说明2.26.1、2.27.0和2.28.1。

VS Code UI可发现性

由于Flutter社区成员DanTup的出色工作，Flutter VS Code扩展现在具有Flutter侧边栏，可轻松访问：

打开Flutter DevTools屏幕
查看活动调试会话
查看可用设备
创建新项目
热重载和重启
运行Flutter Doctor -v
等等

弃用和重大更改

此版本中的重大更改包括在v3.13发布后过期的已弃用API。要查看所有受影响的API以及其他上下文和迁移指南，请参阅此版本的弃用指南。其中许多都受到Flutter修复的支持，包括IDE中的快速修复。可以使用dart fix命令评估和应用批量修复。

一如既往，感谢社区为贡献测试 — 这有助于我们识别这些重大更改。要了解更多信息，请查看Flutter的重大更改政策。

在我们的下一个发布版本中，我们计划将弃用策略扩展到flutter_driver包，除了已支持的flutter和flutter_test包。

最后

要查看此版本中包含的所有PRs，请查看发布说明和更改日志：https://docs.flutter.dev/release/release-notes。

Flutter 3.16已发布到稳定通道上，并包括Dart 3.2。

小伙伴们如果想抢先体验Flutter 3.16的新特性，只需运行flutter upgrade即可。

就让我们在Flutter精彩课程中再见吧！

一个功能强大的Flutter开源聊天列表插件

Sun, 22 Oct 2023 00:00:00 +0800

flutter_im_list是一款高性能、轻量级的Flutter聊天列表插件。可以帮助你快速创建出类微信的聊天列表的效果。

预览图

整体	长按	输入中	动图

示例

Examples

视频教程

欢迎通过视频教程学习交流。

如何使用

第一步添加依赖

在项目根目录下运行：

flutter pub add flutter_im_list

第二步：初始化ChatController

@override
void initState() {
super.initState();
chatController = ChatController(
    initialMessageList: _messageList,
    timePellet: 60,
    scrollController: ScrollController());
}

第三步：在布局中添加ChatList

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: ChatList(
          chatController: chatController,
        ));
  }

第四步：设置初始化数据

final List<MessageModel> _messageList = [
MessageModel(
    id: 1,
    content: "介绍下《ChatGPT + Flutter快速开发多端聊天机器人App》",
    ownerType: OwnerType.sender,
    createdAt: 1696142392000,
    avatar: 'https://o.devio.org/images/o_as/avatar/tx18.jpeg',
    ownerName: "Jack"),
MessageModel(
    id: 2,
    content:
        "当前ChatGPT应用如雨后春笋般应运而生，给移动端开发者也带来了极大的机会。本课程将整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手。@https://coding.imooc.com/class/672.html",
    ownerType: OwnerType.receiver,
    createdAt: 1696142393000,
    avatar: 'https://o.devio.org/images/o_as/avatar/tx2.jpeg',
    ownerName: "ChatGPT"),
];

如果没有，可以将_messageList赋值为[]。

了解更多请查看视频教程

API

IChatController

abstract class IChatController {
  /// 在列表中添加消息
  void addMessage(MessageModel message);
  /// 在列表中删除消息
  void deleteMessage(MessageModel message);
  /// 批量添加消息（适用于下来加载更多的场景）
  void loadMoreData(List<MessageModel> messageList);
}

ChatController

class ChatController implements IChatController {
  /// 列表的初始化数据可以为[]
  final List<MessageModel> initialMessageList;
  final ScrollController scrollController;

  ///支持提供一个MessageWidgetBuilder来自定义气泡样式
  final MessageWidgetBuilder? messageWidgetBuilder;

  ///设置显示的时间分组的间隔，单位秒
  final int timePellet;
  List<int> pelletShow = [];

  ChatController({required this.initialMessageList,
    required this.scrollController,
    required this.timePellet,
    this.messageWidgetBuilder}) {
    for (var message in initialMessageList.reversed) {
      inflateMessage(message);
    }
  }
...

ChatList

class ChatList extends StatefulWidget {
  /// ChatList的控制器
  final ChatController chatController;

  /// 插入子项的空间大小
  final EdgeInsetsGeometry? padding;

  /// 气泡点击事件
  final OnBubbleClick? onBubbleTap;

  /// 奇葩长按事件
  final OnBubbleClick? onBubbleLongPress;
  /// 文本选择回调
  final HiSelectionArea? hiSelectionArea;

  const ChatList(
      {super.key,
      required this.chatController,
      this.padding,
      this.onBubbleTap,
      this.onBubbleLongPress,
      this.hiSelectionArea});

  @override
  State<ChatList> createState() => _ChatListState();
}

了解更多请查看视频教程

Contribution

欢迎在issues上报告问题。请附上bug截图和代码片段。解决问题的最快方法是在示例中重现它。

欢迎提交拉取请求。如果您想更改API或执行重大操作，最好先创建一个问题并进行讨论。

MIT Licensed

万字长文，为你送上全网最全Flutter学习资料！

Sat, 20 May 2023 00:00:00 +0800

话不多说直接上目录，干货较多内容很长，建议先收藏供以后慢慢查阅。

文章

介绍

Google IO 2018 [1.1K👏] - 构建美观，灵活的用户界面。
Presentation - 为什么我会选择Flutter 由Helio S. Junior提供。
Flutter Web - Flutter Web的来龙去脉 by Nash提供.

网站/博客

Flutter技术专栏
Welcome to Flutter - 英文和法文博客，致力于为Ditter Boelens提出的有关Flutter的最常见问题提供实用的解决方案。
SZAŁKO-BLOG - 渐进式高级设计，由Marcin Szalek提供。
Flutter by Example - 基于Redux，Firebase，自定义动画和UI的教程。
Flutter Institute - 非常原创的内容和教程，由 Brian Armstrong提供。
Iirokrankka.com - 关于Flutter，Dart和任何相关的文章和教程，由Iiro Krankka提供。
Norbert - 深度文章、特色与应用创建，由 Norbert515提供。
Flutter Tips - 开发中的文章，提示和技巧由Diego Velásquez提供。
FilledStacks - 开发教程和指南 by Dane Mackier提供。
Awesome Flutter tips - 由 erluxman 提供的帮助开发人员提高生产力的提示。

教程

ChatGPT + Flutter快速开发多端聊天机器人App - 整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手。
Flutter高级进阶实战仿哔哩哔哩APP - 一次性深度掌握Flutter高阶技能+商业级复杂项目架构设计与开发方案
Flutter从入门到进阶 - 解锁Flutter开发新姿势，一网打尽Flutter核心技术。
Flutter 3.7更新详解 - 全局文本选择、Impeller 渲染速度、DevTools，为开发者们带来一个更好用的 Flutter 3.7！
Flutter 3.3更新详解 - 文字处理、性能提升和其他改进和更新，为开发者们带来一个更好用的 Flutter 3.3！
Flutter 3更新详解 - 深入了解最新版本，包括 macOS 和 Linux 平台的稳定支持、多项性能改进等！
一文掌握Flutter 2.10新特性 - Flutter 2.10 包括 Flutter 对 Windows ⽀持的重⼤更新、⼏项重⼤的性能改进、框架中图标和颜⾊的新⽀持以及一些⼯具改进等。
Flutter for Windows桌面端稳定版发布 - 它使 Windows 开发者也能享受到移动开发的相同生产力和功能。
Flutter 2.8 更新特性一览 - Flutter 2.8正式版重磅发布，还不来看看？
Flutter2重磅发布支持Web和桌面应用 - Flutter正式迎来了它的的第二个大版本，增加了对桌面和Web 应用程序的支持。
革命性移动端开发框架-Flutter时间简史 - 一文读懂Flutter前世今生。
Animated Chat - 通过Google Code Labs构建漂亮的用户界面。
Firebase Chat - Google Code Labs整合Firebase。
Planets-Flutter: from design to app - 详细的planets设计教程。
Todo List [196⭐] – 一步步带你如何使用Flutter构建待办事项列表，由Andrei Lesnitsky提供。
Flutter and Dart development - Suragch撰写的文章和教程。

初学者

给Android开发者的Flutter入门指南 - 一份面向Android开发者的Flutter入门指南。
初学者如何高效学习Flutter开发？ - 一份指导初学者快速高效上手Flutter的指南。
Flutter开发路线图 [2795⭐] - 由Olexandr Leuschenko制作的Flutter新手可视化路线图，包含原则、模式和框架。
布局速查表 - Tomek Polański提供的布局小部件的详细示例。
入门Flutter - 来自raywenderlich.com的指南。
初学者指南 [123⭐] - Anthony编写的关于Flutter和Firebase基础知识的综合指南。

中级

Flutter极简状态管理 - 通过了解应用程序架构，无需依赖第三方框架。作者：Suragch。另请参阅状态管理。

高级

渲染流水线 [799👍] 和让我们构建渲染树 - 由Adam Barth介绍的引擎架构。
渲染对象 - 什么是Widgets、渲染对象和元素？作者：Norbert515。
流和RxDart - 由Brian Egan在Skillmatters上的演讲。
手势系统 - Flutter深入剖析：手势。作者：Nash。
模式 - 由Didier Boelens解释的Widget、状态、上下文和InheritedWidget。
渲染引擎教程 - Flutter的渲染引擎教程。作者：AbdulRahman AlHamali。
InheritedWidget - 使用Flutter的InheritedWidget来保存应用状态。作者：Chema Molins。
从移动到桌面 - 构建适用于智能手机和桌面的应用程序。作者：Marcelo Henrique Neppel。
辅助功能小部件 - 关于辅助功能的各个方面的深入信息。作者：Muhammed Salih Güler。
使用时间线进行性能分析 - 使用时间线可以找出和解决应用程序中特定的性能问题。作者：Chinmay Garde。

HOWTO文档

视差效果 - Marcin Szalek创建的视差和非线性动画。
构建变体 - Salvatore Giordano介绍了如何定义构建配置并在Flutter中进行切换。
构建变体 - Angelo Cassano使用flutter_flavorizr轻松在Flutter（Android和iOS）中构建变体。

视频

ChatGPT + Flutter快速开发多端聊天机器人App - 整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手。
全新Flutter从入门到进阶，实战仿携程网App - 一门涵盖入门 -> 进阶 -> 实战 -> 拔高拓展的视频教程。
Boring Show - 与Flutter团队一起探索的视频系列。
Tensor Programming [86🎬] - Tensor Programming提供的内容非常丰富。
Mtechviral [245🎬] - [印地语/英语] Pawan Kumar的Mtechviral系列视频。
Flutter in Practice - 面向初学者和非程序员的视频课程，由Zaiste提供。
Whatsupcoders [82🎬] - 由Kamal提供的关于Flutter小部件的免费视频系列。
Reso Coder - Matej Rešetár提供的中级和高级视频。

组件

演示

官方展示库 - Flutter团队提供的材料设计小部件演示。
Flutter示例 [5861⭐] - Nishant Srivastava编写的简单基础的独立应用程序示例。
Flutter目录 [1601⭐] - X-Wei展示Flutter组件，同时显示源代码。
生成艺术 [401⭐] - Robert Felker创建的生成艺术作品。

UI

StaggeredGridView [2292⭐] - 可变大小瓦片的网格视图，由Romain Rastel创建。
Radial Menu [401⭐] - 动画径向菜单，由Victor Choueiri创建。
Tinder Cards [646⭐] - 类似Tinder的卡片滑动效果，由Ivascu Adrian创建。
Flip Panel [461⭐] - 带有内置动画的翻转面板，由HungHD创建。
Facebook Reactions [261⭐] - Facebook反应小部件，由Duy Tran创建。
Flushbar [818⭐] - 高度可配置的Snackbar，由Andre Haueisen创建。
Stepper Touch [238⭐] - 漂亮动画的侧面值步进器，由Raouf Rahiche创建。
Typeahead [560⭐] - 用户输入时显示覆盖建议的小部件，由Abdul Rahman Al Hamali创建。
Snaplist [366⭐] - 创建可捕捉的列表视图，由David Leibovych创建。
Pin Code [252⭐] - 用于登录和OTP的动画和可定制的Pin码，由Liew Jun Tung创建。
Folding Cell [430⭐] - 折叠小部件，由Faob创建。
Liquid Pull To Refresh [922⭐] - 美观和可定制的刷新指示器，由Ayush Agarwal创建。
Slide Container - 以平滑阻尼运动的方式垂直和水平滑动，由Quentin Le Guennec创建。
Direct Select - 全屏模态弹出的选择小部件，由Ivan Yatsouba创建。
Before After [580⭐] - 美观的滑块，方便展示两张图片之间的差异，由Sahil Kumar创建。
Scratcher [306⭐] - 刮刮卡小部件，临时隐藏用户内容，由Kamil Rykowski创建。
Image Sequence Animator [104⭐] - 一款简单的小部件，用于动画化一组图片，提供完全自定义控制，作为使用GIF文件的替代方案，由Ali Yigit Bireroglu创建。
Beautiful_Popup [452⭐] - 美化应用弹出窗口，由jaweii创建。
Credit Card Form [317⭐] - 动画信用卡输入表单，由Origogi创建。
Animated Selection Slide - 通过滑动实现动画化的选择小部件，由Sezgin Bilgetay创建。
Flutter Tags [332⭐] - 带有不同自定义选项的标签小部件，由Di Natale Antonino创建。
Flutter Neumorphic [1329⭐] - 用于Flutter的现成Neumorphic套件，支持🕶️暗黑模式。
Dough [388⭐] - 创建可压缩用户界面的小部件，由Josiah Saunders创建。
Card Settings [356⭐] - 用于构建设置表单的包，由codegrue创建。
Timelines [413⭐] - 强大且易于使用的时间轴包，由Chulwoo Park创建。
Timeline Tile [446⭐] - 用于构建美观和可自定义时间轴的瓷砖小部件，由Julio Bitencourt提供。
Rounded Loading Button [127⭐] - 带有加载指示器的按钮，包括成功和错误动画，由Chris Edgington创建。
PlutoGrid [182⭐] - 可以通过键盘控制的Web和桌面数据表格，由bosskmk创建。

粘粘头部

Sticky Infinite List [128⭐] - 带有粘性标题的高度可配置的多向无限列表，由TatsuUkraine提供。
Sticky Header [534⭐] - 带有粘性头部效果的组件，由Romain Rastel提供。
Sticky Headers [539⭐] - 可配置的带粘粘头部效果的组件，由 Simon Lightfoot提供。

抽屉

Hidden Drawer Menu [164⭐] - 漂亮的抽屉模式菜单功能带有透视动画，由Rafael Almeida Barbosa提供。
Flutter Inner Drawer [211⭐] - 创建内部抽屉（左/右）的简单方法，您可以在其中输入列表菜单，由Di Natale Antonino提供。

底栏

Fancy Bottom Navigation [404⭐] - 动画底部导航，由Tony Owen提供。
Circular Bottom Navigation [314⭐] - 漂亮的动画底部导航栏，由Iman Khoshabi提供。
Bottom Navy Bar [550⭐] - 美丽多彩的动画底部导航栏，由Pedro Massango提供。
Titled Navigation Bar [184⭐] - 动画底部导航栏，可在图标和标题之间切换，由Pedro Massango提供。

底部表单

Rubber Bottom Sheet [298⭐] - 弹性材料设计的底部表单，由Mattia Crovero提供。
Modal Bottom Sheet [536⭐] - 带材料设计，Cupertino iOS 13或自定义外观的模态底部表单，由Jaime Blasco提供。
Google Nav Bar [409⭐] - 一款现代化的 Google 风格导航栏，由 Sooxt98 创建。

滑块

RangeSlider [237⭐] - 滑动选择范围的Flutter组件，由Didier Boelens提供。
Fluid Slider [211⭐] - 具有最小设计和流体状动画的滑块，由 Vamsi Krishna提供。
Flutter Xlider [216⭐] - 具有RTL支持的水平和垂直材料设计滑块和范围滑块，由Ali-Azmoud提供。

UI 助手

可重新排序 [442⭐] - 通过拖放实现表格、行、列、Wrap(Grid)和SliverList元素的重新排序，由Hansheng Chiu开发。
液体下拉刷新 [922⭐] - 一个美观且可自定义的刷新指示器，由Ayush Agarwal开发。
无限列表视图 [206⭐] - 可在两个方向上进行无限滚动的列表视图，由Simon Lightfoot开发。
离线 [742⭐] - 用于处理离线/在线连接的整洁工具，由Jeremiah Ogbomo开发。
滚动到索引 [332⭐] - 为SliverList/ListView滚动到指定索引的子元素，由Jerry Chen开发。
可见区域通知列表 - 当小部件在提供的区域内可见时，通知的列表视图，由Vamsi Krishna开发。
展示视图 [687⭐] - 在iOS和Android上展示应用程序功能的方式，由Simform开发。

材料设计

Unicorn Speed Dial [229⭐] - 带有快速拨号Flutter浮动动作按钮，由 Tiago Martins提供。
Slidable [1473⭐] - 带有左右滑动操作的可滑动列表项组件，由 Romain Rastel提供。

Cupertino 设计

Peek & Pop [138⭐] - 基于iOS功能的Peek＆Pop实现，由Ali Yigit Bireroglu提供。

效果

磨砂玻璃 - 由Collin Jackson创建的渲染效果。
视差效果 [735⭐] - 由Iiro Krankka创建的ViewPager。
闪光效果 [1387⭐] - 在内容加载时显示闪光效果，由HungHD创建。
波浪效果 [742⭐] - 显示带有自定义颜色、持续时间、浮动和模糊效果的波浪效果，由RockerFlower创建。
液体滑动 - 使用液体滑动切换堆叠的容器，由Sahdeep Singh创建。
图片滤镜 [297⭐] - 对图像应用滤镜，由Sharafudheen KK创建。
闪耀效果 [137⭐] - 通过动态光源位置创建漂亮的阴影效果，由Jonathan Monga创建。
Clay Containers [369⭐] - 用于创建自定义设计的Neumorphic小部件基础，由Michael Charles创建。
日历
日历小部件 [162⭐] - 由 David Bennett 制作的日历小部件。
日历轮播小部件 - 由 dooboolab 制作的日历轮播小部件。
表格日历 [1167⭐] - 由 Aleksander Woźniak 制作的整洁组织的表格日历，具有垂直自动调整大小的功能。
时间计划表 [66⭐] - 由 Mohammad Jamalianpour 制作的美观、易于使用和可定制的时间计划表，适用于Flutter移动、桌面和Web端。

基于后端驱动

动态小部件 [1100⭐] - 使用JSON构建动态用户界面，JSON格式与Flutter小部件代码非常相似，由 Denny Deng 制作。

图片

轮播滑块 [1178⭐] - 由 serenader 制作的轮播滑块小部件，支持无限滚动和自定义子部件。
视差图片 [238⭐] - 由 Anatoly Pulyaevskiy 制作的视差图片效果。
照片查看 [1478⭐] - 可缩放的图片查看器，带有加载占位符，由 Renan C. Araújo 制作。
SVG [1270⭐] - SVG解析、渲染和小部件库，由 Dan Field 制作。
图片裁剪 [814⭐] - 支持比例、旋转和缩放的图片裁剪，由 HungHD 制作。
缓存网络图片 [1911⭐] - 显示来自互联网的图片并将它们保存在缓存目录中。
Lottie [665⭐] - 使用airbnb流行的After Effects动画库，由 xvrh 制作。
位图 [128⭐] - 使用Dart FFI进行位图操作（如对比度和曝光），由 Renan C. Araújo 制作。
裁剪 [171⭐] - 在Android、iOS、Web和桌面上裁剪任何小部件/图片，由 Mahdi K. Fard 制作。

图片选择器

图片选择器 - 图片选择，由 Collin Jackson 制作。
微信资产选择器 [811⭐] - 微信风格的资产选择器，支持多个资产，由 Alex Li 制作。

地图

Google Map View [404⭐] - Google地图插件，由 AppTree Software提供。
GeoCoder [122⭐] - 提供正向和反向地理编码库，由 Aloïs Deniel提供。
Map [416⭐] - 基于Leaflet的，可定制的地图解决方案，由 AppTree Software提供。
Mapbox GL [239⭐] - 交互式，可定制的矢量地图。
AMap [421⭐] - 高德地图插件，由fluttify-project。

图表

环形图 [355⭐] - 由 Victor Choueiri 制作的动画径向和饼图。
Sparkline [245⭐] - 由 Victor Choueiri 制作的Sparkline图表。
Charts [2505⭐] - Google Charts团队制作。
蜡烛图 [358⭐] - OHLC和交易量图表，由 Trent Piercy 制作。
FCharts [321⭐] - 美观、响应式、动画效果的图表，由 Keenan Thompson 制作。
FL Chart [3846⭐] - 在Flutter中绘制出色的图表，由 Iman Khoshabi 制作。
贝塞尔图表 [401⭐] - Flutter中美观的贝塞尔线图小部件，具有高度交互和可配置性，由 Diego Velasquez 制作。
Echarts [533⭐] - 大量高级响应式图表集合，由 LIN Chen 制作。
Graphic [383⭐] - 基于图形语法的数据可视化库，由 LIN Chen 制作。

Fluro [3362⭐] - Flutter中最亮、最时尚、最酷的路由器，具有导航、通配符、查询和过渡效果，由 Posse 制作。
PageView Indicator [132⭐] - 为PageView构建页面指示器，由 Leo Cavalcante 制作。
深层链接导航 [53⭐] - 在Flutter中实现完整的深层链接导航的优雅抽象，由 Dennis Krasnov 制作。
Get [1219⭐] - 一个应用于Flutter的高性能状态管理，智能依赖性注入和路由管理的插件，由Jonny Borges。

验证

Local Auth - 支持Touch ID, 指纹，锁屏识别验证的Flutter库。
Login [545⭐] - 自持Face ID, Touch ID, 和指纹识别验证的Flutter库，由Rody Davis提供。
Google Sign-In - Google 登录SDK.
Firebase Auth - Firebase 登录SDK.
Facebook Login [374⭐] - 使用原生Android和iOS的Facebook登录SDK进行身份验证 Iiro Krankka。
Apple Sign-In [145⭐] - 苹果登录插件，由Tom Gilder。
OAuth [74⭐] - Buffer, Strava, Unsplash, Github 登录验证，由 Joe Birch提供。
Instagram - Instagram 登录验证由 Wilfried Mbouenda Mbogne提供。
Firebase Phone Auth [266👏] - 电话号码通过短信身份验证，由 Gildásio Filho提供。
SimpleAuth [56⭐] - Azure Active Directory, Amazon, Dropbox, Facebook, Github, Google, Instagram, Linked In, Microsoft Live Connect, Github的登录验证，由 James Clancey提供。
Flutter AppAuth [120⭐] - 提供围绕AppAuth iOS和Android SDK的包装的插件，由Michael Bui提供。

文字和富文本

Markdown null - Flutter的Markdown渲染器。它支持原始格式，但不支持内联HTML。
Masked Text [244⭐] - 由 Ben-hur Santos Ott 制作的带有自定义和货币格式的蒙版文本。
Zefyr [2016⭐] - 由 Memspace 制作的柔和且温和的富文本编辑器。
AutoSizeText [1496⭐] - 自动调整文本大小，使其完美适应边界，由 Simon Leier 制作。
Parsed Text [190⭐] - 基于内容识别的交互式文本，还支持正则表达式，由 Fayeed Pawaskar 制作。
TeX [186⭐] - 使用完整的HTML和JavaScript支持来渲染数学方程式，由 Shahzad Akram 制作。
Code Field - 可定制的代码字段小部件，支持语法高亮，由 Bertrand Bevillard 制作。

表单

Form Builder [935⭐] - 简化构建表单、验证字段、对变化做出反应和收集最终用户输入的框架，由 Danvick Miller 制作。
Reactive Forms [233⭐] - 基于模型驱动的方法处理表单输入和验证，受到 Angular 的 Reactive Forms 的启发。

分析

Usage [123⭐] - 用于命令行、Web 和 Flutter 应用程序的 Google Analytics 封装。
Firebase Analytics - 连接到 Firebase Analytics API。
Pure Mixpanel [21⭐] - 用于流行的 Mixpanel.com 的分析工具，由 Nick Manning 制作。

国际化

GenLang [88⭐] - 国际化代码生成器，由 King Wu 制作。
Flutter Translate [279⭐] - 国际化（i18n）库，由 Florin Bratan 制作。
attranslate - 通过 fkirc 制作的自动化翻译 ARB 或 JSON 文件工具。

样式

Flutterial [1437⭐] - Flutter 材料主题浏览器，由 Erick Ghaumez 制作。
Pigment [184⭐] - 在 Flutter 中使用颜色的简单但实用的包。

媒体

音频

Flutter Audio Recorder - 提供完整的录音控制和访问录音详细信息，如电平测量，由 Wenyan Li 制作。
Audio Recorder [169⭐] - 录制音频并将其存储在本地，由 Jordan Alcaraz 制作。
Flutter Sound [666⭐] - 一手掌握的 Flutter 音频录制和播放器，由 dooboolab 制作。
AssetsAudioPlayer [567⭐] - 同时播放来自资源/网络/文件的音频，并显示通知 [android / ios / web / macos]。
Audio Service - 系统后台音频支持，由 Ryan Heise 制作。教程由 Suragch 提供。

视频

WebRTC [2747⭐] - iOS/Android 的 WebRTC 插件，由 CloudWebRtc 制作。
Chewie [1353⭐] - 提供对视频播放的低级访问，由 Brian Egan 制作。
Video Trimmer [276⭐] - 可视化和修剪视频，由 Souvik Biswas 制作。
CamerAwesome [295⭐] - 社区相机插件改版，由 Apparence.io studio 制作。

语音

Speech Recognition [323⭐] - 语音转文本，由 Erick Ghaumez 制作。
OK Google - 集成 Google 助手，由 Marcin Szalek 制作。

存储

Firebase Storage - Firebase作为数据存储的插件。
Secure Storage [490⭐] - 提供钥匙串和密钥库存储，由 German Saprykin提供。

首选项

Streaming Shared Preferences - 基于流的键值存储，通过流实现共享首选项，由 Iiro Krankka 制作。

赚钱

Admob - 支持 iOS 和 Android 的插页式广告，由 Brett Nesbitt 制作。
Firebase AdMob - 使用 Firebase 进行广告集成。
Inapp Purchase [464⭐] - 从 react-native-iap 派生的“应用内购买”功能集合，由 dooboolab 制作。
Admob Flutter - 使用原生平台视图显示横幅广告的 Admob 插件，由 Youssef Kababe 和 Kevin McGill 制作。
Facebook Audience Network - 显示横幅广告、插页式广告、流式视频广告、激励视频广告和原生广告的 Facebook Audience Network 广告插件，由 Dreamsoft Innovations 制作。
Square In-App Payments SDK [283⭐] - 在应用中嵌入卡片输入表单以生成顾客提供的卡片信息或数字钱包的 Nonce，以进行支付，由 Square 制作。

模板

电影详情 [372⭐] - 由 Iiro Krankka 制作的电影详情页面。
Mates [482⭐] - 如何从 randomuser.me API 加载个人资料和一个漂亮的个人资料详情页面，由 Iiro Krankka 制作。
天气应用 [141⭐] - 使用 Canvas 和动画的天气应用，由 Alessandro Aime 制作。
TodoMVC [7528⭐] - 包含不同风格（Vanilla、Redux、built_redux）的 TODO 应用程序，由 Brian Egan 制作。
餐厅菜单 [553⭐] - 餐厅菜单，由 Braulio Cassule 制作。
UI 挑战 [1272⭐] - 个人资料、旅行、美食应用，由 Tomi Alagbe 制作。
Cupertino 设置 [219⭐] - iOS 设置，由 Matthias Rupp 制作。
音乐播放器 [205⭐] - 音乐播放器组件，由 Tobe O 制作。
仪表盘 [814⭐] - 仪表盘和商店项目，由 Ivascu Adrian 制作。
Todo [519⭐] - 来自 Dribble 的 TODO 模板，由 Marc L 制作。
卡片滑动动画 [462⭐] - 卡片滑动模板，由 Ruchika Gupta 制作。
UI 工具包 [5707⭐] - 一套有用的 UI 工具包，由 Pawan Kumar 制作。
图书 [300⭐] - 由 Ardiansyah Putra 制作的书架应用。
漂亮的登录界面 [1497⭐] - 设计优美且流畅的登录模板，由 Hugo Extrat 制作。
Liquid Pay 支付应用 [251⭐] - 由 Long Hoang 制作的 Liquid Pay 应用概念。
绘图应用 [208⭐] - 示例绘图应用，展示如何允许用户在画布上绘图，并提供颜色选择器和画笔粗细调节器，由 Jake Gough 制作。
入门套件 [596⭐] - App Store 实现，用于学习 Bloc、RxDart、Sqflite、Fluro 和 Dio，由 King Wu 制作。
Feather [472⭐] - 美观的天气应用程序，包含 RxDart、Dio、BLoC、i18n、单元测试和小部件测试，由 Jakub Homlala 制作。
克隆 UI 挑战 [1280⭐] - 一系列有用的 UI 克隆，由 Javier González 制作。
FlutterFoodybite [1113⭐] - 优美的美食应用 UI 模板，由 JideGuru 制作。
Flutter 示例 [2464⭐] - 一系列优秀的 Flutter 示例，由 Diego Velásquez 制作。
ActingWeb First_App [285⭐] - 初学者应用程序，包含用于团队开发的生产级应用程序的基本元素，由 Greger Wedel 制作。
智能洗衣机 [590⭐] - 由 Tomasz Pawlikowski 制作的智能洗衣机 UI 挑战应用，采用 Box2D 物理引擎。
美观的时间轴 [186⭐] - 一组美观的时间轴，由 Julio Bitencourt 制作。

Clone

GitTouch [979⭐] - GitHub，GitLab，Bitbucket和Gitea的开源移动客户端，由Rongjian Zhang提供。

机器学习

MLKit [329⭐] - Firebase 机器学习套件，由Naoya Yoshizawa。
m2gen [1667⭐] - CLI工具可将ML模型转换为本地Dart代码，由BayesWitnesses。

视觉识别

ML Vision Camera Stream [218⭐] - 由 Aumard Jimmy 和 Santetis 制作的 ML Vision 相机流应用，可进行 QR 码、人脸等识别。
Google Mobile Vision [433⭐] - 由 Eduardo Folly 制作的 Google Mobile Vision 库。

Augmented Reality

ARKit Plugin [470⭐] - ARKit包装器-苹果的iOS增强现实平台，由Olexandr Leuschenko。
ARCore Plugin [201⭐] - 使用ARCore平台增强现实，由Gian Marco Di Francesco。

插件

Pub packages - Dart Pub 仓库的包筛选器。
Plugins - 官方 Flutter 团队的插件。

设备

WebView [1232⭐] - 一个WebView插件，由Hadrien Lejard提供。
Location [595⭐] - 位置服务，提供位置，以及连续位置的回调，由 Lyokone提供。
Battery - 提供访问有关电池的各种信息。
Proximity Sensor Plugin - 提供访问接近传感器也叫近距离传感器的能力，比如手机靠近脸后屏蔽操作之类的，由 Manoj NB提供。
Geolocation [196⭐] - 功能齐全的地理定位插件：当前位置，位置更新，地理编码，地点等，由 Loup提供。
Local Notifications [1203⭐] - 用于显示本地通知的插件，由 Michael Bui提供。
Device Calendar - 提供修改用户日历能力的插件，由Built to Roam提供。
Badger [175⭐] - 提供更新APP启动图标上的小红点能力的插件，由 Edouard Marquez提供。
UDID [135⭐] - 用于在Android/iOS设备上获取一个持久的 UDID，即使重新安装App，由 Leon Kukuk提供。
Downloader [472⭐] - 下载器，创建和管理下载任务，由 HungHD提供。
InAppBrowser [1002⭐] - 添加内联WebView小部件或打开应用程序内浏览器窗口，由 Lorenzo Pichilli提供。
AppAvailability [57⭐] - 列出，启动并检查已安装的应用，由 Lorenzo Pichilli提供。
Aeyrium Sensor [49⭐] - 一个插件，可以轻松访问Android和iOS设备上的Pitch and Roll， Diego Velásquez提供。
File Picker [392⭐] - 本机文件浏览器加载，支持绝对文件路径，由Miguel Ruivo。
VPN - 访问 VPN 服务，由Jason C.H。
Geolocator - Flutter地理位置插件，可轻松访问特定于平台的位置服务，由Baseflow。
Permission Handler - Flutter权限插件，提供跨平台（iOS，Android）API来请求和检查权限，由Baseflow。

扫码器

QR Code Reader [197⭐] - QR 扫描插件，由Matheus Villela提供。
Fast QR Reader View [236⭐] - 快速的QR扫码插件，由 Facundo Medica提供。

蓝牙 / NFC / 信号灯

Blue [1423⭐] - FlutterBlue是Flutter的蓝牙插件，由Paul DeMarco提供。
Beacons [64⭐] - Flutter beacons 插件，由 Loup提供。
NFC Reader [203⭐] - NFC 读取器，由Matteo Crippa。
Beacon broadcast [54⭐] - 将手机变成信标的库，由Paulina Szklarska。
Reactive Ble [84⭐] - 处理多个设备的BLE操作，由Philips Hue。
NFC Manager [29⭐] - 适用于iOS和Android的通用NFC插件，由Naoki Okada。

存储

Sqflite [2289⭐] - SQLite Flutter 插件，由 Alexandre Roux 开发。
Moor - Moor 是一个易于使用、反应式、类型安全的 Dart 和 Flutter 持久化库，由 Simon Binder 开发。

服务

Dialogflow [186⭐] - 用于与 Dialogflow 轻松集成的插件，由 Victor Rances 开发。
Intercom [23⭐] - 将 Intercom 集成到你的应用程序中，由 Maido Kaara 开发。
OneSignal [497⭐] - 推送通知服务，由 OneSignal 开发。
Place Dialog [45⭐] - 返回应用程序的地点的地点选择对话框，由 David Bennett 开发。
App Rating [30⭐] - 请求和撰写应用商店和 Google Play 的评论，由 Rody Davis 开发。

框架

状态管理

Standard

Bloc [8181⭐] - 一套帮助实现 BLoC 设计模式的包集合，由 Felix Angelov 开发。
MobX [2037⭐] - 使用透明功能响应式编程（TFRP）来增强应用程序中的状态管理。从 Js/React 领域移植的 MobX。
Provider [3974⭐] - Flutter 的状态管理库，由 Remi Rousselet 开发。
RiverPod [2214⭐] - Provider 的不同实现，由 Remi Rousselet 开发。
GetX - 无需上下文的状态管理和导航，由 Jonny Borges 开发。
Binder [167⭐] - 一种轻量而强大的将应用程序状态与业务逻辑绑定的方式，由 Romain Rastel 开发。

Redux / ELM / 依赖注入

Built redux [81⭐] - 自动订阅 Redux Store 的包。基于 Built 模式，由 David Marne 开发。
Redux.dart [486⭐] - Redux 在 Dart 中的移植版本，包括一系列的中间件、Flutter 集成和时间旅行开发工具，由 John Ryan 和 Brian Egan 开发。
Redux [1522⭐] - 与 redux.dart 配合使用的工具，可以轻松使用 Redux Store 构建 Widgets。
Inject [847⭐] - 编译时依赖注入，由 Google 开发。
Flux [368⭐] - Google 的 Flux 框架的实现。
Fish [7214⭐] - 阿里巴巴的 Redux 实现。
Async Redux [199⭐] - 无需样板代码的 Redux。支持同步和异步的 reducer，由 Marcelo Glasberg 开发。

Widgets

Hooks [1366⭐] - 小部件之间的高级代码共享，由Remi Rousselet。
Functional widget [321⭐] - 代码生成器将小部件作为带有注释的函数编写，由Remi Rousselet。

数据

Graphql [2796⭐] - GraphQL 规范的实现，由 Zino App B.V. 开发。
GeoFlutterFire [244⭐] - Flutter 的 GeoFirestore 实现，由 Darshan Gowda 开发。
Ferry [334⭐] - 强大且可扩展的 GraphQL 客户端，由 Sat Mandir Khalsa 开发。

后端

Dynamic Widget [1100⭐] - 使用 JSON 构建动态 UI，JSON 格式与 Flutter Widget 代码非常相似，由 Denny Deng 开发。
NETCoreSync - 面向多个客户端的集中式数据库同步框架，基于 Moor 库，由 Aldy J 开发。
Parse for Flutter [394⭐] - 开源的后端框架，由 ParsePlatform 开发。

动画

Sequence Animation [338⭐] - 由 Norbert Kozsir 开发的复合交错动画。
SpinKit [2405⭐] - 由 Jeremiah Ogbomo 开发的动画加载指示器。
Villains [328⭐] - 由 Norbert Kozsir 开发的页面过渡动画。
AnimatedTextKit [1268⭐] - 由 Ayush Agarwal 开发的一组酷炫文本动画。
Drawing Animation [384⭐] - 基于 SVG 路径数据创建绘制线条动画，由 Carl Hauck 开发。
Simple Animations - 由 Felix Blaschke 开发，轻松创建令人赞叹的自定义动画。
Flutter-animation-set [264⭐] - 由 efoxTeam 开发，轻松构建动画集合。
Staggered Animations [977⭐] - 由 mobiten 开发，轻松为您的 ListView、GridView、Column 和 Row 添加交错动画。
Animate Do - 受 Animate.css 启发的动画包，由 Fernando Herrera 开发。
Funvas [361⭐] - 由 creativecreatorormaybenot 开发，创建有趣的基于时间的画布动画。

Web

响应式框架 [702⭐] - 自动适应不同屏幕尺寸的用户界面。简化响应式设计，由 Codelessly 开发。

实验性

本节包含采用实验性或非常规性方法的库。

styled_widget [671⭐] - 通过使用方法定义小部件来简化小部件树结构，由Rein Gundersen Bentdal。

引擎

渲染

Graphx [293⭐] - 受 Flash 启发，使绘图和动画变得极其简单，由 Roi Peker 开发。

游戏引擎

Flame [5173⭐] - 极简主义的游戏引擎，由 Luan Nico提供。
SpriteWidget [1186⭐] - 用于构建复杂，高性能动画和2D游戏的工具包，由Viktor Lidholt提供。

开源游戏

Flip [201⭐] - Reversi 游戏，由 Andrew Brogdon 开发。
2048 [205⭐] - 2048 游戏，由 Anuran Barman 开发。
TRex [316⭐] - 著名 Chrome Trex 游戏的移植版，由 Renan C. Araújo 开发。
Crush [409⭐] - 如 Candy Crush、Bejeweled 一样构建 Math-3 游戏的示例，由 Didier Boelens 开发。
Slide Puzzle [152⭐] - 经典的滑块（15）拼图游戏，由 Kevin Moore 开发。
Tetris [1280⭐] - 俄罗斯方块游戏，由 YangBin 开发。
Party Charades [165⭐] - 派对字谜游戏，由 Kamil Rykowski 开发。
Ghost Rigger [159⭐] - 像素朋克风格的拼图游戏，由 Iain Smith 和 Julio Ernesto Rodríguez Cabañas 开发。
Space Empires [32⭐] - 一款 4X 太空主题的策略游戏，由 Satyam Sharma 开发。

游戏引擎资源

Awesome Flame - Flame 游戏引擎的精选列表，包含最佳 Flame 游戏、项目、库、工具、教程、文章等，由 Flame Engine 维护。

开源App

高级

History Of Everything [5887⭐] - 人类历史的动画垂直时间线，由 2D, Inc 开发。
Developer Quest [2917⭐] - 成为技术领导者，消灭虫子，由 2D, Inc 开发。
AppFlowy [12156⭐] - 开源的 Notion 替代方案。你对数据和自定义有绝对控制。使用 Flutter 和 Rust 构建，由 AppFlowy 团队开发。

Top

Flutter Team Samples [8245⭐] - 示例集合（包括地图，json，Material和Cupertino）由 Flutter team提供。
Flutter Common Widgets [22040⭐] - 收集中文官方小部件演示和文档，以帮助开发人员快速学习，由Alibaba Auction Frontend Team。
Meme Chat [471⭐] - 使用Flutter开发的的聊天App，该App用到了Firebase，Google登录，摄像头等。
Flitter [178⭐] - 使用Flutter开发的Gitter 客户端，该App用到了Redux 与 Jaguar，由Hadrien Lejard 和 Kevin Segaud提供。
Lime [335⭐] - 使用Flutter开发的Lime客户端。
Planets [655] - Flutter Planets app及教程，由Sergi Martínez提供。
NewsBuzz [444⭐] - 使用News API在Flutter中创建的新闻App用于获取实时数据，Firebase用作后端和身份验证器，由 Ankur Kedia提供。
DroidKaigi2018-flutter [485⭐] - DroidKaigi 2018东京的非官方会议App ，由konifar提供。
Music Player [1112⭐] - 全功能音乐播放器App，由Pawan Kumar提供。
WhatTodo [761⭐] - Flutter实现的的简单Todo App，可以每天跟踪您的任务，由Burhanuddin Rashid提供。
FlutterGram [1454⭐] - 使用Firebase / Firestore实现Flutter版的Instagram App，由MDanics提供。
BookSearch [419⭐] - Flutter实现的带有搜索功能的电子书，由Norbert515提供。
Cinematic [757⭐] - Flutter实现的Cinematic 客户端，由Aaron Oertel提供。
Beer-Me-Up [377⭐] - Flutter实现啤酒日志App，由Benoit Letondor提供。
Trace [573⭐] - 现代而强大的加密投资组合和市场资源管理器，由 Trent Piercy提供。
Taskist [549⭐] - Taskist是任务管理的ToDo List App，由 Hugo EXTRAT提供。
Tourism [213⭐] - 基于redux w / animations＆i18n的旅游应用程序，由 blueMix提供。
Trinity Orientation @ Univ Toronto [454⭐] - 多伦多大学迎新周，由 Matthew Tory提供。
Transform Widget - 图像小部件作为3D游戏引擎精灵，由Paul Thomas提供。
Deer [238⭐] - 使用BLoC模式构建的简约Todo Planner，由Aleksander Woźniak提供。
TailorMade [210⭐] - 结合使用ReBLoC和Firebase Cloud Store和功能来管理时装设计师的日常工作，由Jeremiah Ogbomo。
Instory [173⭐] - 具有精美UI的Instagram故事下载器，由Sarath提供。
Spacex-Go [492⭐] - 简单但功能强大的开源SpaceX启动跟踪器，由jesusrp98提供。
Superhero Interaction [208⭐] - 酷超级英雄互动动画，由Pinkesh Darji提供。
Reply [469⭐] - “答复”材料设计案例研究，由Frederik Schweiger提供。
Enigma - 端到端加密的隐私聊天，由AmitJoki。
Chillify - 使用Provider和Bloc模式制作的精美音乐应用，由Karim Elghamry提供。
Pokedex - Pokedex应用程序具有精美的用户界面和流畅的动画，由Hung Pham提供。
Timy Messenger [1504⭐] - 群发消息应用程序，重点是组织活动，由Miguel Beltran 与 Franz Heinfling提供。
GitJournal [507⭐] - 在Git Repo中记录数据，由Vishesh Handa提供。
AuthPass [372⭐] - 与手机和台式机兼容的Keepass密码管理器，由hpoul提供。
Fwitter [852⭐] - 使用Firebase解决方案的完整Twitter克隆，由Sonu Sharma提供。
Harpy [825⭐] - 由Roberto Doering开发的功能丰富的Twitter客户端。

实用工具

json-to-dart - JSON在线转Dart工具，支持空安全。
Launcher Icons - 由 Mark O’Sullivan 和 Franz Silva 轻松生成应用程序的启动器图标。
FlutterIcon [310⭐] - 由 Mike Hoolehan 创建的图标集生成器。
FVM [2233⭐] - Flutter版本管理：一个简单的命令行工具，用于管理Flutter SDK的版本。
Environment Configuration [86⭐] - CLI工具，用于为应用程序环境生成.env配置文件，由 TatsuUkraine 创建。
Flutter Flavorizr [160⭐] - CLI实用工具，可在不到3分钟的时间内轻松为Android和iOS生成不同的应用程序风格，由 Angelo Cassano 创建。
Fontify [77⭐] - CLI工具，用于将SVG图标转换为OTF字体并生成适用于Flutter的类，由 Igor Kharakhordin 创建。
FlutterGen [791⭐] - 用于生成图像、字体、颜色等的资产代码的生成器，摆脱基于字符串的API。
Very Good Cli [1135⭐] - Dart的非常好的命令行界面工具，由 Very Good Ventures 创建。
Flutter Sidekick [544⭐] - 简单的应用程序，使Flutter开发更加愉快，由 Leo Farias 创建。
Dart Code Metrics [430⭐] - 附加的代码度量标准检查工具，检查代码度量、反模式，并为Dart分析器提供额外的规则，由 Dart Code Checker团队创建。

VSCode

Awesome Snippets - 常用类和方法的集合，由Nash提供。
Flutter Files - 通过上下文菜单快速生成BLoC模板文件，由Gorniv提供。
Flutter Intl - i18n从arb文件绑定，由Localizely提供。

IntelliJ / Android Studio

Enhancement_Suite [118⭐] - 搜索pub.dev库，更新版本，Bloc，Snippet等，由Marius Höfler提供。
Flutter Intl - 从Arb文件进行18n绑定，由Localizely提供。

桌面应用

Desktop Embedding [6950⭐] - Google提供的Flutter嵌入API的桌面实现。
Golang Desktop Embedder [5083⭐] - Golang桌面应用的Flutter嵌入器，由Pierre Champion开发。
Native Shell [372⭐] - Flutter的实验性嵌入器，由Matej Knopp开发。
Rust Desktop Embedder [1871⭐] - Rust桌面应用的Flutter嵌入器，由juju开发。
bitsdojo_window - 自定义Windows窗口的绘制样式，由BitsDojo开发。
Raspberry Pi Embedder [747⭐] - 适用于树莓派的轻量级嵌入器，由Hannes Winkler开发。
Fluent UI [566⭐] - Microsoft的Fluent Design System在Flutter中的实现，由Bruno D’Luka开发。
MacOS UI [492⭐] - 实现当前MacOS设计语言的小部件和主题，由Groovin Chip开发。
Ubuntu Yaru [134⭐] - Ubuntu桌面的独特外观和风格，由Ubuntu开发。
Awesome Flutter Desktop [516⭐] - 与Flutter桌面相关的精选资源列表，由LeanFlutter维护。

书籍

适应于初学者

Beginning App Development -，由Rap Payne提供。
Beginning Flutter -，由Marco Napoli提供。
Flutter for Beginners -，由Alessandro Biessek提供。
Flutter in Action - 完整的 Flutter 和 Dart 资源。
Learn Google Flutter Fast -，由Mark Clow提供。

Cookbooks

Practical Flutter -，由Frank Zammetti提供。

博客

附加

It’s All Widgets! - 由Hillel Coren，Thomas Burkhart，Simon Lightfoot和Scott Stoll共同维护的已发布应用程序的开放列表。
Awesome Flutter Linux - 由J-P Nurmi维护的精选的专为Linux的Flutter软件包和项目的列表。

好玩的

The One [381👍] - 一个有趣的视频。

硬件

Matrix2 - 由bus710开发的Sense Hat LED矩阵控制游戏。

指南和面试

面试问题 - 一份有帮助的问题列表，可以用来面试潜在候选人，由Whatsupcoders提供。
国际化Flutter入门套件 - 由专家编写的指南，由Beyza Sunay Guler和Nawal Alhamwi提供。

社区

演讲材料

Logo - 贴纸印象的logo。

交流

Gitter - 一个不错的Flutter交流渠道。
r/FlutterDev Subreddit - Reddit社区，由 u/JaapVermeulen提供。
Discord - Discord服务器讨论并获得帮助，由[Pritykin]提供。
Dev Discord - Discord服务器讨论并获得帮助，由 Pritykin提供。
Flutter Community - Flutter社区组件中心。
OpenFlutter - Make it easier 让Flutter更简单.
Hashnode - 阅读和撰写帖子，参与讨论或提问。

其他

Flutter活动 - 由@hillelcoren创建的Flutter活动列表。
FlutterX - 由Hillel Coren创建的可搜索资源列表。

最后

Flutter精彩课程推荐

Google I/O 2023 推出Flutter 3.10 快来看看都有哪些变化

Sun, 14 May 2023 00:00:00 +0800

今年的Google I/O满满的AI与狠活，而且还推出Flutter 3.10，接下来就让我带你一起来看看Flutter 3.10都有哪些变化吧！

说起，AI与Flutter 3.10，不得不提的是《ChatGPT + Flutter快速开发多端聊天机器人App》这门有主流AI技术和最新Flutter加持的课程。它⭐整合了ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手👏。

接下来我们回到正题，首先看此次更新的亮点：

发布了Dart 3，并引入到Flutter 3.10中；
iOS 默认使用了 Impeller；
Material更新到了M3版本，并且很多控件在M3版本下都有更新；
Web 可以无iframe 嵌套到其他应用；

另外，Flutter 3.10还包括许多Web、移动端、图形、安全等方面的改进。

引擎（Engine）方面的更新

Impeller

在3.7稳定版本中，Flutter官方在iOS上预览了Impeller。自那时以来，Flutter官方收到了许多用户的宝贵反馈，并加以解决。在此版本中，Impeller有超过250个提交，Flutter官方将Impeller设为iOS上的默认渲染器。使用Flutter 3.10构建的所有iOS应用默认使用Impeller。这些iOS应用将具有更少的卡顿和更稳定的性能。

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

以”Wonderous”应用中的”pull quote”屏幕为例。这些改进将几乎减少了这些屏幕的一半内存占用。减少内存使用还使GPU和CPU的负载稍微降低。”Wonderous”应用可能无法察觉到负载的降低。之前它的帧已经在预算范围内渲染，但这一变化应延长电池的使用寿命。

Impeller还能够更快地实现受欢迎的功能请求。其中一个例子是在iOS上支持更广泛的P3色彩范围。有关该功能的描述，请查看本文的其他部分。

社区的贡献加快了Flutter官方的进展，尤其是GitHub用户ColdPaleLight和luckysmg。他们编写了多个与Impeller相关的补丁，提高了保真度和性能。

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

Impeller的Vulkan后端仍在持续开发中。Impeller在Android上仍处于积极开发阶段，但尚未准备好进行预览。Flutter官方计划在不久的将来分享更多相关内容。

要了解Flutter官方的进展，请查看Flutter官方的GitHub项目板。

与性能（Performance）有关的更新

3.10版本除了Impeller之外，还包含了更多性能改进和修复。

消除卡顿

Flutter官方要感谢开源贡献者luckysmg。他们发现可以从Metal驱动程序中减少获取下一个可绘制层的时间。要获得此优势，你需要将FlutterViews的背景颜色设置为非空值。这个改变消除了在最新的iOS 120Hz显示器上的低帧率问题。在某些情况下，帧率提高了三倍。这帮助Flutter官方解决了六个以上的GitHub问题。这个改变非常重要，Flutter官方将一个修复补丁回溯到了3.7版本中。

在3.7稳定版中，Flutter官方将本地图片的加载从平台线程移到Dart线程，以避免延迟平台线程的vsync事件。然而，用户注意到这个在Dart线程上的额外工作也引起了一些卡顿问题。在此版本中，Flutter官方将本地图片的打开和解码从Dart线程移到了后台线程。这个改变消除了在具有大量本地图片的屏幕上可能出现的长时间暂停，同时避免了延迟vsync事件。在Flutter官方的本地测试和自动化基准测试中，这个改变将多个同时加载的图片的加载时间缩短了一半。

Flutter官方继续在Flutter的新内部DisplayList结构之上构建优化。在此版本中，Flutter官方添加了基于R-Tree的剔除机制。该机制在渲染器中更早地删除绘制操作的处理。这个优化加速了，例如，一个输出在屏幕外的自定义绘制器的渲染。Flutter官方的微基准测试显示，DisplayList处理时间减少了多达50%。具有裁剪的自定义绘制器的改进效果可能会有所不同。改进程度取决于隐藏绘制操作的复杂性和数量。

减少iOS启动延迟

在应用程序包中进行标识符查找的低效策略增加了应用程序的启动延迟。这个启动延迟与应用程序的大小成比例增长。在此版本中，Flutter官方修复了应用程序包标识符查找的问题。这将大型生产应用程序的启动延迟减少了100毫秒，约为30-50%。

减小体积

Flutter默认使用SkParagraph作为文本成型、布局和渲染的默认库，Flutter官方添加了一个标志以回退到传统的libtxt和minikin库。由于Flutter官方对SkParagraph有充分的信心，所以在此版本中Flutter官方移除了libtxt和minikin及其标志。这将减小Flutter的压缩大小约30KB。

稳定性

在3.0版本中，Flutter官方在渲染流程的后期启用了一项Android功能。这个Android功能使用了高级GPU驱动程序功能。当只有一个“脏”区域发生变化时，这些驱动程序功能只会重新绘制屏幕的较少部分。Flutter官方通过早期的优化和类似效果的图形流水线进一步改进了这一点。尽管Flutter官方的基准测试结果鼓励Flutter官方这么做，但出现了两个问题。首先，最大改进的基准测试可能不能代表实际使用情况。其次，支持此GPU驱动程序功能的设备和Android版本的范围证明很难找到。考虑到进展有限并且支持有限，Flutter官方在Android上禁用了部分重新绘制功能。

在Skia后端上，此功能在iOS上仍然启用。Flutter官方预计在未来的版本中与Impeller一起启用它。

两个API改进

在Flutter 3.10中APNG解码器与图像加载API有所改进。

APNG解码器

Flutter 3.10解决了Flutter官方最受关注的问题之一。它增加了对APNG图像的解码能力。你可以使用Flutter现有的图像加载API加载APNG图像。

图像加载API改进

Flutter备受尊敬的工程总监tvolkert对dart:ui的图像加载API进行了改进。Flutter官方添加了一个新方法instantiateImageCodecWithSize。它支持以下三个条件的图像加载用例：

加载时纵横比未知
有边界框约束
原始纵横比约束

例如，当应用程序尝试从一组可能性中从网络加载并显示一张图片时。

与移动端（Mobile）有关的更新

iOS

无线调试

现在，你可以在不使用数据线的情况下运行和热重载Flutter iOS应用程序了！在成功将iOS设备与Xcode进行无线配对后，你可以使用flutter run命令将应用程序部署到该设备上。如果遇到问题，请确保Window > Devices和Simulators > Devices下显示了设备旁边的网络图标。要了解更多信息，请查看Flutter官方的文档。

宽色域图像支持

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

拼写检查支持

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

自适应复选框和单选按钮

此版本将CupertinoCheckBox和CupertinoRadio小部件添加到Cupertino库中。它们创建与苹果样式相匹配的复选框和单选按钮组件。

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

优化Cupertino动画、过渡和颜色

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

更新CupertinoPageRoute过渡
在CupertinoSliverNavigationBar中添加标题放大动画
在CupertinoColors中添加了几个新的iOS系统颜色

PlatformView性能

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

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

Flutter现在支持插件的pubspec.yaml文件中的[sharedDarwinSource](https://docs.flutter.dev/development/packages-and-plugins/developing-packages#shared-ios-and-macos-implementations)键。该键表示Flutter应该共享iOS和macOS的代码。

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

应用扩展的新资源

Flutter官方添加了文档，供Flutter开发人员使用iOS应用扩展。这些扩展包括实时活动、主屏幕小组件和共享扩展。

为了简化创建主屏幕小组件和共享数据，Flutter官方在[path_provider](https://github.com/flutter/packages/pull/3450)和homescreen_widget插件中添加了新的方法。

跨平台设计的新资源

文档现在包括了针对特定UI组件的跨平台设计考虑。要了解更多关于每个UI组件的信息，请查看Flutter UX GitHub存储库中的讨论。Flutter官方非常感谢任何意见或反馈！

Android

Android CameraX支持

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

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

如果你想尝试，请选择使用CameraX实现。要选择使用CameraX，请在你的pubspec.yaml文件中添加以下行。

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

Flutter官方非常希望听到你的反馈意见，因为Flutter官方将继续添加更多的CameraX功能，并将CameraX作为默认实现。

DevTools

Flutter官方继续改进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和一些重大更新

弃用和重大变更

弃用的API

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

Android Studio Flamingo升级

在将Android Studio升级到Flamingo版本后，当尝试运行flutter run或flutter build你的Flutter Android应用时，可能会出现错误。这个错误是由于Android Studio Flamingo将其捆绑的Java SDK从11更新到17导致的。当使用Java 17时，早于7.3的Gradle版本无法运行。Flutter官方更新了flutter analyze --suggestions以验证此错误是否是由于你的Java SDK和Gradle版本之间的不兼容性引起的。

要了解修复此错误的不同方法，请查看Flutter官方的迁移指南。

弃用Window单例

此版本弃用了window单例。依赖于它的应用程序和库应该迁移到其他方案。这样可以为你的应用程序做好在未来版本的Flutter中启用多窗口支持的准备。

框架（Framework）方面的更新

Material 3

Material库现在与最新的 Material Design spec相匹配。这些变化包括新的组件和组件主题，更新的组件视觉效果等。开发人员必须使用useMaterial3主题标志“选择加入”这些变化。在下一个稳定版本中，useMaterial3将默认为true。

接下来会将Material 3统称为M3

如果要选择使用 Material 库的 M3 版本，请在 MaterialApp 主题中设置 useMaterial3: true。当创建一个新应用时，flutter create 命令会在你的主题中添加这个设置。

也可通过Flutter的demo app工程来查看useMaterial3的效果。

ColorScheme.fromImageProvider()

M3的所有组件都配置了主题的“ColorScheme”的默认颜色。默认的颜色方案使用紫色的不同深浅。你可以根据单个“seed”颜色或图像创建自定义的颜色方案。在演示中尝试这两种变化。生成的颜色方案应该看起来好看且易于使用。

NavigationBar

这是一个提供了M3版本的 BottomNavigationBar 小部件。虽然 M3 使用了不同的颜色、高亮和高度，但它的功能与以前一样。要覆盖 NavigationBars 小部件的默认外观，可以使用 NavigationBarTheme 小部件。虽然不需要将现有应用迁移到该组件，但对于新应用应该使用它。

NavigationDrawer

这是一个基于抽屉小部件的 M3 目标选择小部件。NavigationDrawer 显示了一个单选列表，其中包含了 NavigationDestinations 小部件。你还可以在这个列表中包含其他小部件。当需要时，NavigationDrawer 可以滚动。要覆盖 NavigationDrawers 小部件的默认外观，可以使用 NavigationDrawerTheme 小部件。

SearchBar 和 SearchAnchor

这些组件为搜索查询提供了预测文本功能。当用户输入搜索查询时，应用程序在“搜索视图”中计算出匹配的响应列表。用户可以选择其中一个响应，或者调整查询。要覆盖这些组件的 M3 设计，可以使用 SearchBarTheme 和 SearchAnchorTheme 小部件。

Secondary Tab Bar

M3允许你创建一个第二层的分页内容。要区分这个第二个Tab栏，可以使用TabBar.secondary。

M3中的日期选择器（DatePicker）更新

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

M3中的时间选择器（TimePicker）更新

M3版本的时间选择器（TimePicker）与日期选择器（DatePicker）一样，对常规和紧凑版本的小部件进行了颜色、布局和形状的更新。

M3中的底部弹出窗（BottomSheet）更新

除了M3版本的颜色和形状更新外，底部弹出窗（BottomSheet）现在增加了一个可选的拖动手柄，当设置showDragHandle为true时会显示。

M3中的列表项（ListTile）更新

M3版本的列表项（ListTile）更新了小部件的定位和间距。包括内容填充、前导和尾部小部件的对齐方式、最小前导宽度和垂直间距。API保持不变。

M3中的抽屉（Drawer）更新

M3版本的抽屉（Drawer）更新了颜色和高度，并进行了一些小的布局调整。

M3中的文本输入框（TextField）更新

M3对所有的文本输入框（TextField）小部件进行了更新，以支持原生手势操作。在鼠标上双击或三击与在触摸设备上双击或三击的效果相同。默认情况下，TextField和CupertinoTextField小部件都使用这些功能。

`TextField` 双击/点击手势

双击 + 拖动：在词块之间进行扩展选择。
双击 + 拖动：在词块之间进行扩展选择。

`TextField` triple click/tap gestures

三击

在多行的TextField中，当点击位置处于段落块内时，会选择该段落块（Android/Fuchsia/iOS/macOS/Windows）。
在多行的TextField中，当点击位置处于行块内时，会选择该行块（Linux）。
在单行的TextField中，会选择所有文本。

三点触控

在多行的TextField中，当点击位置处于段落块内时，会选择该段落块。
在单行的TextField中，会选择所有文本。

三击 + 拖动

在段落块内进行扩展选择（Android/Fuchsia/iOS/macOS/Windows）。
在行块内进行扩展选择（Linux）。

Flutter支持SLSA Level 1

Flutter框架现在符合软件构建供应链安全级别（SLSA） Level 1标准。这意味着实施了许多安全功能，包括：

脚本化的构建过程。Flutter的构建脚本现在支持在受信任的构建平台上进行自动化构建。在受保护的架构上进行构建有助于防止构建产物被篡改，提高供应链的安全性。
多方审批和审计日志。Flutter的发布流程仅在多个工程师的批准后才执行。每个执行都会生成可审计的日志记录。这些更改确保没有人可以在源代码和构建产物生成之间引入修改。
来源可信性。Beta版和稳定版现在使用来源可信性进行构建。这意味着构建框架发布产物的来源是可信任的，并且具有预期的内容。每个发布都会提供链接，以查看和验证在SDK存档上的来源可信性。

这项工作还使团队能够朝着符合SLSA L2和L3的要求迈进。这两个级别专注于保护构建过程中和之后的构建产物。

Web方面的更新

Flutter web应用改善了加载时间

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

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

基于Chromium的浏览器可以使用一个更小的自定义CanvasKit版本。托管的CanvasKit通过Google行业领先的CDN进行提供。这应该进一步提高性能。

元素嵌入

你现在可以从页面中的特定元素提供Flutter web应用。在此版本之前，你的应用程序只能填满整个页面或显示在iframe标签中。可以在GitHub中找到示例代码。

着色器支持

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

最后

Flutter精彩课程推荐

Flutter 3.7更新详解

Wed, 25 Jan 2023 00:00:00 +0800

⭐整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手👏

新年伊始，由 Flutter 3.7 正式版来「打头阵」！我们与整个 Flutter 社区们继续在 Flutter 3.7 中优化了框架，包括创建自定义菜单栏和层叠式菜单、更好的国际化工具支持、新的调试工具以及其他功能和特性等。

新的稳定版里，我们在持续改进一些特性，例如全局文本选择、Impeller 渲染速度、DevTools 以及一直以来都在优化的性能。让我们一起来快速探索 Flutter 3.7 的新特性吧！

增强对 Material 3 的支持

在 Flutter 3.7 中，以下的 widget 已经进行了 Material 3 的适配：

你可以直接在应用中的 ThemeData 里设置 useMaterial3 来启用 Material 3。只有在完整的颜色方案下才能展现出 Material 3 最完整的细节，你可以使用新的 Material 主题构建器生成你的主题配置，也可以通过 Flutter ThemeData 构造中的 colorSchemeSeed (颜色种子) 自动生成一整套的主题：

MaterialApp(
  theme: ThemeData(
     useMaterial3: true,
    colorSchemeSeed: Colors.green,
  ),
  // …
);

若想了解 Flutter 在 Material 3 上的支持进度，你可以在 GitHub 上查看 flutter #91605 号议题。

你也可以尝试 Material 3 示例，其中展示了所有主题的特性。

菜单栏和级联菜单

Flutter 现在可以创建菜单栏和级联菜单了。

在 macOS 上，你可以使用 PlatformMenuBar widget 来创建菜单栏，你的菜单栏将由 macOS 系统来渲染，而不是使用 Flutter。

此外，对于所有其他的平台，你可以定义一个 Material Design 菜单，它提供了级联菜单栏 (MenuBar)，或者使用由 UI 界面元素触发的 (MenuAnchor) 来创建一个级联菜单。这些菜单都是完全可自定义的，其中的菜单项可以是自定义的 widget，也可以使用新的菜单项 widget: (MenuItemButton 和 SubmenuButton)。

Impeller 预览版

Flutter 团队很高兴能在稳定版渠道上为大家带来 iOS 平台的 Impeller 渲染引擎预览。我们认为 Impeller 的性能已经达到甚至超越了大部分现有应用上的 Skia 渲染。在图像保真方面，Impeller 也已覆盖了大部分除极端条件以外的应用场景。我们希望能够在之后的稳定版本中将 Impeller 作为 iOS 平台的默认渲染引擎，如果你在体验时有任何问题，请继续在 GitHub 上提交 Impeller 的相关反馈。

尽管我们对 iOS 上 Impeller 满足现有应用的渲染需求有足够的自信，但仍然有部分 API 需要进行补充。你可以在 Flutter wiki 文档上看到目前 Impeller 的进度。用户及开发者在使用时可能会注意到 Impeller 与 Skia 之间的渲染细节区别，这些区别可能是 BUG，当你遇到时请记得提交反馈帮助我们定位并修复它。

Impeller 的进展飞速离不开社区贡献者的支持。尤其是 ColdPaleLight、guoguo338、JsouLiang 以及 magicianA 这些开发者，在此次发布版本的 Impeller 的 291 次提交中有 31 次 (>12%) 是他们提交的。非常感谢他们的帮助！

我们也在继续推进 Vulkan 作为 Impeller 的渲染后端 (在一些老的设备上会降级到 OpenGL)，但是 Android Impeller 尚未准备好进行公开预览。我们会在未来的发布中分享更多正在积极进行的 Impeller 开发进程，包括桌面和 Web 平台的支持。

若你感兴趣，可以关注 GitHub 上的 Impeller 项目板来跟进开发进度。

iOS 发布校验

当你在构建一个发布版本的 iOS 应用时，Flutter 会为你提供项目设置检查清单来确保你的应用已经准备好发布到 App Store。

现在 flutter build ipa 命令会校验项目的一部分设置，并且在清单中告知你在发布前进行更改。

开发者工具更新

在本次发布中，开发工具也带来了新的特性和体验优化。DevTools 的内存调试工具已经完成了一轮全面的调整。我们带来了三个新的选项卡：Profile、Trace 和 Diff，它们包含了先前的所有内存调试功能，也添加了更多利于调试的操作。现在你可以按照类或者内存类型对当前的内存分配进行分析，可以在运行时分析哪些代码调用了哪些部分的内存，也可以对比两个不同时间点的内存快照之间的差异来了解内存使用的细节。

以上的这些内存特性已经在文档中进行了介绍，若你感兴趣可以前往了解更多细节。

性能页面也有一些值得注意的新功能，该页面现在在顶部新增了 Frame Analysis (帧分析) 选项卡，它能够提供在 Flutter 中详细追踪大量消耗的某些帧和操作的一些建议。

除了以上的新功能，本次更新还有其他的问题修复和优化改进，包括查看器 (Inspector)、网络记录器的 CPU 记录器的问题修复。你可以查看下面的 DevTools 更新日志了解更多细节。

自定义上下文菜单

从新版本开始，你可以在 Flutter 应用的任意位置创建自定义的上下文菜单，也可以自定义内置的上下文菜单。

举例来说，你可以在用户选中邮件地址时，为文本框默认的选择菜单添加「发送邮件」的按钮 (代码地址)。contextMenuBuilder 参数也已经添加到现有包含上下文菜单的 widget 中。你可以在 contextMenuBuilder 中返回任何你想返回的 widget，也包括平台自适应的上下文菜单。

这一新特性也可以用于文本选择以外的场景。例如，你可以为一个 Image widget 的右键和长按操作添加「保存」按钮 (代码地址)。你也可以使用 ContextMenuController 在应用内的任意位置展示平台默认或者自定义的上下文菜单。

若想查看完整的示例，前往 Flutter 示例代码仓库了解更多。

Cupertino 系列 widget 迎来了两位新成员： CupertinoListSection 和CupertinoListTile，可用于展示 iOS 风格的滚动列表内容。它们是 Cupertino 版本的 ListView 和 ListTile。

滑动优化

此次版本发布中也包含了众多滑动相关的问题修复，包括触控板的交互优化以及在滑动组件中文本选择时的行为。

值得注意的是，macOS 的应用现在可以通过新物理滑动特性来体验与其有更高匹配度的滑动体验。

新的 AnimatedGrid 和 SliverAnimatedGrid 可以用于为新增和移除的内容展示动画。

最后，我们修复了自 Flutter 迁移至健全的空安全以来的一个问题，该问题影响了所有包含 itemBuilder 参数的滑动 widget (例如 ListView)。在迁移至空安全时，itemBuilder 的类型迁移至了 IndexedWidgetBuilder，即不允许返回 null，而在以前 null 可以用来代表列表已经到了底部等。该参数现已修改为 NullableIndexedWidgetBuilder。感谢 @rrousselGit 发现并修复了这个问题！

国际化工具和文档

Flutter 对国际化的支持已经焕然一新！我们对 gen-l10n 进行了重写以支持下述特性：

描述性的语法错误
嵌套或多个复数、选择和占位的消息内容

更多内容可以了解已经更新的 Flutter 应用里的国际化文档。

全局的选择优化

SelectionArea 现在已支持键盘操作。你可以通过键盘快捷键 Shift+→ 等快捷键进行选择。

后台 isolate

现在平台通道可以在任意 isolate 中进行调用。先前平台通道只能在主 isolate 中进行调用。优化后会让插件和混合开发调用 isolate 和宿主平台代码更加简单。更多内容可以阅读撰写平台代码文档以及介绍后台 isolate 通道文章。

文本放大镜

在 Android 和 iOS 上进行文本选择时会出现的放大镜现在也会在 Flutter 中出现了。它已经添加至了所有的文本选择，但是你也可以通过 magnifierConfiguration 禁用或者自定义。

插件代码迁移至 Swift

Apple 整将它们的代码迁移至 Swift，我们也希望能为开发者构建 Swift 插件的示例和指导。quick_actions 已经从 Objective-C 迁移至了 Swift，也可以作为 Swift 插件的最佳实践。如果你对帮助 Flutter 迁移第一方插件至 Swift 感兴趣，请参考 wiki 中的 Swift 迁移部分。

给 iOS 开发者准备的资源

我们新发布了一系列为 iOS 开发者准备的资源，包括：

废弃 Bitcode

从 Xcode 14 开始，watchOS 和 tvOS 的应用不再需要 bitcode，并且 App Store 也不再接收带 bitcode 的应用提交。因此，Flutter 也移除了 bitcode 的支持。

Bitcode 在 Flutter 应用中默认是关闭的，所以这也不应该会影响太多开发者的项目。但是，如果你曾经为你的项目手动启用过 bitcode，请尽快在升级到 Xcode 14 后关闭 bitcode。你可以使用 Xcode 打开 ios/Runner.xcworkspace 找到 Enable Bitcode 设置为 No，混合开发项目需要在宿主项目中禁用。

iOS 平台视图应用 BackdropFilter

我们为 iOS 原生视图添加了可以渲染高斯模糊的特性，现在嵌套在 BackdropFilter 中的 UiKitView 可以正确的渲染高斯模糊了。

你可以查看相应的设计文档了解更多。

内存管理

此次发布的版本对内存管理做了一些改进，这些改进的共同作用是减少由 GC 暂停引起的卡顿、减少由于分配速度和后台 GC 线程引起的 CPU 占用，并且降低内存占用。

例如，我们扩展了现有手动释放某些 dart:ui Dart 对象的本地资源的实践。先前在 Dart VM 垃圾回收 Dart 对象前，本地资源都将被 Flutter 引擎持有。通过对用户应用程序和我们的 benchmarks 分析，我们认为这种策略很多时候无法避免不合适的 GC 和过度使用内存。因此在此次更新中 Flutter 引擎添加了 API ，用于显式释放由 Vertices、Paragraph 和 ImageShader 对象持有的本地资源。

在我们迁移到此 API 的 Flutter 框架的 benchmarks 中，将 90% 的帧构建时间减少了 30% 以上，最终用户将体验到更流畅的动画和更少的卡顿。

此外，Flutter 引擎不再上报 Dart VM 中的 GPU 图像的大小。如上所述，当这些图像资源不再被需要时已由框架手动释放，如果这时继续按照 GPU 内存大小的 GC 策略上报至 Dart，会导致不必要的堆内存压力并进一步触发无效的 GC。类似的方法同样应用到了 Flutter 引擎中，用于回收 dart:ui 原生对象的隐式内存占用。

在我们的测试中，此更改省去了 widget 创建 GPU 常驻图像构建帧时的同步 GC 工作。

本次版本发布中，Flutter 引擎在动态更新应用状态至 Dart VM 方面有所进步。具体来说，Flutter 现在会使用 Dart VM 中 RAIL 风格的 API，让路由转场时渲染延迟更低，即让堆内存在转场时保持增长而不是进行 GC，避免造成动画的卡顿。目前这项改动不会带来太大的性能优化，但未来我们会将这项改进拓展到其他方法上，消除由 GC 带来的卡顿影响。此外，我们还修复了向 Dart VM 报告 Flutter 引擎已经闲置的一处逻辑错误，也减少了 GC 带来的卡顿。最后，在 Flutter 视图不再展示时，也会通知 Dart VM 进行处理，进一步优化了 Flutter 视图未显示时的内存占用。

放弃对 macOS 10.11 到 10.13 版本的支持

我们在 Flutter 3.3 发布的文章中提到过，Flutter 将不再支持 macOS 的 10.11 和 10.12 版本，自上个版本发布以来，通过进一步的分析发现，放弃对 macOS 10.13 的支持也不会造成太大影响，带来的收效却是可以帮助大幅简化代码库。这意味着，使用 Flutter 3.7 以及后续版本构建的桌面端应用程序将不能再在 macOS 10.11、10.12、10.13 版本中运行，Flutter 对 macOS 的最低10点要求版本提升至 macOS Mojave 10.14。

至此，Flutter 构建的 iOS 和 macOS 应用都已经包含了 Metal 的支持，OpenGL 后端渲染引擎已经从 iOS 和 macOS 嵌入器层被移除，移除后，压缩后的 Flutter 引擎体积降低了大约 100KB。

将 toImageSync 新增至 dart:ui 中

本次版本发布，将 Picture.toImageSync 和 Scene.toImageSync 方法直接加入到了 dart:ui，类似于 Picture.toImage 以及 Scene.toImage. 这样的异步方法，Picture.toImageSync 会直接返回一个 Picture 转 Image 的一个句柄，并在后台异步对 Image 进行光栅化。

当 GPU context 可用时，图像会在 GPU 中常驻，这意味着与 toImage 生成的图像相比它的绘制速度会更快。(toImage 生成的图像也可以实现 GPU 常驻，但目前还未实现)。

新的 toImageSync API 支持的例子：

快速捕捉一张昂贵的栅格化图片，以便跨多帧重复使用。
应用在图片的多路过滤器上
应用在自定义着色器上

一个例子是，Flutter 框架现已使用这个 API 以优化 Android 上的页面切换动画的性能，几乎减少了帧光栅化一半的时间且减少了卡顿，而且在支持这些刷新率的机器上动画可以达到 90 / 120 FPS。

自定义着色器支持的改进

本次发行版包含了许多关于 Flutter 对自定义着色器片段的优化支持。Flutter SDK 现已内置了一个着色器编译器，能够将 pubspec.yaml 文件中列出的 GSGL 着色器编译为目标平台的正确的平台特定对应的格式。此外，自定义着色器能够在开发阶段方便的执行 hot reload。自定义着色器目前已经在 iOS 上对 Skia 以及 Impeller 都支持了。

我们为社区中分享的样例感到印象深刻，期待能够未来能有更多关于 Flutter 中的自定义着色器的创意。

请参阅文档网站上的文档以及 pub.dev 上的 flutter_shaders package 了解更多。

字体资源支持热重载

在过去，将新的字体资源加入到 pubspec.yaml 文件的时候会需要重新构建应用后才能查看，不像其他资源可以直接热重载生效，现如今，字体清单文件的修改 (包括添加新字体) 后，也可以直接热重载到应用中立刻可见了。

减少 iOS 设备上动画效果的卡顿

有两项重要的来自社区成员 luckysmg 的贡献，帮助减少了 iOS 设备上动画效果的卡顿。特别是在 iOS 手势交互期间在主线程上添加一个虚拟的 CADisplayLink 以强制设定最大刷新率。此外，键盘动画也通过 CADisplayLink 设定了与 Flutter 引擎里 animator 相同的刷新率。由于新加入了这些变化，用户可以在 120Hz 的 iOS 设备上感受到更一致和流畅的动画效果。

结语

还是那句话，如果没有 Flutter 社区中优秀、热情贡献者们，Flutter 不会像现在这样优秀，在我们未来持续进行的这段旅程中，我们希望你可以知道，没有你们，我们无法做出这样的优秀成绩。感恩每一位贡献者！

我们的发展势头依旧，请期待未来的更新！

最后

Flutter精彩课程推荐

Flutter 3.3更新详解

Sun, 06 Nov 2022 00:00:00 +0800

⭐整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手👏

Flutter 3 是我们正式为全平台提供支持的一个重量级里程碑，距离它的发布仅过去了三个月，今天让我们有请 Flutter 3.3 正式版！近三个月我们并没有放慢更新迭代的速度——自 Flutter 3 发布以来，我们已经为 Flutter 合并了 5687 个拉取请求。

本次更新带来了 Flutter Web 平台、桌面端平台、文本处理的性能和其他更新内容。

同时我们也会介绍 go_router package、DevTools (开发者工具) 和 VS Code 扩展相关的更新内容。与我们一起阅读详细了解它们吧！

框架更新

全局选择

到现在为止，Flutter 在 Web 上的文本选择交互仍然没有达到预期。与 Flutter 应用不同，原生的 Web 应用会将每个节点构建为树形结构。在传统的 Web 应用中你可以轻松用拖动手势来选择网页上的节点，这在 Flutter Web 应用中无法轻松达成。

从今天起，一切都发生了变化。我们引入了 SelectionArea widget，它的子 widget 现已可以进行随意选择！

只需使用 SelectionArea 包裹住路由显示的内容 (例如 Scaffold)，Flutter 会替你处理好一切，你便可以享受到这项强力的新特性。

想要更全面深入地了解这个绝妙的新功能，请访问 SelectionArea API 页面。

触控板操作

Flutter 3.3 优化了针对触控板的支持。Flutter 不仅提供了更丰富且顺滑的控制，同时也减少了几种特定情况的误触。若你想了解误触的示例，你可以查看 Flutter 实用教程页面。将页面滚动到底部的 DartPad，并跟随以下步骤进行操作：

缩小窗口让上半部分出现滚动条
将指针悬停在上半部分
使用触控板进行滚动
在 Flutter 3.3 以前，使用触控板滚动会拖动元素，因为 Flutter 将模拟的手势事件进行了下发
从 Flutter 3.3 开始，使用触控板滚动会正确地滚动列表，因为 Flutter 会传递「滚动」事件，卡片不会识别这些事件，而列表会进行对应的处理

想了解更多信息，请访问 Flutter 触控板手势的设计文档，并且查看以下的拉取请求：

随手写功能

感谢来自社区成员 fbcouch 的出彩贡献。Flutter 现在支持在 iPadOS 上使用 Apple Pencil 进行随手写输入。这项功能已默认在 CupertinoTextField、TextField 和 EditableText 上启用。只需要将 Flutter 升级到 3.3 就可以为你的用户带来这项新功能。

文本输入

为了优化富文本编辑的支持，本次更新我们增加了从底层平台的 TextInputPlugin 接收更加精细化的更新的能力。以前 TextInputClient 只能传递新的编辑状态，而不能细分新旧状态之间的变化量，TextEditingDelta 和 DeltaTextInputClient 填充了这部分的信息差。通过访问这些变化量，你可以为输入区域构建自定义的样式，这个区域会在你输入时展开和收缩。想要了解更多信息，你可以查看富文本编辑器示例。

Material Design 3 支持

Flutter 团队持续地在整合更多 Material Design 3 的组件到 Flutter 中。本次更新包括了IconButton 的中等和扩大样式。

想要跟踪 Material Design 3 的整合进度，你可以在 GitHub 上查看将 Material 3 带到 Flutter。

IconButton 示例

Chip 示例

中型和大型 AppBar 示例

桌面端平台

Windows

在先前构建 Windows 桌面应用时，应用的版本只能在文件中进行设置。这样的行为与其他平台上设置版本的行为并不一致。

现在 Windows 桌面应用的版本可以通过 pubspec.yaml 和构建参数进行设置。它有助于当你的应用推送了更新时，在应用中为你的用户提供应用更新功能。

想要了解更多关于设置 Windows 桌面应用版本的内容，请查看文档。Flutter 3.3 前创建的项目需要手动进行调整才能使用这项功能。

Packages 更新

go_router 发布

当你的应用包含复杂的导航需求时，它可能会让你晕头转向。为了扩展 Flutter 的导航 API，团队发布了新版本的 go_router package，让你在所有平台的路由逻辑设计变得更加简洁。

go_router package 由 Flutter 团队进行维护，通过声明式和基于 URL 的 API 让导航和 deep links 的处理变得更加轻松。最新的 5.0 版本让应用可以通过异步代码进行重定向，其中还包含了一些破坏性改动。

更多内容请查看官方文档：路由和导航。

VS Code 插件增强

VS Code 的 Flutter 扩展也带来了添加依赖的更新。你可以使用 Dart: Add Dependency 命令加上逗号一次性添加多个依赖。

你可以查看以下内容了解自上一个 Flutter 稳定版本发布以来所有 VS Code 的 Flutter 插件的更新：

Flutter 开发者工具更新

自上次 Flutter 发布稳定版以来，DevTools 同样也包含数次更新，包括数据表格展示的用户体验和性能的提升，还有在滚动事件的长列表时减少卡顿 (#4175。

以下是自 Flutter 3.0 以来 DevTools 各个版本更新的公告内容：

性能改进

Raster 缓存改善

本次更新提升了加载资源图片的性能，减少了图片数据的拷贝和 Dart 垃圾回收 (GC) 的压力。先前在加载资源图片时，ImageProvider 需要复制多次压缩的数据。首先，打开图片时数据会被拷贝至原生的堆内存并向 Dart 暴露出结构数组。然后，数据会在结构数组转换至内置存储的 ui.ImmutableBuffer 时被再次拷贝。

随着新增的 ui.ImmutableBuffer.fromAsset 的引入。这个加载过程同时也会更加快速，因为它会绕过之前方法通道所需的额外调度的开销。特别是在我们的基准测试中，图片的加载速度提升为原先的 2 倍左右。

更多相关信息，请查看官方文档：添加 ImageProvider.loadBuffer。

框架稳定性

禁用 iOS 内存指针压缩

在 Flutter 2.10 稳定版的发布中，我们为 iOS 启用了 Dart 的内存指针压缩优化。但是，Yeatse 在 GitHub 上提醒我们这项优化中包含了我们并未预料到的后果。Dart 通过为堆保持一个大的虚拟内存来实现指针压缩。由于 iOS 上允许的总虚拟内存少于其他平台，因此其他例如 Flutter 插件之类的组件可持有的虚拟内存便减少了。

虽然禁用了指针压缩会增加 Dart 对象消费的内存，但是它也恢复了 Flutter 应用可用的非 Dart 部分的内存，总体来说是更合适的方案。

应用可以增加最大虚拟内存的分配量，但这项操作仅在较新的 iOS 版本上可用，并不适用于其他 Flutter 支持的 iOS 设备版本。当我们能够在所有位置使用这项优化时，我们会重新进行评估。

API 改进

PlatformDispatcher.onError

在先前的版本中，你需要手动配置一个自定义的 Zone 来捕获应用的所有异常和错误。然而，自定义的 Zone 并不适用于 Dart 核心库中的一些优化，会减慢应用的启动时间。在本次更新中，你可以通过设置 PlatformDispatcher.onError 回调来捕获所有的错误和异常，代替自定义的 Zone。更多内容请查看已经更新的官方文档：在 Flutter 里处理错误。

FragmentProgram 更新

用 GLSL 编写的并且在 pubspec.yaml 的 shader: 部分声明的片段着色器 (Fragment shader) 现在会自动编译成引擎可以正确识别的格式，并且自动绑定为应用的资源。有了这项改动，开发者无需再使用三方工具编译着色器。在未来，引擎的 FragmentProgram API 可能只能接受来自 Flutter 的工具构建。目前我们还没应用这项更改，但如 FragmentProgram API 改进支持的设计文档中所计划的，有可能在未来实行。

想要了解更多内容，你可以查看这个 Flutter 着色器示例。

布局小数处理

在先前的版本中，Flutter 引擎会将合成层精准地对齐像素，用于提升 Flutter 在旧款 iPhone (32 位) 上的渲染性能。而在我们添加桌面平台的支持后，我们注意到这项操作会导致肉眼可见的抖动，因为桌面平台的是设备像素比通常会更低。例如在较低的 DPR 设备上，提示会在渐入时产生的明显抖动。在确定更新的 iPhone 设备并不需要这项优化后，我们已从 Flutter 引擎中将其移除，来改善桌面端的渲染保真度。

此外我们还发现，将这些像素对齐移除后，先前在黄金镜像测试 (golden image test) 时候出现的细微渲染差异也变得更稳定了。

停止支持 32 位 iOS

在我们发布 Flutter 3.0 时曾经提到，由于使用量的减少，3.0 版本是最后一个支持 32 位 iOS 设备以及 iOS 9 和 10 的版本。这个改动将会影响 iPhone 4S、iPhone 5、 iPhone 5C 以及第 2、3、4 代 iPad 设备。Flutter 3.3 稳定版以及之后的稳定版将不再支持 32 位 iOS 设备以及 iOS 9 \& 10。这意味着使用 Flutter 3.3 及之后构建的应用将不能再上述设备上运行。

macOS 10.11 和 10.12 的支持进入尾声

在即将到来的 2022 第四季度的正式版发行计划中，我们将放弃对 macOS 版本 10.11 和 10.12 的支持。这意味着在此之后的 Flutter SDK 稳定版将不能在这些版本上运行，Flutter 最低支持的 macOS 版将上升为 10.13 High Sierra。

停止支持 Bitcode

即将发布的 Xcode 14 将不再支持提交含有 Bitcode 的 iOS 应用，这个版本的 Xcode 会对开启了 bitcode 的项目发出警告。因此 Flutter 将会在未来的稳定发行版中移除对 bitcode 的支持。我们不希望影响到很多的开发者，因此默认情况下，Flutter 将不会开启 bitcode。然而，如果你手动在 Xcode 项目中开启了 bitcode，请尽快在升级到 Xcode 14 之后关闭它。

你可以打开 ios/Runner.xcworkspace 并在 build setting 中将 Enable Bitcode 设置为 No 以关闭它。混合开发应用可以在宿主工程的 Xcode 项目中关闭它。

你可以查阅 Apple 文档了解更多关于 bitcode 分发的内容。

最后

Flutter精彩课程推荐

Flutter 3更新详解

Sun, 22 May 2022 00:00:00 +0800

⭐整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手👏

Flutter 3 实现了 Flutter 以移动端为中心扩展到多平台的产品规划，并在今年 Google I/O大会的主题演讲上正式发布，继Flutter 2.10支持Windows 之后，此次发布提供了对 macOS 和 Linux 桌面端的稳定版支持，同时包括 Firebase 集成的改进，增加了与生产力和性能相关的新特性，并对 Apple 芯片提供了支持。

此版本中激动人心的升级包括: 更新了 Flutter 对 macOS 和 Linux 的支持，性能得到了显著提升，针对移动设备和 web 端的更新，以及诸多其他功能！此外，我们还带来了关于减少对旧版 Windows 提供支持的消息，以及几条重大变更。下面让我们直奔主题吧！

全桌面平台生产就绪

Linux 和 macOS 平台的支持已进入稳定状态，内含下列功能:

级联菜单和 macOS 系统菜单栏支持

现在您可以使用 PlatformMenuBar widget 在 macOS 上创建平台渲染的菜单栏，支持插入仅限该平台使用的菜单，并控制 macOS 应用菜单中的显示内容。

△ 级联菜单示意

完整支持全桌面平台多国文本输入

全部三种桌面平台完整支持多国文本输入，包括使用文本输入法编辑器 (IME) 的语言，如中文、日文和韩文。同时支持第三方输入法，如搜狗 (Sogou)、谷歌日文输入法 (Google Japanese Input) 等。

全桌面平台无障碍服务

Flutter 支持 Windows、macOS 和 Linux 平台的无障碍服务，包括屏幕文字阅读、无障碍导航和颜色反转等。

macOS 平台默认使用通用二进制文件

在 Flutter 3 中，Flutter macOS 桌面应用会被构建为通用二进制文件，从而原生支持使用 Intel 处理器的 Mac 电脑和搭载 Apple Silicon 的新设备。

不再支持使用 Windows 7/8 进行开发

此版本将建议的 Windows 开发版本提升为 Windows 10。虽然我们不会禁止使用旧版本 (Windows 7、Windows 8、Windows 8.1) 进行开发，但由于 Microsoft 不再支持这些旧版本，我们仅会针对这些版本提供有限的测试。尽管我们会尽力为旧版本提供支持，但还是建议您升级版本。

注意: 在 Windows 7 和 8 上依然可以运行 Flutter 应用，此更改只影响我们推荐使用的开发环境。

移动端更新

我们针对移动端的更新包括:

支持可折叠设备

Flutter 3 支持可折叠移动设备。通过由 Microsoft 牵头的合作，让大家可以使用新的功能和 widget 在可折叠设备上创建动感、愉悦的体验。

作为合作的一部分，MediaQuery 现在包含一个 DisplayFeature 列表，用以描述设备组件状态，包括铰链、折叠状态和屏幕刘海等。此外，DisplayFeatureSubScreen widget 包含的子 widget 的位置现在不会与 DisplayFeature 的边界重叠，并且已经用于框架的默认对话框和弹出窗口，使 Flutter 默认即可动态适应这些元素的位置。

非常感谢 Microsoft 团队。另外我们还要特别鸣谢@andreidiaconu所做出的贡献！

欢迎大家尝试 Surface Duo 模拟器示例，其中包含了 Flutter Gallery 的一个特别派生版本，以便了解 Flutter 在双屏中的实际运行情况:

支持 iOS 可变刷新率

Flutter 现已在使用 ProMotion 显示屏的 iOS 设备上支持可变刷新率，包括 iPhone 13 Pro 和 iPad Pro。在这些设备上 Flutter 应用的渲染刷新率可达 120 Hz，而之前最高为 60 Hz，这使得滚动等快速动画的观感体验更加流畅。请查看官方文档了解详情。

简化 iOS 发布

我们为 flutter build ipa 命令添加了新选项，使得 iOS 应用发布更加简便。在您准备好分发至 TestFlight 或 App Store 时，请运行 flutter build ipa 构建 Xcode 归档 (.xcarchive 文件) 和应用软件包 (.ipa 文件)。您可选择添加 –export-method ad-hoc、–export-method development 或 –export-method enterprise 选项。应用软件包构建完成后，即可通过 Apple Transport macOS 应用将其上传至 Apple，或使用 xcrun altool 在命令行中完成上传 (运行 man altool 获取 App Store Connect API 密钥验证说明)。上传完成后，您的应用即可发布至 TestFlight 或 App Store。在完成应用显示名称、应用图标等初始 Xcode 项目设置后，您在发布应用时就无需再打开 Xcode 了。

Gradle 版本更新

使用 Flutter 工具创建新项目时，您或许已经注意到，生成的文件现在使用了最新版本的 Gradle 和 Android Gradle 插件。对于现有的项目而言，您需要手动将 Gradle 版本升级至 7.4，Android Gradle 插件版本升级至 7.1.2。

停止更新 32 位 iOS/iOS 9/iOS 10

按照 2022 年 2 月 2.10 稳定版发布的公告，Flutter 对 32 位 iOS 设备以及 iOS 9 和 10 的支持即将结束。这一变化会影响到 iPhone 4S、iPhone 5、iPhone 5C 以及 iPad 第二、三、四代设备。Flutter 3 是最后一个支持上述 iOS 版本和设备的稳定版本。

如需详细了解此项变更，请参阅 RFC: 终止对 32 位 iOS 设备的支持。

Web 端更新

我们针对 web 端的更新包括:

图像解码

在浏览器支持的情况下，Flutter web 现在可以自动检测并使用 ImageDecoder API。到目前为止，大多数基于 Chrome 的浏览器都添加了此 API，如 Chrome、Edge、Opera、Samsung Browser 等。

这个新 API 使用浏览器内置的图像编解码器在主线程之外异步解码图像。这使得图像解码速度提高 2 倍，而且完全不会阻塞主线程，消除了所有之前由图像引起的卡顿现象。

Web 应用的生命周期

Flutter web 应用的新生命周期 API 提升了灵活性，可实现从托管 HTML 页面控制 Flutter 应用的引导程序，并支持使用 Lighthouse 分析您的应用的性能表现。这适用于许多用例，包括以下常被开发者们提及的场景:

启动画面。
加载指示器。
在 Flutter 应用之前显示的纯 HTML 交互式加载页。

请阅读官方文档 “自定义 web 应用初始化” 了解详细信息。

工具更新

我们针对 Flutter 和 Dart 工装的更新内容包括:

Lint package 更新

Lint package 2.0 版现已发布:

Flutter
Dart

使用 flutter create 生成的 Flutter 3 应用将自动启用 2.0 版 Lint 套件。我们建议大家运行 flutter pub upgrade --major-versions flutter_lints，将现有应用、package 和插件迁移到 2.0 版，以遵循 Flutter 最新、最优的最佳实践。

Lint 2.0 版中新增的大多数警告都带有自动修复功能。因此，当您在应用的 pubspec.yaml 中升级至最新 package 版本后，即可在代码库中运行 dart fix --apply 自动修复大多数 Lint 警告 (某些警告仍需部分手动操作)。对于尚未使用 package:flutter_lints 的应用、package 或插件，建议开发者按照迁移指南迁移至最新版本。

性能提升

感谢开源贡献者 knopp，局部重绘已经在支持此功能的 Android 设备上实现。在我们的本地测试中，此功能在 Pixel 4XL 设备上将依照 backdrop_filter_perf 基准测试的帧栅格化时间的平均值、90 百分位值和 99 百分位值缩减了 5 倍。现在，iOS 设备和较新版本的 Android 设备上都已实现在单一矩形脏区出现时进行局部重绘。

我们进一步提升了简单用例中不透明度动画的性能。具体而言，当 Opacity widget 只包含单个渲染原语时，通常由 Opacity widget 调用的 saveLayer 方法可以省略。在为此优化构建的基准测试中，此用例下的栅格化时间提升了一个数量级。在今后的版本中，我们计划为更多场景应用此优化。

在开源贡献者 JsouLiang 的努力下，引擎的光栅和界面线程在 Android 和 iOS 上的运行优先级已经高于其他线程 (比如 Dart VM 的后台垃圾回收线程)。在我们的基准测试中，这使得帧构建平均时间提速约 20%。

在第 3 版发布之前，光栅缓存的准入策略只查看图片中绘制算子的数量 (假设任何具有多个算子的图片都应该进入缓存)。但这会导致引擎消耗内存来缓存渲染速度极快的图片。此版本引入新的机制，根据所包含绘制算子的成本来估计图像渲染的复杂性。在我们的性能测试中，使用新机制作为栅格缓存准入策略可以减少内存用量，而不会降低性能。

感谢开源贡献者 ColdPaleLight，他修复了 iOS 上由于帧调度 bug 而导致少量动画帧丢失的问题。感谢所有报告此问题并提供掉帧复现视频的每一个人。

Impeller

我们一直致力于解决 iOS 和其他平台上的早期卡顿问题。在 Flutter 3 中，您可以在 iOS 上预览一个名为 Impeller 的实验性渲染后端。Impeller 会在引擎构建时预编译一组较为小巧、简单的着色器，从而避免在应用运行时编译，而后者是造成 Flutter 卡顿的主要原因。Impeller 尚未作好投产准备，距离完成也还有一段距离。目前 Impeller 尚未实现 Flutter 的所有功能特性，但我们对它在 flutter/gallery 应用中实现的保真度和性能感到满意，并且很高兴地在这里和大家分享开发进度。特别是，在 Gallery 应用的过场动画中，即便最差的帧速度也比之前快大约 20 倍。

Impeller 可以带标记在 iOS 上使用。如果您要试用 Impeller，可以传递 --enable-impeller 标记至 flutter run，或将 Info.plist 文件中的 FLTEnableImpeller 标记为 true。Impeller 的开发会继续在 Flutter 主渠道进行，我们希望在未来的版本中提供进一步更新。

Android 上的内联广告

使用 google_mobile_ads package 时，您应该可以感受到用户关键交互 (如页面之间的滚动和切换) 的性能有所提升。在新兴市场广为流行的设备上，这种性能提升尤其明显。最棒的是，您无需更改任何代码！

在具体实现方面，Flutter 现在是异步组合 Android 视图 (即通常所说的平台视图)。这意味着 Flutter 的光栅线程无需等待 Android 视图渲染。现在，Flutter 引擎使用它管理的 OpenGL 纹理将视图显示在屏幕上。

重大变更

在持续扩展和改进 Flutter 的过程中，我们会尽量把重大变更的数量维持在最低限度。Flutter 3 包含以下重大变更:

如果您正在使用上述 API，请参阅 Flutter.dev 上的迁移指南。

总结

按照 Statista 和 SlashData 等分析机构的统计，Flutter 依然是最受欢迎的跨平台界面工具包，我们能保持这种地位，社区的贡献功不可没，对此，Google Flutter 团队向大家致以由衷敬意。期待与各位社区成员共同努力，继续提供由社区驱动的工具，帮助大家为用户创造出更多令人愉悦的体验！

最后

Flutter精彩课程推荐

Flutter 2.10更新详解

Sun, 06 Feb 2022 00:00:00 +0800

⭐整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手👏

Flutter 2.10 版已正式发布！虽然⾃上次稳定版本发布以来还不到两个⽉，即使在这么短的时间内，Flutter官方也已处理和关闭了 1843 个 Issue，合并了来⾃全球 155 位贡献者的 1525 个 PR。

Flutter 2.10 包括 Flutter 对 Windows ⽀持的重⼤更新、⼏项重⼤的性能改进、框架中图标和颜⾊的新⽀持以及一些⼯具改进等。此外，该版本还包括移除了 dev 渠道的更新、减少对旧版 iOS 的⽀持以及几个简短的破坏性改动。接下来让Flutter来一睹Flutter 2.10的更新吧：

使用 Flutter 构建 Windows 桌面应用支持已经进入稳定阶段

⾸先，Flutter 2.10 版本带来了稳定的 Windows ⽀持，无需再通过 --enable-windows-desktop 标记来单独配置 Windows 桌面版应用程序的支持，因为它现在已经默认被启用！

当然，此次稳定版发布肯定不只是“删掉”一个标记这么简单 ;-) 在 Flutter 2.10 的 Windows 支持中，也包含了对⽂本处理、键盘处理和键盘快捷键的⼴泛改进，以及直接与 Windows 集成的新方式、⽀持命令行参数、全球化⽂本输⼊和无障碍功能等。

有关 Windows 稳定版发布的更多信息，你可以阅读《Flutter for Windows桌面端稳定版发布》，文章为大家详述了 Flutter 在 Windows 上的架构，同时说明了有多少 Flutter package 和插件已经⽀持 Windows。你还可以查看Flutter的⼯具和应⽤合作伙伴在 Windows 上使⽤ Flutter 制作的一些⽰例等。

引擎的性能改进

此版本的 Flutter 包括由社区成员 knopp提供的 绘制脏区管理 的初步⽀持，他为 iOS/Metal 上的单个脏区域启⽤了选择性重绘。这一变化将一些基准测试中九十分位和九十九分位的光栅化时间减少了一个数量级，并将这些基准测试中的 GPU 利⽤率从 90% 以上降低到了 10% 以下。

Flutter希望在未来的版本中，将选择性重绘的优势引入到其他平台。

在Flitter 2.8版本中，Flutter获得了自己的内部图片录制格式。现在在Flatter 2.10中，Flutter已经开始用它进行优化。例如，不透明层的一种常见情况现在可以更有效地实现。即使在最坏的情况下，Flutter基准测试中的帧光栅时间也降到了之前值的三分之一以下。

随着Flutter继续开发记录格式，将来会继续将该优化扩展到更多的场景。

在 profile 和 release 模式下，Dart 代码将以 AOT 方式编译。这段代码的轻量和高效的关键来源于整个程序的类型流分析，它解锁了许多编译器优化和激进的摇树优化 (tree-shaking)。但由于类型流分析必须涵盖整个程序，因此可能会有些消耗性能。新版本带来了更快的类型流分析实现。在Flutter的基准测试中，Flutter 应⽤的总体构建时间下降了约 10%。

与往常一样，性能增强、减少内存使⽤和减少延迟是 Flutter 团队的⾸要任务。期待未来版本的进一步改进。

Android 平台更新

Flutter 2.10 版本还包含许多针对 Android 平台的改进。现在在默认情况下，当你创建新应⽤时，Flutter 默认⽀持最新版本的 Android，即 Android 12（API 级别 31）。此外，在此版本中，Flutter启⽤了 multidex ⾃动⽀持。如果您的应⽤⽀持低于 21 的 Android SDK 版本，并且超过了 64K 的 dex ⽅法数限制，只需将 --multidex 参数传递给 flutter build appbundle 或 flutter build apk 命令，你的应⽤就会增加 multidex 的⽀持。

最后，在Flutter收到开发者们对于 Gradle 抛出让人费解的错误消息的反馈后，Flutter调整了 Flutter 命令行工具，现在它将 为常⻅问题提供解决方法。例如，如果你向你的应⽤添加了一个插件，该插件需要您提⾼最低支持的 Android SDK 版本，你现在会在错误信息中看到「Flutter Fix」的建议。

Flutter将继续为常⻅错误消息添加更多解决方法的建议，并希望获得你对其他错误消息的反馈，这些错误消息将显著帮助开发者处理同类问题。

iOS 平台更新

除了性能改进之外，Flutter还添加并增强了一些特定平台的功能。luckysmg 就为Flutter带来了一项 iOS 上新的增强功能——更流畅的键盘动画，它会⾃动应用在你的应用中。

除此以外，Flutter还通过修复一些边缘情况崩溃提⾼了 iOS 相机插件的稳定性。

最后，Flutter为 64 位架构的 iOS 系统加入减少内存使⽤的新功能：压缩指针。

64 位架构将指针表⽰为 4 字节大小的数据结构。当你有大量对象时，指针本⾝占⽤的空间会增加应⽤整体的内存占用，特别是如果你的应⽤更庞大更复杂时，这些应⽤有更多的 GC 抖动。然而，iOS 应⽤不太可能有⾜够的对象来占⽤大部分的 32 位地址空间（20 亿个对象），更不⽤说庞⼤的 64 位地址空间（900 亿个对象）了。

Dart 2.15 中引入了压缩指针的功能，在这次发布的 Flutter 版本中，Flutter使⽤这项功能来减少 64 位 iOS 应⽤的内存使⽤量。

Web 平台更新

此版本还包含对 Web 平台的一些改进。例如，在先前的版本中，当鼠标拖动到多行文本框的边缘时，它不会正确地跟随滚动。在此版本中，当选择光标拖出了文本框时，文本框会进行滚动，浏览并选中对应的文字内容。此行为同时适⽤于 Web 平台和桌⾯端。

Flutter 2.10 还包括对 Web 平台的另一项显著改进，Flutter也一直在寻求减少将 Flutter 应用运行到 Web 平台的开销，在先前的版本中，每次Flutter想要将原⽣ HTML 的 widget 引⼊ Flutter 应⽤时，Flutter都需要一个覆盖层 (Overlay) 作为Flutter对 Web 的平台视图 (Platform view) ⽀持的一部分。这些叠加层中的每一个都⽀持⾃定义绘制，但同时也代表了一定数量的性能开销。如果你的应⽤中有⼤量原⽣ HTML 的 widget (例如链接)，那这将造成非常大性能开销。在这个版本中Flutter为 Web 平台构建了一个新的「⾮绘制的平台视图」，已经基本上消除了这种开销。Flutter已经将这种优化应用到 Link widget 中，这意味着如果您的 Flutter Web 应⽤中有⼤量的链接，它们将不再产生额外的性能消耗。随着时间的推移，Flutter会将此优化应⽤到其他的 widget。

Material 3

此版本是向 Material 3 过渡的开始，其中包括从单一种⼦颜⾊⽣成整个配⾊⽅案的能力。

你可以使用任意颜色来创建新的 ColorScheme 类型：

final lightScheme = ColorScheme.fromSeed(seedColor: Colors.green);
final darkScheme = ColorScheme.fromSeed(seedColor: Colors.green, brightness: Brightness.dark);

ThemeData 的构造函数还有一个新的 colorSchemeSeed 参数，可以直接从颜色⽣成主题的配⾊⽅案：

final lightTheme = ThemeData(colorSchemeSeed: Colors.orange, ...); 
final darkTheme = ThemeData(colorSchemeSeed: Colors.orange, brightness: Brightness.dark, ...); 

此外，此版本包括了 ThemeData.useMaterial3 的参数，它可以将 widget 切换到新的 Material 3 外观。

最后，Flutter添加了 1028 个新的 Material 图标。

你可以在这个 issue 中跟进 Material 3 的接入情况，并随时留下你的意见反馈。

集成测试改进

2020 年 12 ⽉，Flutter宣布了使⽤ integration_test 进行端到端测试的新⽅法，查看中文文档集成测试介绍了解更多。这个新的 package 取代了 flutter_driver 作为进行集成测试的推荐⽅式，提供了新功能，如 Firebase 测试实验室⽀持以及对 Web 和桌⾯的⽀持。

从那时起，Flutter对集成测试进行了进一步改进，包括 将 integration_test package 内置在 Flutter SDK 中，使其更容易与您的应⽤集成。现在，Flutter撰写了一份新的迁移指南，帮助你从 flutter_driver 测试迁移到 integration_test。

现有的⽂档、示例和 codelab 也已针对 integration_test 进行了更新。如果你还没有在 Flutter 应⽤上使⽤ integration_test，那么从现在就开始吧！

DevTools

在这个版本中，Flutter也在 Flutter DevTools 上做了一些改进⼯作，包括从命令行直接使⽤ DevTools 的简易功能。现在你⽆需使⽤ pub global activate 来下载和运行最新版本的 devtools，只需简单地使⽤ dart devtools 获取与你正在使⽤的 Flutter 版本一致的最新版本即可。

Flutter还进行了一些可⽤性更新，包括改进在调试器变量窗格中检查⼤型列表和映射的⽀持（感谢 Elliott）。

最后，Flutter即将发布年度 DevTools 问卷调查！请提供你的反馈并帮助Flutter改善你的开发体验。

VSCode 改进

Flutter 的 Visual Studio Code 扩展也获得了许多增强功能，包括 在代码的更多位置预览颜色 以及可更新颜色代码的颜⾊选择器。

此外，如果你想成为 VSCode 的 Dart 和 Flutter 扩展的预发布版本的测试⼈员，你可以在你的扩展设置中切换到预发布版本。

你可以在 flutter-announce 邮件列表的这一篇阅读有关此更新的详细信息。

移除 dev 版本发布渠道

在 Flutter 2.8 版本中，Flutter宣布Flutter正在努力移除 dev 版本发布渠道，以简化你的选择并减少研发的开销。在这个版本中，Flutter已经完成了这项⼯作，包括：

更新 Flutter ⼯具以帮助将开发⼈员迁移出开发频道
更新 wiki 对于各个渠道的说明和承诺
更新弃⽤政策
从 DartPad、预提交测试和⽹站中删除 dev 渠道的⽀持

Dev 渠道现已被彻底移除。如果Flutter漏了一些没有移除的位置，请告诉Flutter。

对 iOS 9.3.6 的⽀持进入尾声

由于Flutter实验室中⽬标设备的使⽤减少和维护难度增加，Flutter正在调整对于 iOS 9.3.6 的支持，从「⽀持」到「尽力⽽为」。这意味着对 iOS 9.3.6 的⽀持和对 32 位 iOS 设备的⽀持将仅通过编码实践、Ad-Hoc 和社区测试来维护了。

Flutter预计在 2022 年第三季度的 Flutter 稳定版本中放弃对 32 位 iOS 设备以及 iOS 版本 9 和 10 的⽀持。这意味着基于稳定的 Flutter SDK 构建的应⽤将不再在 32 位 iOS 设备上运行，并且 Flutter ⽀持的最低 iOS 版本将增加到 iOS 11。

破坏性改动

Flutter还努力在每个版本和此版本中减少破坏性改动，尽管Flutter还没有完全归零，但Flutter会继续努力！

如果您仍在使⽤这些 API，可以阅读 flutter.dev 上的迁移指南。一如既往，⾮常感谢社区贡献测试，帮助Flutter识别这些破坏性改动。

最后

Flutter精彩课程推荐

Flutter for Windows桌面端稳定版发布

Sun, 06 Feb 2022 00:00:00 +0800

⭐整合ChatGPT与Flutter高级技术，手把手带你从0到1开发一款可运行在多端的聊天机器人App，帮助你抓住机遇，快速具备AI运用能力，成为移动端领域的AI高手👏

自从Flutter 创建以来，Flutter就致力于打造一个能够构建精美的、可高度定制的、并且可以编译为机器码的跨平台应用解决方案，以充分发挥设备底层硬件的全部图形渲染能力。今天，Flutter 对 Windows 生产版本的正式支持是对这一愿景实现的重要标志。它使 Windows 开发者也能享受到移动开发的相同生产力和功能。

Flutter 的目标是在任何平台上为你提供出色的构建体验，并且Flutter想要打造的是：只需要使用同一套核心框架和工具完成这个目标。通过 Flutter，你可以自由打造优美的使用体验，使你的品牌和设计脱颖而出；它还拥有极高的执行速度，因为它会被直接编译为机器码；而通过支持有状态的热重载功能以提供交互式的体验，让你可以在应用运行时直接看到代码更改后的结果，从而获得 生产力 提升。Flutter 是开放的，成千上万的贡献者参与到核心框架的构建，或是通过 package 和插件生态系统对其进行扩展。

截止目前，已经有近 50 万个应用程序使用 Flutter 进行构建

迄今为止，Flutter看到这股趋势已经超出了Flutter的预期。包括一些大公司例如 Betterment、宝马以及字节跳动等，还有 Google 内部三十多个团队都使用了 Flutter。根据 Statista 以及 SlashData 的统计，Flutter 在 2021 年已经成为了最流行的跨端 UI 工具包。

Flutter自己的数据也能支持这一点，在 2021 年四个季度的开发者调查中，有 92% 的 Flutter 开发者对Flutter提供的工具表示满意。（对于另外 8% 的人，Flutter正在倾听你的反馈，希望也能得到你的满意）。

这其中共同的需求之一就是对 Windows 的支持，

在发布的 Flutter 2.10 稳定版中，已经全面支持构建 Windows 桌面端应用程序了！

Windows 与 Flutter

几年前，Flutter团队为 Flutter 制定了一个宏大的愿景，即从 iOS 和 Android 的移动端应用上扩展到其他平台，其中就包括 Web 端和桌面端。

Flutter 的核心部分是跨平台的：从可移植的硬件加速的 Skia 图形渲染引擎，到 Flutter 的渲染系统的核心单元，例如动画、主题、文本输入以及国际化，Flutter 提供了上百个 widgets。

然而桌面端并不只是移动应用运行在一个更大的屏幕上这么简单，它们从设计上来说就很不一样。从输入设备角度来看，桌面端有键盘和鼠标，它们会在显示器上运行多个可变大小的窗口。而对于辅助功能 (Accessibility)、输入法、视觉样式等关键内容都有不同的规则约束。并且它们还和底层操作系统中不同的 API 进行集成：桌面应用支持从系统的文件选择器到设备硬件再到 Windows 注册表等数据存储的所有内容。

所以当Flutter团队把 Flutter 带到 Windows 上时，Flutter也需要为它进行定制。

正如Flutter对 Android 和 iOS 的支持那样，对 Windows 的实现也包括了 Dart 框架以及 C++ 的引擎。Windows 与 Flutter 通过承载了 Flutter 引擎的 嵌入层(Embedder) 进行通信，翻译以及发送 Windows 都是 嵌入层 的职责范围。Flutter 与 Windows 共同将你的 UI 绘制到屏幕上，处理窗口大小调整和 DPI 更改等事件，并与已有的 Windows (如输入法编辑器) 配合使用。

在 Windows 上，Flutter 使用了一套完全相同的 Dart 代码，但是能够使用 Windows 的 API。

你的应用能够使用 Flutter 框架的全部功能，在 Windows 上，它还可以直接通过 Dart 的 C 互操作层或使用用 C++ 编写的平台插件与 Win32、COM 和 Windows 运行时 API 进行通信。Flutter还适配了许多常用插件以包含对 Windows 的支持，包括camera，file_picker和shared_preferences。更重要的是，社区已经添加了各种其他 package 对 Windows 的支持，涵盖了从 Windows 任务栏集成到串行端口访问的全部内容。

要完全为 Windows 的 UI 进行定制，你也可以使用例如像是 fluent_ui 以及 flutter_acrylic 这样的 package 创造具有 Microsoft Fluent 设计美学的应用。而且使用 msix 工具能将你的应用包装进安装器，这样就可以上传到 Windows 上的 Microsoft Store。

总的来说，这促进了在 Window 平台上创建应用程序。以极快的速度在 Windows 上运行的同时还能转到其他桌面或者移动应用以及 web 平台上运行。让Flutter来看看到目前为止的一些早期样例：

Microsoft 与 Flutter

Flutter曾询问过 Windows 团队是否愿意分享一些对 Flutter 支持的话。这是微软公司 Windows 开发者平台副总裁 Kevin Gallo 的评论：

“Flutter团队很高兴看到 Flutter 增加了对创建 Windows 应用程序的支持。Windows 是一个开放的平台，Flutter欢迎所有开发人员。Flutter团队很高兴看到 Flutter 开发人员将他们的体验带到 Windows 上，并发布到 Microsoft Store。对 Windows 的支持是 Flutter 社区的一大步，Flutter也迫不及待地想看看你能为 Windows 带来哪些令人惊叹的应用！”

事实上，许多 Microsoft 的团队也都为今天的发布做出了很大贡献。Flutter特别想要感谢 Fluent design 团队对于支持 Windows 上 Flutter 应用的图标做出的贡献。他们高质量的 fluentui_system_icons package 已经加入到 Flutter Favorite 项目中了。

同时，Microsoft 围绕 Windows 可访问性所做的投入也给Flutter留下了深刻的印象，非常感谢该团队的帮助，以确保 Flutter 从第一天起就能够为屏幕阅读器提供支持。将无障碍功能视为额外的需求是错误的。正如 Microsoft 包容性设计工具包中的这张图片所示，Flutter必须要关注提供永久、临时或不同情境下需求的体验。

下面的视频演示了 Flutter 如何集成 Windows 讲述人 (Windows Narrator) 功能。出于本视频的目的，Flutter特意模糊了屏幕，让你了解此功能对需要它的用户的价值。

插入视频

Windows 讲述人是一个为 Windows 打造的屏幕阅读器，它同样能够在 Flutter 应用中良好的运行。

Windows 开发生态工具集

Flutter的开发工具合作伙伴们也开始为 Windows 桌面端应用程序开发增加支持，比如：

FlutterFlow 是低代码、拖拽式生成 Flutter 应用的工具，FlutterFlow 今天正式宣布支持了 Windows 平台，同时还宣布了一些帮助 Flutter 开发者建立桌面应用的很多功能。
Realm 是一个快速的本地数据存储服务。今天发布的最新版本支持使用 Flutter 构建Windows 桌面端应用程序，他们使用 Dart FFI 快速访问底层数据库，并增加了他们对 iOS 和Android 等移动平台的现有支持。
Nevercode 团队更新了他们的 Codemagic CI/CD tool 工具并开始支持 Windows 桌面端，你可以在云端测试和构建 Windows 应用，并将其发布到 Microsoft Store。
Syncfusion 更新了工具套件以充分发挥在 Windows 平台的优势。如果你在使用他们提供的服务，你会发现他们的数据可视化组件，比如树状图、线性规、火花图表，日历组件甚至是 PDF 和 Excel 生成组件都已经支持了 Flutter，Syncfusion Flutter widget 是用 Dart 原生构建的。
近期，Rive 宣布推出其流行的图形工具套件的 Windows 版本，它能够让设计人员和开发人员创建交互式矢量动画，这些动画可以使用状态机实时响应代码。即将推出的 Windows 版本的应用程序提供了惊人的性能和更低的内存占用，并将很快将在 Microsoft Store 中提供下载。

看到围绕着 Flutter 的建立的成熟生态，Flutter非常激动，在你开始使用 Flutter 构建 Windows 应用的时候，Flutter鼓励你多尝试一下生态里的这些合作伙伴的服务和工具。

Flutter 2.10 中的 Windows 平台支持

作为 Flutter 2.10 正式版的一部分，Flutter 已经可以为 Windows 平台构建应用程序提供稳定的、具备生产质量的支持，Flutter 2.10 还包含诸多其他新特性和性能改进以及错误修复，在今天的另一篇推文中已经详细介绍。

在未来几个月里，Flutter会发布更多为 macOS 和 Linux 平台提供稳定版支持的消息，让你可以通过 Flutter 为更全的桌面平台、Web 平台和移动端平台构建精美应用！

最后

Flutter精彩课程推荐

React Native Hooks开发指南

Sun, 19 Dec 2021 00:00:00 +0800

期待已久的新教程上线啦！解锁React Native开发新姿势，一网打尽React Native最新与最热技术，点我Get!!!

什么是Hooks

Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hooks 是一种在函数式组件中使用有状态函数的方法。

Hooks不支持在class中使用，比如在class中使用useState和useEffect都是不允许的。

Hooks的特性

在使用Hooks之前我们必须要要做明白一下几点：

Hooks是完全可选的：在React Native项目中Hooks不是必须的，React推出Hooks不是为了替代class，而是对class的一种补充；
- 与其说Hooks是React新增的功能，倒不如说它是React新增的一种特性更为贴切；
不要为了Hooks而Hooks：Hooks只是React的一种新的写法，我们不必对已存在的项目通过Hooks重写，推荐小伙伴们可以对一些新的组件来尝试Hooks，这也是包括阿里在内的很多大厂通常的做法；
Hooks100% 向后兼容的： Hooks 不包含任何新增的功能，完全兼容和class混用；

如何在React Native使用Hooks

Hooks最为常见的有两个API：useState与useEffect也叫State Hook与Effect Hook，那么接下来我们就来学习下在React Native中如何使用这两个API。

首先需要指出的是Hooks 是 React 16.8 的新增特性，因此我们不需要引入其它任何库，只需要确保项目依赖的React大于等于16.8即可。

在React Native中使用 State Hook

需求1：假如我们有个需求将从网络上请求到的数据显示在界面上，我们先看它的class写法：

import React from 'react';
import {
    SafeAreaView,
    Text,
    TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';

class HiNetDemo extends React.Component<{}, { msg: string }> {
    constructor(props: any) {
        super(props);
        this.state = {
            msg: ''
        }
    }
    doFetch = () => {
        const formData = new FormData();
        formData.append("requestPrams", 'RN');
        post(Constants.test.api)(formData)().then(result => {
            this.setState({
                msg: JSON.stringify(result)
            });
        }).catch(e => {
            console.log(e);
            this.setState({
                msg: JSON.stringify(e)
            });
        })
    }
    render() {
        return (
            <SafeAreaView>
                <TouchableOpacity onPress={this.doFetch}>
                    <Text>加载</Text>
                </TouchableOpacity>
                <Text>{this.state.msg}</Text>
            </SafeAreaView>
        );
    }
}

那么它对应的hooks写法该是怎样子的呢？

下面代码接借助RReact Native的HiNet网络框架发出网络请求并通过useState来控制msg的状态，并将其展示在界面上：

import React, { useState } from 'react';
import {
    SafeAreaView,
    Text,
    TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default (props: any) => {
    const [msg, setMsg] = useState('');
    const doFetch = () => {
        const formData = new FormData();
        formData.append("requestPrams", 'RN');
        post(Constants.test.api)(formData)().then(result => {
            setMsg(JSON.stringify(result));
        }).catch(e => {
            console.log(e);
            setMsg(JSON.stringify(e));
        })
    }
    return (
        <SafeAreaView>
            <TouchableOpacity onPress={doFetch}>
                <Text>加载</Text>
            </TouchableOpacity>
            <Text>{msg}</Text>
        </SafeAreaView>
    );
};

从上述代码中我们不难看出，在React Native中使用State Hook的主要步骤：

导入useState：import React, { useState } from 'react';
通过useState定义state：const [msg, setMsg] = useState('');
- msg是定义的state中一个变量，setMsg是用来修改msg变量的关联函数，它的格式是set+变量名首字母大写
修改状态：通过前面定义的关联函数setMsg修改即可setMsg(JSON.stringify(result));
State Hook的作用范围：因为Hooks只能应用与函数式组件，所以通过它声明的state的作用范围是函数内；

上面代码是摘自《网络编程与数据存储技术》一章。

在React Native中使用 Effect Hook

Effect Hook 可以让你在函数组件中执行副作用操作。

我们可以把 useEffect Hook 看做React class 的生命周期函数：componentDidMount、componentDidUpdate 和 componentWillUnmount 这三个函数的组合。

需求2：假如我们需要在页面完成装载后的某个时刻执行某个操作，在页面卸载时执行一些清理会资源回收操作。

对于这样的一个需求对应的class代码如下：

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    Text,
    TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default class HiNetDemo extends React.Component<{}, { msg: string }> {
    timer: any;
    constructor(props: any) {
        super(props);
        this.state = {
            msg: ''
        }

    }
    componentDidMount() {
        this.timer = setTimeout(() => {
            this.doFetch();
        }, 2000);
    }
    componentWillUnmount() {
        this.timer && clearTimeout(this.timer);
    }
    doFetch = () => {
        const formData = new FormData();
        formData.append("requestPrams", 'RN');
        post(Constants.test.api)(formData)().then(result => {
            this.setState({
                msg: JSON.stringify(result)
            });
        }).catch(e => {
            console.log(e);
            this.setState({
                msg: JSON.stringify(e)
            });
        })
    }
    render() {
        return (
            <SafeAreaView>
                <TouchableOpacity onPress={this.doFetch}>
                    <Text>加载</Text>
                </TouchableOpacity>
                <Text>{this.state.msg}</Text>
            </SafeAreaView>
        );
    }
}

在上述代码中我们在componentDidMount通过定时器实现了当页面完成装载后2s发起了网络请求；
并在页面卸载时清空了计时器以防止内存泄漏；

那么，上述功能用Effect Hook又该如何实现呢？

还是以《网络编程与数据存储技术》一章的网络编程一节为原型我们用Hooks来实现上述需求：

import React, { useState, useEffect } from 'react';
import {
    SafeAreaView,
    StyleSheet,
    Text,
    TouchableOpacity
} from 'react-native';
import Constants from './expand/dao/Constants';
import { post } from './expand/dao/HiNet';
export default (props: { navigation: any }) => {
    const [msg, setMsg] = useState('');
    useEffect(() => {
        //对应componentDidUpdate
        function handleStatusChange(status: any) {
            console.log(status);
        }
        const timer = setTimeout(() => {
            doFetch();
        }, 2000);
        // 对应componentWillUnmount
        return function cleanup() {
            timer && clearTimeout(timer);
        };
    });
    const doFetch = () => {
        const formData = new FormData();
        formData.append("requestPrams", 'RN');
        post(Constants.test.api)(formData)().then(result => {
            setMsg(JSON.stringify(result));
        }).catch(e => {
            console.log(e);
            setMsg(JSON.stringify(e));
        })
    }
    return (
        <SafeAreaView>
            <TouchableOpacity onPress={doFetch}>
                <Text>加载</Text>
            </TouchableOpacity>
            <Text>{msg}</Text>
        </SafeAreaView>
    );
};

在上述代码中我们借助useEffect实现了class相同的功能，接下来我们来总结下在RN中使用Effect Hook的关键点：

导入useEffect：import React, { useState,useEffect } from 'react';
使用useEffect来实现不同生命周期函数的hooks：
- 直接写在useEffect(() => {}一层的会在组件装载时调用，对应componentDidMount
- handleStatusChange对应componentDidUpdate
- cleanup对应componentWillUnmount在组件卸载时调用

Hooks与class的选择

最后跟小伙伴们聊一聊什么时候该用Hooks？什么时候该用class？

Hooks能够实现的class也都能实现
对于页面级等比较大的模块建议用class
对应组件级别比如封装一个按钮组件适合用Hooks

CrazyCodeBoy的技术博客官网

Flutter 3.16 新特性介绍

框架

Material 3 成为新的默认主题

支持 Material 3 动效

编辑菜单中的额外选项

TextScaler 用于指定全局文本缩放因子

SelectionArea 更新

在焦点小部件上运行的菜单项

iOS、macOS中菜单项快捷键的自动重新排序

在flutter_test中添加了PaintPattern

滚动更新

引擎

Impeller

Android

Impeller性能、忠实度和稳定性

引擎性能

API和忠实度改进

Impeller性能叠加

抖动现在正确显示

游戏

Flutter Games Toolkit

Web

在Chrome DevTools的Flutter时间轴事件

Android

鼠标滚轮支持

iOS

App extensions

包生态系统

新的Flutter收藏夹

首次包生态系统虚拟峰会

基于云的Google地图样式

摄像头 X 改进

macOS视频播放器

DevTools

DevTools扩展

DevTools更新

VS Code UI可发现性

弃用和重大更改

弃用和重大更改

最后

一个功能强大的Flutter开源聊天列表插件

目录

预览图

示例

视频教程

如何使用

第一步添加依赖

第二步：初始化ChatController

第三步：在布局中添加ChatList

第四步：设置初始化数据

API

IChatController

ChatController

ChatList

Contribution

万字长文，为你送上全网最全Flutter学习资料！

目录

文章

介绍

网站/博客

教程

初学者

中级

高级

HOWTO文档

视频

组件

演示

UI

粘粘头部

抽屉

底栏

底部表单

滑块

UI 助手

材料设计

Cupertino 设计

效果

日历

在`flutter_test`中添加了PaintPattern