☝🏽 👼🏼 🤴🏼 Flutter 1.22公告 👧🏻 🍑 👯

你好！我叶夫根Saturov，扑TeamLead在冲浪。我将提供有关Flutter 1.22更新的官方文章的翻译-与往常一样，并附上我的评论。

对于我来说，此版本是最近最出色的版本之一。我们之所以向前迈进，不仅是因为新的小部件的出现，这不会让人感到意外，而且还因为基础架构的重大变化以及对新操作系统的操作支持。这仅仅是开始！

努力熟悉Flutter 1.22的新版本。

我们很高兴地宣布Flutter的最新版本，全面支持iOS 14和Android11。Flutter 1.22建立在以前版本的基础上，并允许开发人员从单个代码库为多个平台创建快速美观的用户界面。我们的季度稳定版本包含新功能，改进的性能和错误修复。

最近发布了新版本的移动操作系统。我们致力于使Android 11和iOS 14在此Flutter版本上表现良好。

适用于iOS 14的Flutter更新：支持新的Xcode 12，新的图标以及对App Clip的支持-与Android Instant Apps类似。

适用于Android 11的Flutter更新：增加了对不同类型的“刘海”显示的支持，以及在调用软键盘时更流畅的动画效果。

该版本仅在1.20版发布两个月后发布，但即使在很短的时间内，我们也关闭了3024期，并冻结了197个贡献者的1944年PR。

注释

顺便说一句，如果您一直想成为Flutter的贡献者，但不知道从哪里开始，这里有一些技巧。通过良好的“第一贡献”标签过滤问题：时不时会出现有趣的问题，您可以使用这些问题开始您的开源之旅。另外，您可以通过使用新功能标签过滤问题来实现某人梦想中的功能。即使是初学者也有困惑。您当然可以在框架的历史中保留自己的名字-当然，如果Flutter团队的开发人员同意应实施这样的功能。

除了支持新的移动操作系统版本，我们还有其他新闻，包括最受要求的Android功能之一的预览：

恢复状态，
新的“宇宙”按钮材料
新的库，支持本地化和国际化，与Hot Reload一起使用，
新的导航器，
平台视图的稳定版本（Google Maps和WebView插件的基础），
您可以在代码中添加一个开关，以改善在带有高频显示屏的设备上的滚动。

我们还有一个用于分析应用程序大小的新工具。此外，开发人员现在可以通过在插件配置中显式指定目标平台，仅针对所需平台创建插件。

iOS 14目标平台

每次发布新版本的移动操作系统时，我们都会对其进行彻底测试：我们会寻找可能影响Flutter及其工具操作的不兼容性或更改。

对于iOS 14，我们对Flutter进行了一些更改，以确保其完全按照开发人员的要求运行：

Xcode 12需要iOS 9.0或更高版本，因此我们的默认模板现在指定9.0而不是平台8.0。
Flutter 1.22修复了特定的iOS 14崩溃和字体渲染问题。
在Flutter 1.20.4中修复了部署到物理设备（应用程序未在设备上运行-仅在模拟器上运行）的问题。
, , , Flutter Flutter 1.20.4.
Flutter iOS 14 ( , Flutter-).

底线：如果iOS的14是你扑应用目标平台，我们强烈建议您使用扑1.22重建它，它立即部署到App Store为那些与iOS 14.最佳的用户体验

的更多信息，包括有关“添加到应用”，深层链接和通知的一些想法，请参阅flutter.dev上的iOS 14文档。

另外，我们想谈谈对新iOS SF Symbols字体的更新支持，这启发我们花一些时间来更新cupertino_icon包。CupertinoIcons更新依赖关系后，现有用例将自动以新样式显示cupertino_icons到新的主要版本1.0。如果您将cupertino_icons1.0和Flutter 1.22一起使用，则可以通过CupertinoIcons API来访问约900个新图标。

有关图标的完整列表，请参见cupertino_icons预览页面和位于flutter.dev的迁移详细信息页面。

您可以在iOS 14上使用Flutter尝试的另一个功能是App Clips。 App Clips是iOS 14的一项新功能：这些迷你应用程序的重量最大为10 MB。它们使用户可以访问某些功能，而不必从AppStore下载完整的应用程序。 Flutter 1.22版可以在初步实施中与App Clips一起使用。

Flutter上的应用剪辑

有关如何使用Flutter创建应用程序的应用剪辑的更多信息，请参见flutter.dev上的文档。另请参见示例项目。

评论

还记得Android的Instant Apps吗？看来苹果决定带回2017年，并推出了类似的解决方案-App Clips。此外，即使您编写的不是本机应用程序，而是跨平台的应用程序，也可以实现App Clips。

不要忘记这些限制：如果程序集的重量超过10 MB，则无法以App Clips格式运行它。对于Flutter应用程序，这可能是一个非常紧急的问题。但是您将在本文的后半部分了解到这一点：在这里，我们将告诉您如何使用方便的工具监视应用程序的构建大小。

Android 11

Flutter的此版本与Android 11几乎同时发布。Flutter框架和引擎已更新，以支持最新版本的Android中引入的两个新功能。

首先，Flutter现在考虑了Android手机屏幕上刘海和切口的位置以及屏幕的圆角。

使用MediaQuery和SafeArea API，现在可以轻松编写一个UI，其中可单击区域不会落在屏幕的切口和圆角边缘上。

应用程序的可见区域不会突然改变大小，而是平滑变化。该应用程序的内容将与屏幕键盘同步滚动。

注意FAB

问题＃19279-屏幕键盘显示/隐藏动画与Flutter插图不同步的长期存在的问题。此问题已在Android 11中修复。

以前，将Flutter代码插入本机Android应用程序时会由于Flutter插件而出现问题。我们重写了将Flutter与Android集成的API，并发布了不含这些缺点的API v2。从1.22版开始，我们将不再支持旧的API v1。

如果您继续使用Android v1 API，这对您而言意味着：

新插件是在不支持v1 API的情况下创建的。
Flutter工具配置标记已—no-enable-android-embedding-v2被删除。现在，这是默认行为。
仍在使用API v1的旧版应用程序会在构建过程中显示弃用警告，请参阅支持新的Android插件API的文档。

同时，如果您仍然有基于Android API版本1的Flutter应用，它将继续运行。但是，您可能会开始看到针对API v2的新插件。Android API v1不能使用它们。有关更多信息，请参见有关重大更改的文档。

, Flutter , . 1.22 , — . App Clips, ( ) , . Android, , , — . .

«»

现有的Flutter按钮外观漂亮，但可能难以使用，特别是在您需要自定义主题时。此外，材料规范已扩展为包括具有新样式的新按钮。

为了与Material指南保持一致，我们在Flutter 1.22中引入了一个新的“ Universe”按钮。

按钮的Material design的新“ Universe”

新的小部件和主题具有新的类名。我们将Flutter中的类重命名为符合Material Design规范。

新主题遵循Flutter最近在新Material窗口小部件中采用的“规范化”模式。在DartPad演示版

这是不是一个重大更改，因为语义FlatButton，OutlineButton，RaisedButton，ButtonBar，ButtonBarTheme并ButtonTheme不会改变。您可以将旧按钮与新按钮混合和匹配。

对国际化和本地化的新支持

从一开始，在Flutter中就可以使用国际化（i18n）和本地化（l10n）应用程序所需的核心功能。在此版本中，我们添加了热重载支持，以在添加新的l10n信息时更新您的应用程序。

如果您需要有关Flutter l10n支持的更多信息，包括本地化消息，带有参数，日期，数字和货币的消息，请阅读Flutter Internationalization用户指南。

另外，如果您对i18n和l10n感兴趣，则可能需要使用字符串，这些字符串的字符不适合普通的旧ASCII-例如Unicode和emoji。 Dart团队最近发布了角色包这有助于开发人员使用Unicode（增强型）字形群集。该软件包有助于解决诸如如何将“ A [British flag emoji]英文文本”之类的字符串正确缩短到前15个字符的问题。使用class时String，此缩写为“ A [British flag emoji] text in”，用户只能读取12个字符。另一方面，使用该程序包characters将给出正确的缩写“ Eng中的[British flag emoji]文本”。

通过此PR， Flutter使用字符包正确处理这些复杂字符。例如，当使用TextField限制时maxLength，诸如‍ [3个表情符号的家族]之类的字符现在可以正确地算作一个字符。此外，与此公关该符号包可在Flutter项目中自动获得，而无需手动添加。希望这可以更轻松地处理来自所有语言环境的所有类型的字符串。要了解有关符号包的更多信息，请查看出色的文章“ Dart中的正确的字符串操作”。

Google Maps和WebView插件可以在生产应用程序中使用

在Flutter团队中，我们经常警惕将某些标签标记为“生产就绪”，直到我们自己对其进行测试为止。对于google_maps_flutter和webview_flutter插件，延迟的主要原因是底层的Platform Views实现，该实现使您可以在Flutter应用程序中托管Android和iOS的本机UI组件。在此Flutter版本中，我们很高兴地宣布，我们已经对基础架构进行了充分的加固，以声明这两个插件均已准备就绪。

webview_flutter插件显示flutter.dev

在Flutter 1.22中，我们添加了一个替代的Platform Views实现，该实现删除了所有已知的Android Views上的键盘问题和可访问性问题。此功能适用于Android API级别19和更高版本（以前需要级别20）。我们还对iOS流进行了改进，使平台视图更高效，更可靠（并且不再需要io.flutter.embedded_views_preview在iOS上添加标志Info.plist）。

该插件webview_flutter支持新的Android平台视图模式，但当前需要手动启用。当它在社区中变得越来越普遍时，我们将默认启用它。

Google Maps和WebView插件已经从平台视图的改进中受益。

如果要使用平台视图在iOS和Android中托管自定义UI元素，请阅读有关的更多信息Flutter应用中的本机Android和iOS视图。

评论

另一个令人愉快的事件，不会给开发人员的生活带来任何革命性的变化。我们已经在生产中使用这两个插件很长时间了，并且没有问题。我们希望进入“生产就绪”阶段不会改变这种情况。我们很高兴看到Yandex MapKit支持的官方插件。在此之前，剩下的就是使用第三方解决方案。

导航器2.0

如果您以前在Flutter应用程序中使用过导航功能，则可能会注意到对您而言隐藏了主数据结构（用户导航的页面堆栈）。而是调用Navigator.pop()或控制它Navigator.push()。

假设您要在主页上显示小部件列表，并允许用户单击其中的小部件转到该特定颜色的详细信息页面。

可以像这样实现两个屏幕：

class ColorListScreen extends StatelessWidget {
 final List<Color> colors;
 final void Function(Color color) onTapped;
 ColorListScreen({this.colors, this.onTapped});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Colors')),
       body: Column(
         children: [
           // you can see and decide on every color in this list
           for (final color in colors)
             Expanded(
               child: GestureDetector(
                 child: Container(color: color),
                 onTap: () => onTapped(color),
               ),
             )
         ],
       ),
     );
}
 
class ColorScreen extends StatelessWidget {
 final Color color;
 const ColorScreen({this.color});
 
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text('Color')),
       body: Container(color: color),
     );
}

使用最简单的样式，Navigator 1.0允许您在两个屏幕之间导航。看起来很简单：

class _ColorAppState extends State<ColorApp> {
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Builder(
         builder: (context) => ColorListScreen(
           colors: _colors,
           // the Navigator manages the list of pages itself; you can only push and pop
           onTapped: (color) => Navigator.push(
             context,
             MaterialPageRoute(builder: (context) => ColorScreen(color: color)),
           ),
         ),
       ),
     );
}

调用Navigator.push()仅需将另一页放在第一页的顶部，即可创建两页的堆栈。但是，与在build方法中创建的容器列表不同ColorListScreen，此堆栈对您隐藏。而且，由于它是隐藏的，因此在其他情况下也很难管理，例如处理通过本机嵌入，互联网的URL或Android的意图提供的初始路由深层链接。管理同一页面的不同结构之间的嵌套路由也极其困难。

Navigator 2.0通过使页面堆栈可见来解决这些以及其他问题。这是相同ColorListScreen和之间的过渡的更新示例ColorScreen：

class _ColorAppState extends State<ColorApp> {
 Color _selectedColor;
 List<Color> _colors = [Colors.red, Colors.green, Colors.blue];
 
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Color App',
       home: Navigator(
           // you can see and decide on every page in this list
         pages: [
           MaterialPage(
             child: ColorListScreen(
               colors: _colors,
               onTapped: (color) => setState(() => _selectedColor = color),
             ),
           ),
           if (_selectedColor != null) MaterialPage(child: ColorScreen(color: _selectedColor)),
         ],
         onPopPage: (route, result) {
           if (!route.didPop(result)) return false;
           setState(() => _selectedColor = null);
           return true;
         },
       ),
     );
}

该应用程序显式创建Navigator并为其提供代表完整堆栈的页面列表。我们创建为空_selectedColor以指示尚未选择颜色，因此最初我们不显示它ColorScreen。当用户选择一种颜色时，我们setState()照常调用以告诉Flutter您想再次调用该方法build()，该方法现在在ColorScreen顶部创建一个堆栈。

您可以在回调中更新状态OnPopPage：例如，如果用户返回屏幕，则意味着他们“取消选择”了当前颜色，我们不再希望显示此页面。

如果Navigator 2.0看起来像Flutter的其余部分，那是故意的：它是声明性的，而不是命令性的Navigator 1.0。这个想法是将导航模型与Flutter的其余部分结合在一起，同时修复许多错误并同时添加功能。实际上，这个小示例仅涉及Navigator 2.0的内容。有关详细信息，我强烈推荐有关Flutter中的声明式导航和路由的文章。

您可以继续使用Navigator 1.0：它的工作原理与以前相同。我们不会很快删除它。但是，我们认为，如果您尝试使用Navigator 2.0，您一定会喜欢的。

. , . , , , , . .

, . — Flutter. Navigator 2.0 . Remi Rousselet Twitter, . , . — Surf. , , GitHub: , , , .

: Android

您可以在此发行版中试用的新功能是对Android状态还原的支持。这是我们最想要的功能之一，共有217条评论！

对于不熟悉恢复状态的用户，移动操作系统可以“杀死”处于后台的应用程序，以释放资源供优先级应用程序使用。发生这种情况时，操作系统会通知应用程序即将“杀死”该应用程序：当用户返回到应用程序时，该应用程序快速保存用户界面的状态以将其恢复。

如果正确实施，则用户体验是无缝的，并且可以更有效地使用设备的资源。直到现在，Flutter还不支持状态恢复，没有框架支持，很难正确地进行状态恢复。因此，我们非常高兴为Android提供此功能的基本实现。

这是一个还原默认Flutter Counter应用程序状态的非常简单的示例：

class CounterState extends State<RestorableCounter> with RestorationMixin {
  @override
  String get restorationId => widget.restorationId;

  RestorableInt _counter = RestorableInt(0);

  @override
  void restoreState(RestorationBucket oldBucket) => registerForRestoration(_counter, 'count');

  void _incrementCounter() => setState(() => _counter.value++);

  @override
  Widget build(BuildContext context) => Scaffold(
      body: Center(child: Text('${_counter.value}')),
      floatingActionButton: FloatingActionButton(onPressed: _incrementCounter),
    );
}

简而言之，每个小部件都会获得一个存储段，该存储段使用唯一的标识符向RestorationMixin注册。通过使用RestorableProperty（RestorableInt如此处所示）存储特定于UI的数据，并使用状态还原功能注册该数据，可在Android退出应用程序之前自动保存该数据，并在其恢复正常状态时进行还原。这就是全部。存储中的所有数据类型Restoration*，例如RestorableInt，RestorableString和RestorableTextEditingController（我们有几个人），将得到恢复。如果我们没有涵盖您要还原的所有类型，则可以通过扩展创建自己的类型可恢复的属性。

为了自动测试状态恢复，我们向WidgetTester添加了新的restartAndRestore API。对于手动测试，最简单的方法是：

在Android设备上启用了状态还原的情况下运行Flutter应用，
在Android开发人员设置中启用“不保存操作”选项，
启动Flutter应用，
放在后台
回到它。

Android将“杀死”并还原您的应用程序，然后您将查看一切是否按预期工作。

此版本的状态恢复是初步的：尚需完成一些工作。例如，状态恢复不仅是Android的功能，iOS应用程序也可以从中受益。我们还忙于更新自己的窗口小部件，以在恢复过程中保持其状态。我们已经支持Scrollable诸如ListView和SingleChildScrollView（用于记住用户的滚动位置）和TextFields（用于恢复输入的文本）之类的类，并且我们计划将其扩展到其他小部件。

是的，我们尚未添加关键功能-导航支持（1.0或2.0），这就是为什么我们将此版本称为“初步”。也就是说，该应用程序将不会在用户所在的位置打开。该功能即将在Beta和Flutter的下一个稳定版本中推出。

— . Flutter- UX. — , (, — -), State . Restorable-, RestorationMixin.

, . : , - , , .

:

当输入和显示速率不匹配时，Flutter团队与Google的内部合作伙伴合作，在滚动性能方面取得了显着改善。例如，Pixel 4的输入频率为120Hz，显示屏的频率为90Hz。这种不一致会导致滚动性能不佳。使用新标志，resamplingEnabled可以解决此问题：

void main() {
  GestureBinding.instance.resamplingEnabled = true;
  run(MyApp());
}

如果启用此标志，则取决于所讨论的频率差异，滚动延迟最多可以减少97％。在以后的版本中，我们计划默认情况下启用此标志。

新的统一Dart开发人员工具

与往常一样，Flutter更新不仅涉及引擎和框架，还涉及工具。Flutter 1.22包括Dart（2.10）的新版本，以及dart可能会有用的新命令行工具。

从历史上看，Dart拥有许多小型开发人员工具（例如dartfmt格式和dartanalyzer代码分析）。Dart 2.10具有dart与该工具非常相似的统一开发工具flutter。

从Flutter 1.22 SDK开始，该文件夹<flutter-sdk>/bin（您可能在其中PATH）包含flutter和命令dart。有关更多信息，请参见Dart 2.10博客文章。

应用程式大小分析工具

作为Flutter 1.22的一部分发布的工具包括一个新的构建大小分析实用程序。此工具可帮助您诊断应用程序的大小是否随着时间而膨胀。

您可以使用此工具收集数据进行分析。使用--analysis-size以下任何命令传递标志：

flutter build apk
flutter build appbundle
flutter build ios
flutter build linux
flutter build macos
flutter build windows

构建输出工件时，使用此标志Flutter提供了工件大小和组成的摘要。它包括本机代码，资源，甚至包括已编译Dart代码的程序包级细分。

Sample Release APK Flutter Gallery Breakdown

此摘要对于快速分析构建的大小并理解其过大的原因很有用。此外，收集的数据也可作为可在飞镖DevTools被视为一个JSON文件，它可以让你进一步探索应用程序的内容，发现大小的问题，并看到两个不同的JSON文件之间的变化通过遵循上flutter.dev说明。上载JSON文件后，您将拥有一个界面，该界面显示应用程序大小的树形图。

Dutter DevTools文档中关于flutter.dev上的应用程序大小分析工具的APK分解

示例

注释

现在可以通过开发工具来分析Android Studio长期以来自身的功能。这更加灵活。现在，您可以将Json中的报表直接部署到CI，并监视程序集大小随时间的变化。

预览：DevTools中更新了“网络”页面

此版本中DevTools的另一个初步功能是：请求正文现在显示在“网络”选项卡中。

要启用此功能，请确保通过flutter channel dev和进入Flutter开发者频道flutter channel upgrade。

另外，对于具有大量网络流量的应用程序，我们提供了搜索和过滤功能。

有关“网络”选项卡上的文档，请参见flutter.dev上的“使用网络视图”部分。

IntelliJ中的托管DevTools检查器选项卡

一段时间以来，我们一直在维护某些Flutter工具的两个副本：例如，IntelliJ中的Inspector面板和Dart DevTools中的Inspector选项卡。这减慢了我们的工作速度：我们需要维护两个代码库。此外，某些功能还不是IntelliJ插件的一部分-例如，布局资源管理器。为了解决这些问题，我们启用了直接从IntelliJ内部的Dart DevTools托管“检查器”选项卡的功能。

要启用此选项，请转到首选项>语言和框架> Flutter >启用嵌入式DevTools检查器。

, . Flutter Dev Podcast Android Studio VS Code.

, … . , IDE. . , Android Studio. .

Visual Studio Code

所有Flutter开发人员都面临的常见操作是从终端中的错误堆栈跟踪到源代码中发生错误的位置。在Visual Studio Code的Flutter扩展的最新版本中，现在可以正确解析这些链接：您可以单击它们，然后转到发生崩溃的代码中的所需位置。

听起来像是一件小事，但有关此功能的初步反馈已经非常积极。

与往常一样，此处的工具变更日志太多，但我建议您查看以下公告：

客户至上：EasyA

EasyA是一个基于订阅的应用程序，学生可以通过即时消息与出色的导师互动。该应用程序是用Flutter编写的。苹果公司最近将其标记为“每日应用程序”。

“当学校从今年年初开始转向远程学习时，我们的任务是迅速启动一个可帮助学生的应用程序。由于Flutter上的高速开发，我们能够为iOS和Android制作一个应用程序。他们设法将它们发布在商店中-正是在锁定开始之前！在正常情况下，这实际上是不可能的。但是由于Flutter允许我们同时使用所有三个平台，因此我们能够有效地重用代码。我们的小型开发团队努力工作。”

EasyA联合创始人郭国强

重大变化

与往常一样，我们尝试将重大更改的数量保持在最少。以下是Flutter 1.22的列表：

56413如果已显示指定的Rect，则阻止viewport.showOnScreen滚动视口。
62395 [gen_l10n]默认的合成数据包生成。
62588减少构建路线。

Flutter 1.22的稳定版本可能在1.20版本发布后很快就发布了，但是其中有很多优点，因此我们在这里不能一一列举。我们希望此版本可以帮助您创建出色的iOS和Android应用程序，我们迫不及待地想看看商店即将推出的产品！感谢您的支持：我们正在为您打造Flutter。

Flutter 1.22公告