Flutter 2.5 的新特性【Flutter专题12】

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"Flutter 2.5 的新特性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2017 年 Flutter 的首次发布标志着跨平台应用程序混合开发新时代的开始。Flutter 风靡全球，在几年内，无数公司和开发人员采用 Flutter 作为开发跨平台应用程序的平台和框架。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 使您能够开发移动（Android 和 iOS）、桌面，甚至在","attrs":{}},{"type":"link","attrs":{"href":"https://blog.logrocket.com/how-to-migrate-a-flutter-mobile-app-to-the-web/","title":"","type":null},"content":[{"type":"text","text":"Flutter 2.0","attrs":{}}]},{"type":"text","text":"发布时，甚至是 Web 应用程序，而无需更改其代码库或从头开始重写应用程序。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这个快速发展的框架的最新版本","attrs":{}},{"type":"link","attrs":{"href":"https://medium.com/flutter/whats-new-in-flutter-2-5-6f080c3f3dc","title":"","type":null},"content":[{"type":"text","text":"Flutter 2.5","attrs":{}}]},{"type":"text","text":"包含了一个全新的、更强大的功能。在本指南中，我们将帮助您熟悉 Flutter 2.5 引入的最值得注意的新功能和改进，包括：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"如何升级到 Flutter 2.5","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"安卓全屏支持","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Material You (v3) 支持","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"MaterialState.scrolledUnder 并支持 AppBar.backgroundColor","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"材料banner","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"可切换的键盘快捷键","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"改进的小部件检查器","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"向 VS Code 项目添加依赖项","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"新应用模板","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"如何升级到 Flutter 2.5","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"您可以通过运行以下命令将 Flutter 版本升级到 v2.5：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"typescript"},"content":[{"type":"text","text":"flutter upgrade\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter CLI 工具将完成将您的 Flutter SDK 升级到最新版本 2.5 的工作。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要验证升级是否成功，请运行以下命令：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"flutter --version\n\nFlutter 2.5.0 • channel stable • https://github.com/flutter/flutter.git\nFramework • revision 4cc385b4b8 () • 2021-11-27 23:01:49 -0700\nEngine • revision f0826da7ef\nTools • Dart 2.14.0\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"确保 Flutter 版本是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"2.5.0","attrs":{}}],"attrs":{}},{"type":"text","text":". 上面的输出是我的系统的结果。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"安卓全屏支持","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 对其在 Android 中的全屏模式进行了相当多的更改。全屏模式会影响系统 UI 覆盖的可见性，例如状态和底部导航栏。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这一变化为 Android 和 iOS引入了","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/flutter/flutter/pull/81303","title":"","type":null},"content":[{"type":"text","text":"新的模式配置","attrs":{}}]},{"type":"text","text":"，称为倾斜、沉浸式、沉浸式粘性和边缘到边缘。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"当在屏幕上的任何位置点击显示时，后仰模式会显示系统 UI 覆盖（状态栏和导航栏）。此操作生成的事件不会传递给应用程序。这种全屏体验类似于 iOS 设备","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"沉浸模式会导致在边缘滑动屏幕时显示系统 UI 叠加层（状态栏和导航栏）。与后倾模式一样，此操作生成的事件不会传递给应用程序","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"沉浸式粘性模式类似于沉浸式模式；滑动屏幕边缘时会显示系统 UI 叠加层。这里的区别在于应用程序会收到事件通知","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"边缘到边缘模式会导致系统 UI 覆盖显示/渲染在应用程序上。应用程序 UI 位于系统（状态栏和导航栏）叠加层的后面","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Material You (v3) 支持","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"link","attrs":{"href":"https://material.io/blog/announcing-material-you","title":"","type":null},"content":[{"type":"text","text":"Material You","attrs":{}}]},{"type":"text","text":"是 Material Design 的新 Google 版本。随之而来的是很多支持，Flutter 2.5 支持","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"大小和主题。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"尺寸可被构造成具有四种尺寸：","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"small","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"regular","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":"，和","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"small","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"FAB 看起来很小。请参阅下面的代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"floatingActionButton: FloatingActionButton.small(\nonPressed: _incrementCounter,\ntooltip: 'Increment',\nchild: const Icon(Icons.add),\n),\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的代码将创建并呈现一个小的 FAB 小部件：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b7/b720d894641a928cdb48f8fd6e154093.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"随着方法","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"small","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":"，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"被添加到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"类，所以我们可以很容易地通过使用他们，创造各种FAB尺寸。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"regular","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"该","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"regular","attrs":{}}],"attrs":{}},{"type":"text","text":"尺寸是FAB的正常大小。我们可以像平常一样使用它","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" floatingActionButton: FloatingActionButton(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n child: const Icon(Icons.add),\n ), // This trailing comma makes auto-formatting nicer for build methods.\n","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":" 呈现非常大的 FAB 尺寸。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要使用此大小，请调用类中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"large","attrs":{}}],"attrs":{}},{"type":"text","text":"方法","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" floatingActionButton: FloatingActionButton.large(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n child: const Icon(Icons.add),\n ), // This trailing comma makes auto-formatting nicer for build methods.\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/26/26a936e1764bce61d0c65c8b1a5ec62e.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":" 结合 FAB 上的文本和图标。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButton","attrs":{}}],"attrs":{}},{"type":"text","text":"类上调用该方法。一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"label","attrs":{}}],"attrs":{}},{"type":"text","text":"参数被传递给","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"方法。此参数将是 FAB 将显示的文本。然后，","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"icon","attrs":{}}],"attrs":{}},{"type":"text","text":"还将一个参数传递给该方法，该","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"icon","attrs":{}}],"attrs":{}},{"type":"text","text":"参数是将显示在 FAB 标签旁边的图标。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":" floatingActionButton: FloatingActionButton.extended(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n label: Text(\"Increment\"),\n icon: const Icon(Icons.add),\n )\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/5a/5a1e1377728ba11461207cb5075ab62c.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以在这个扩展的 FAB 中自定义标签和图标之间的间距。为此，请","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extendedIconLabelSpacing","attrs":{}}],"attrs":{}},{"type":"text","text":"向该","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extended","attrs":{}}],"attrs":{}},{"type":"text","text":"方法传递一个参数：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"floatingActionButton: FloatingActionButton.extended(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n label: Text(\"Increment\"),\n icon: const Icon(Icons.add),\n extendedIconLabelSpacing: 30\n )\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们将 设置","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"extendedIconLabelSpacing","attrs":{}}],"attrs":{}},{"type":"text","text":"为 的值","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"30","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/04/04b611b5cb47e45d7c55afb78a21ba9d.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"Flutter 2.5 中的主题浮动操作按钮","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们可以在我们的应用程序中对各种尺寸的 FAB 进行主题化。这是通过","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButtonThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"类完成的。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"首先，创建一个实例","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButtonThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"并将设置传递给它：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0);\n\nconst FloatingActionButtonThemeData(\n largeSizeConstraints: constraints,\n backgroundColor: Colors.green,\n),\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在上面的示例中，我们将 FAB 的盒模型设置为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"100.0","attrs":{}}],"attrs":{}},{"type":"text","text":"高度和宽度的单位，并将背景颜色设置为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"green","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"让我们将此实例设置","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"FloatingActionButtonThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"为小部件中的","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"调用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialApp","attrs":{}}],"attrs":{}},{"type":"text","text":"：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"@override\n Widget build(BuildContext context) {\n const BoxConstraints constraints = BoxConstraints.tightFor(width: 100.0, height: 100.0);\n return MaterialApp(\n title: 'Flutter Demo',\n theme: ThemeData(\n floatingActionButtonTheme: const FloatingActionButtonThemeData(\n largeSizeConstraints: constraints,\n backgroundColor: Colors.green,\n ),\n primarySwatch: Colors.blue,\n ),\n home: const MyHomePage(title: 'Flutter Demo Home Page'),\n );\n }\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此主题将影响我们将在应用程序中创建的 FAB。我们应用中的所有 FAB 都是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"100.0","attrs":{}}],"attrs":{}},{"type":"text","text":"宽度和高度单位，背景颜色为绿色。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"让我们添加两个 FAB：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"floatingActionButton: Container(\n padding: const EdgeInsets.all(50.0),\n child:Row(\n children: [\n FloatingActionButton.extended(\n onPressed: _incrementCounter,\n tooltip: 'Increment',\n label: Text(\"Increment\"),\n icon: const Icon(Icons.add),\n ),\n FloatingActionButton.extended(\n onPressed: ()=>{},\n tooltip: 'Decrement',\n label: Text(\"Decrement\"),\n icon: const Icon(Icons.cancel_sharp),\n ),\n ],\n ),\n)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们的两个 FAB 没有设置颜色，但是我们在 中设置的主题","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ThemeData","attrs":{}}],"attrs":{}},{"type":"text","text":"会影响它们。它们将具有","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"100.0","attrs":{}}],"attrs":{}},{"type":"text","text":"单位和绿色背景的框约束。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/42/42517064e6323cbcf28fef61a5136d02.png","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"codeinline","content":[{"type":"text","text":"MaterialState.scrolledUnder","attrs":{}}],"attrs":{}},{"type":"text","text":" 并支持 ","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"AppBar.backgroundColor","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此功能是应用于AppBar或SliverAppBar的背景颜色的效果。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter团队的补充一个状态到。当小部件与下方可滚动的内容重叠时，会设置此状态。AppBar 设置此状态以指示一段可滚动内容已向上滚动到其后面。MaterialState.scrolledUnder","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialState``scrollUnder","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"通过在 AppBar 或 SliverAppBar 的背景颜色属性中设置监听器，可以在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"scrollUnder","attrs":{}}],"attrs":{}},{"type":"text","text":"事件触发时更改颜色：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"class _MyHomePageState extends State {\n\nstatic Widget buildListItem(BuildContext context, int index) {\n final Color color = Colors.primaries[index % Colors.primaries.length];\n return Padding(\n padding: EdgeInsets.all(2),\n child: ListTile(\n title: Text('List Item $index'),\n ),\n );\n }\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n backwardsCompatibility: false,\n elevation: 0,\n backgroundColor: MaterialStateColor.resolveWith((Set states) {\n return states.contains(MaterialState.scrolledUnder) ? Colors.red : Colors.blue;\n }),\n title: Text('Hello World'),\n ),\n body: ListView.builder(\n itemCount: 200,\n itemBuilder: buildListItem,\n ),\n );\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们将 AppBar 设置为","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"backgroundColor","attrs":{}}],"attrs":{}},{"type":"text","text":"从其当前状态解析颜色。我们调用了并在其中设置了一个回调函数。该回调函数接收 AppBa 中的所有状态。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialStateColor.resolveWith(...)","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"然后我们检查状态是否包含. 这告诉我们 AppBar 已被滚动到下方，因此我们返回靛蓝色。如果不是，则返回蓝色。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialState.scrolledUnder","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/3e/3e41e8b41ed952a83047a268ea3b1ffb.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScrollMetricsNotification","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"该","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/flutter/flutter/pull/85221","title":"","type":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScrollMetricsNotification","attrs":{}}],"attrs":{}}]},{"type":"text","text":"功能使您能够侦听滚动条以检测滚动条的内容何时发生更改。如果寡妇或可滚动的父级的大小发生更改，也会通知可滚动。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"下面是一个例子：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"class _MyHomePageState extends State {\n double windowSize = 200.0;\n\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n backwardsCompatibility: false,\n elevation: 0,\n title: Text('Hello World'),\n ),\n body: NotificationListener(\n onNotification: (ScrollMetricsNotification notification) {\n ScaffoldMessenger.of(notification.context).showSnackBar(\n const SnackBar(\n content: Text('Scroll metrics changed!'),\n ),\n );\n return false;\n },\n child: Scrollbar(\n isAlwaysShown: true,\n child: SizedBox(\n height: windowSize,\n width: double.infinity,\n child: const SingleChildScrollView(\n child: FlutterLogo(\n size: 300.0,\n ),\n ),\n ),\n ),\n ),\n floatingActionButton: Container(\n padding: const EdgeInsets.all(50.0),\n child: Row(\n children: [\n FloatingActionButton.extended(\n onPressed: () => {\n setState(() {\n windowSize += 10.0;\n })\n },\n tooltip: 'Adjust WindowSize',\n label: Text(\"Adjust WindowS\"),\n icon: const Icon(Icons.cancel_sharp),\n ),\n ],\n ),\n )\n );\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/12/1292ffe05c8ae10ced72fa0c5c655993.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"我们有一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Scrollbar","attrs":{}}],"attrs":{}},{"type":"text","text":"封装在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NotificationListener","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件中。该","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScrollBar","attrs":{}}],"attrs":{}},{"type":"text","text":"有一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SizedBox","attrs":{}}],"attrs":{}},{"type":"text","text":"; 所述","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SizedBox","attrs":{}}],"attrs":{}},{"type":"text","text":"的高度被附接到","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"windowSize","attrs":{}}],"attrs":{}},{"type":"text","text":"状态。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"onNotification","attrs":{}}],"attrs":{}},{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"NotificationListener","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件中设置了一个回调。当","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"SizedBox","attrs":{}}],"attrs":{}},{"type":"text","text":"内容更改时调用此回调。请注意，回调接收一个参数，该参数 的实例是","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScrollMetricsNotification","attrs":{}}],"attrs":{}},{"type":"text","text":"。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"MaterialBanner","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最后，","attrs":{}},{"type":"link","attrs":{"href":"https://api.flutter.dev/flutter/material/MaterialBanner-class.html","title":"","type":null},"content":[{"type":"text","text":"MaterialBanner","attrs":{}}]},{"type":"text","text":"类就在这里。此功能使您能够在 Flutter 应用程序的顶部添加banner。此banner会一直保留到被取消为止。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此 Material Design Banner由","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger","attrs":{}}],"attrs":{}},{"type":"text","text":"类处理。这个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger","attrs":{}}],"attrs":{}},{"type":"text","text":"类有我们可以用来创建和删除 MaterialBanners 的方法。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger.of(context).showMaterialBanner","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此方法创建并显示一个 Material Banner。传递一个小部件；这是该方法在我们的应用程序顶部显示的 MaterialBanner。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger.of(context).showMaterialBanner``MaterialBanner","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"ScaffoldMessenger.of(context).showMaterialBanner(\n MaterialBanner(\n content: const Text('Yay!! Do you like me!!'),\n leading: const Icon(Icons.warning),\n backgroundColor: Colors.purple,\n actions: [\n TextButton(\n child: const Text('Dismiss', style: const TextStyle(color: Colors.white)),\n onPressed: () => ScaffoldMessenger.of(context)\n .hideCurrentMaterialBanner(),\n ),\n ],\n ),\n)\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"上面的代码将显示一个 MaterialBanner。看到一个","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialBanner","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件被传递给","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"showMaterialBanner","attrs":{}}],"attrs":{}},{"type":"text","text":"方法。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"在","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"MaterialBanner","attrs":{}}],"attrs":{}},{"type":"text","text":"小部件中，我们传递了以下道具：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"content","attrs":{}}],"attrs":{}},{"type":"text","text":"：这个道具设置banner的主体。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"leading","attrs":{}}],"attrs":{}},{"type":"text","text":"：这将设置在banner开头的图标。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"backgroundColor","attrs":{}}],"attrs":{}},{"type":"text","text":"：这会设置banner小部件的背景颜色。","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"actions","attrs":{}}],"attrs":{}},{"type":"text","text":"：这将设置将位于banner小部件末尾的按钮。","attrs":{}}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"codeinline","content":[{"type":"text","text":"ScaffoldMessenger.of(context).hideCurrentMaterialBanner","attrs":{}}],"attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"此方法删除现有的 MaterialBanner。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"actions: [\n TextButton(\n child: const Text('Dismiss', style: const TextStyle(color: Colors.white)),\n onPressed: () => ScaffoldMessenger.of(context)\n .hideCurrentMaterialBanner(),\n ),\n],\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"完整代码：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"javascript"},"content":[{"type":"text","text":"// main.dart\nimport 'package:flutter/material.dart';\n\nvoid main() {\n runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n @override\n Widget build(BuildContext context) {\n return MaterialApp(\n // Remove the debug banner\n debugShowCheckedModeBanner: false,\n title: '坚果前端',\n theme: ThemeData(\n primarySwatch: Colors.indigo,\n ),\n home: HomePage());\n }\n}\n\nclass HomePage extends StatefulWidget {\n const HomePage({Key key}) : super(key: key);\n\n @override\n _HomePageState createState() => _HomePageState();\n}\n\nclass _HomePageState extends State {\n @override\n Widget build(BuildContext context) {\n return Scaffold(\n appBar: AppBar(\n backwardsCompatibility: false,\n elevation: 0,\n title: Text('Hello World'),\n ),\n body: NotificationListener(\n onNotification: (ScrollMetricsNotification notification) {\n ScaffoldMessenger.of(notification.context).showSnackBar(\n const SnackBar(\n content: Text('Scroll metrics changed!'),\n ),\n );\n return false;\n },\n child: Scrollbar(\n isAlwaysShown: true,\n child: SizedBox(\n height: 100.0,\n width: double.infinity,\n child: const SingleChildScrollView(\n child: FlutterLogo(\n size: 300.0,\n ),\n ),\n ),\n ),\n ),\n floatingActionButton: Container(\n padding: const EdgeInsets.all(50.0),\n child: Row(\n children: [\n FloatingActionButton.extended(\n onPressed: () => {\n ScaffoldMessenger.of(context).showMaterialBanner(\n MaterialBanner(\n content: const Text('Yay!! Do you like me!!'),\n leading: const Icon(Icons.warning),\n backgroundColor: Colors.purple,\n actions: [\n TextButton(\n child: const Text('Dismiss',\n style: const TextStyle(color: Colors.white)),\n onPressed: () => ScaffoldMessenger.of(context)\n .hideCurrentMaterialBanner(),\n ),\n ],\n ),\n )\n },\n tooltip: 'Show MaterialBanner',\n label: Text(\"Show MaterialBanner\"),\n icon: const Icon(Icons.add),\n ),\n ],\n ),\n ));\n }\n}\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"image","attrs":{"src":"https://static001.geekbang.org/infoq/b2/b2d18359ac8f8f90553aac3f99a3a3e6.gif","alt":null,"title":null,"style":[{"key":"width","value":"75%"},{"key":"bordertype","value":"none"}],"href":null,"fromPaste":true,"pastePass":true}},{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"Flutter 2.5 中的其他显著特性","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"除了上述新的 UI 功能外，Flutter 2.5 还引入了对可切换键盘快捷键的支持、改进的小部件检查器工具、支持在 VS Code 项目中添加依赖项以及新的应用程序模板。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"让我们仔细看看。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"可切换的键盘快捷键","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"2.5 版对 Flutter 的文本编辑键盘快捷键进行了一些更新。最值得注意的变化是快捷方式现在可以覆盖。Flutter 2.5 中新的可覆盖键盘快捷键使您能够设置快捷键组合以执行自定义操作。","attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"改进的小部件检查器","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"该","attrs":{}},{"type":"link","attrs":{"href":"https://flutter.dev/docs/development/tools/devtools/inspector","title":"","type":null},"content":[{"type":"text","text":"Flutter部件检查","attrs":{}}]},{"type":"text","text":"得到了与flutter2.5的发布一个重大改版。新的和改进的小部件检查器现在可以更详细地查看您的小部件，包括深入了解为什么特定的帧可能会卡顿。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"检查框架揭示了帧信息，包括帧的，，，和。","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"Frame Time (UI)``Frame Time(Raster)``Jank``Shader Compilation","attrs":{}}],"attrs":{}}]},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"向 VS Code 项目添加依赖项","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 插件对 Visual Studio Code 和 IntelliJ 的支持也随着 Flutter 进行了更新。现在可以从 Flutter 插件向项目添加新的依赖项。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"这是通过以下命令完成的：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Dart: Add Dependency","attrs":{}}],"attrs":{}},{"type":"text","text":" 在项目的主要依赖中","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/Dart-Code/Dart-Code/issues/3306","title":"","type":null},"content":[{"type":"text","text":"添加一个Flutter包","attrs":{}}]}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"codeinline","content":[{"type":"text","text":"Dart: Add Dev Dependency","attrs":{}}],"attrs":{}},{"type":"text","text":" 添加项目在项目开发过程中使用","attrs":{}},{"type":"link","attrs":{"href":"https://github.com/Dart-Code/Dart-Code/pull/3474","title":"","type":null},"content":[{"type":"text","text":"的依赖项","attrs":{}}]}]}]}],"attrs":{}},{"type":"heading","attrs":{"align":null,"level":3},"content":[{"type":"text","text":"新应用模板","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"最初，当您使用","attrs":{}},{"type":"codeinline","content":[{"type":"text","text":"flutter create app","attrs":{}}],"attrs":{}},{"type":"text","text":". 计数器模板的问题在于它没有为构建真实世界的应用程序提供一个好的起点。","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"Flutter 2.5 引入了一个具有生产级质量特性的新模板，包括：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"bulletedlist","content":[{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"主题化","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"页面导航","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"本地化和国际化","attrs":{}}]}]},{"type":"listitem","attrs":{"listStyle":null},"content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"不同手机像素的示例图像","attrs":{}}]}]}],"attrs":{}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"要在搭建新 Flutter 项目时使用这个新模板，请运行以下命令：","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"codeblock","attrs":{"lang":"dart"},"content":[{"type":"text","text":"flutter create -t skeleton app\n","attrs":{}}]},{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"type":"text","text":"好的，今天关于flutter2.5的新特性就介绍到这儿，谢谢大家的阅读！","attrs":{}}]}]}