从相同的代码库发布到网页和移动设备上
发布时间：2020年3月4日-10分钟阅读
我们对Flutter的愿景是成为一个可移植的UI框架，用于在任何平台上构建美丽的应用体验。今天，作为Flutter 2的一部分，我们宣布Flutter的网络支持已经达到了稳定的里程碑。
第一个Flutter版本支持iOS和Android，并已用于将超过15万个应用带到移动应用商店。现在，加入web支持意味着这些同样的应用可以接触到更广泛的受众，同时也开启了在web上构建交互式体验的新方式。
在这个网络支持的初始版本中，我们将重点关注三种应用场景。
- 渐进式网络应用(PWA)，将网络的覆盖面与桌面应用的功能结合起来。
- 单页应用(SPA)，只需加载一次，并将数据传输到互联网服务和从互联网服务中传输。
- 将现有的Flutter移动应用扩展到网络，实现两种体验的共享代码。
本文介绍了我们到目前为止所建立的东西，并探讨了您如何在自己的应用程序中利用Flutter的网络支持的例子。
iRobot Education使用Flutter开发了iRobot Coding应用，通过在网络上提供给大家学习代码的体验。
我们的网络之旅
如今的web平台比以往任何时候都要丰富，有硬件加速的2D和3D图形，离线和安装支持，以及对底层操作系统和硬件的访问。网络已经允许广泛的框架建立在这个底层平台上，为开发人员如何为网络创建应用程序提供了极大的灵活性。
由于Flutter是用Dart编写的，Dart是一种提供JavaScript编译的语言，所以下一步自然而然地要探索网络作为目标。这也是我们的愿景，即提供一个可移植的框架，用于在任何你想画像素的地方构建漂亮的UI。
我们的方法是建立一个一致的工具包，可以在所有平台上工作（而不是有两个独立的框架，行为有微妙的偏差），以确保你自己的代码运行时没有意外。
在架构层面上，Flutter是一个多层系统，其。
- 一个框架，为常见的习惯用语提供抽象，比如小部件，动画和手势。
- 一个引擎，使用其公开的系统API渲染到目标设备。
框架本身是用Dart编写的，大约70万行Flutter框架核心代码在所有平台上都是一样的：移动、桌面和现在的web。对你的代码也是如此；我们使用Dart开发编译器（dartdevc）或Dart部署编译器（dart2js）将你的代码编译成JavaScript，然后可以托管在服务器上。
有了Dart将Flutter框架（以及你的应用代码）编译成JavaScript的能力，我们支持网络的工作涉及到用映射到网络平台API的代码取代移动应用所使用的低级C++渲染引擎。Flutter并不仅仅是将其小部件移植到HTML等价物上。相反，Flutter的网络引擎提供了两个渲染器的选择：一个是针对尺寸和广泛兼容性进行优化的HTML渲染器，另一个是使用WebAssembly和WebGL将Skia画布命令渲染到浏览器画布上的CanvasKit渲染器。
我们对Flutter的目标是提供一种针对网络平台的新方法，在现有基础上，提供新的见解，为大家改善网络。
提供生产质量稳定的版本
自从我们一年前发布网络支持的测试版以来，我们已经了解了很多关于早期采用者如何使用它的信息，我们已经与一些客户合作，他们现在已经将他们的Flutter网络应用运送到生产中。
在此期间，我们对架构进行了重大改进，并增加了一些功能，以扩展和优化Flutter的web功能，主要集中在四个方面：性能、web特定功能、桌面形式因素和插件。
性能
自早期版本以来，我们最大的改进领域是性能。在开发过程中，我们对网络上各种渲染技术的性能和正确性特点有了更好的了解。
我们最初是从一个基于HTML、DOM的模型开始的。在这种模式下，Flutter的网络引擎将每个生成的Flutter场景翻译成HTML、CSS或Canvas，并以HTML元素树的形式将一个框架渲染到页面上。尽管HTML渲染器提供了与各种浏览器最大的兼容性，并且代码尺寸较小，但HTML渲染器的重绘性能不太适合像Rive这样的图形密集型应用，Rive是与Flutter一起打造的用于创建运动图形的协作工具。
Rive，一个用于创建自定义动画的工具，使用Flutter在网络上重建了他们的应用程序，现在已经可以在测试版中使用。
为了有效地处理渲染密集型图形所需的保真度，我们开始尝试使用CanvasKit，它可以使用WebAssembly和WebGL在浏览器中渲染Skia的绘画命令。我们发现CanvasKit可以提供卓越的性能、保真度和正确性，使Flutter社区的天才成员Felix Blaschke在这个演示中表现出的图形马力水平得以实现。
Flutter Plasma，一个由Felix Blaschke创建的演示，运行在Safari、Firefox、Edge和Chrome上。
每种渲染器在不同的场景下都有优势，所以Flutter是支持两种渲染模式的。
- HTML渲染器。使用HTML元素、CSS、Canvas元素和SVG元素的组合。这种渲染器的下载量较小。
- CanvasKit渲染器。这种渲染器与Flutter移动和桌面完全一致，具有更快的性能和更高的widget密度，但增加了约2MB的下载大小。
为了针对每个设备的特性优化您的Flutter网络应用，渲染模式默认设置为自动。这意味着您的应用程序在移动浏览器上使用HTML渲染器，在桌面浏览器上使用CanvasKit运行。
您也可以使用 --web-renderer html 或 --web-renderer canvaskit 来明确选择您的应用程序使用的渲染器。如需了解更多信息，请参阅 Web 渲染器。
特定于Web的功能
在浏览器中运行的Flutter应用应该感觉像一个网络应用。所以我们为Flutter添加了一些功能，帮助您使用最好的网络。
网络有很多优势，尤其是它的全球影响力。将您现有的Flutter应用带到网络上的众多原因之一是为了接触应用商店以外的用户。为了做到这一点，我们添加了对自定义URL策略的支持，以确保您的用户只需点击URL就可以在任何地方到达您的应用程序。有了这个功能，您可以控制地址栏中显示的URL，以及您的应用在网络上的路由。
Flutter Plasma demo的展厅页面是url_strategy插件的一个例子，基于Flutter的自定义URL策略，在行动中。
超链接对于用户如何浏览网页也是至关重要的。url_launcher包中的一个新的link widget可以让用户深度链接到你的应用内的锚点或外部网站。您可以在相关的小部件上使用link，包括按钮、内联文本、图像，并指定链接是在同一标签页中打开还是在新标签页中打开。
任何应用程序的另一个不可或缺的部分是文本渲染。为文本开发一个布局系统是在网络上支持Flutter的最大挑战之一。由于web缺乏直接的文本布局API，Flutter必须通过触发layout()对paragraph进行各种测量。这些测量可能会变得相当昂贵，所以一个新的基于画布的文本测量增加了对纯文本和富文本的支持。现在，Flutter可以在网络上高效地进行详细的测量，实现了在选定的文本上准确地绘制高亮框等功能。
与文本的交互与能够快速准确地渲染文本同样重要。现在可以通过使用SelectableText和EditableText部件来选择、复制和粘贴文本。此外，表单文本字段支持自动填充，使浏览器能够存储数据并处理未来自动填充的情况。
Flutter 2特别适合于实现渐进式Web应用程序，或PWA。PWA很适合通过Chrome的Project Fugu的努力，以安全和可信的方式弥合移动和Web应用之间的差距。
发票管理应用Invoice Ninja使用与他们现有的Flutter移动应用相同的代码库推出了PWA应用。
当您创建 Flutter 网络应用时，我们会包含一个 PWA 网络清单文件，以及设置服务工作者的代码。清单文件提供了关于您的应用程序应该如何运行的元数据，包括信息。
当您创建Flutter Web应用程序时，我们包含PWA Web清单文件，以及设置服务工作者的代码。清单文件提供了关于您的应用程序应该如何运行的元数据，包括图标和应用程序标题等信息。服务工作者可以实现资源的缓存和离线运行您的应用程序。当在浏览器中以PWA的形式运行Flutter应用时，您将看到将其安装到设备上的机会，无论是作为移动应用还是桌面应用。
支持桌面形式因素
我们希望让Flutter网络体验感觉正确，无论你的浏览器窗口的形状和大小。在移动浏览器上，Flutter应用程序已经拥有从移动应用程序支持中继承的手势和滚动物理学的出色支持。但桌面浏览器提供了不同的UI承受能力，因此我们对Flutter进行了相应的更新。
例如，人们期望桌面上的内容能够显示可由鼠标或键盘控制的滚动条。因此，新的可定制的交互式滚动条支持主题、轨迹以及通过拖动拇指滚动的能力。PrimaryScrollController已经被扩展，这样你就可以使用键盘快捷键来滚动，而不需要对自己的滚动视图进行布线。
苏黎世保险的财产管理解决方案，由Spica Technologies打造，是Flutter的web支持可以在桌面浏览器上启用业务应用的一个很好的例子。
我们还增加了默认的内容密度，因为鼠标指针支持的密度比触摸设备更紧密。而且我们在框架中增加了系统鼠标指针的超集，以支持所有平台。
最后，为了支持所有用户，Flutter的网络语义功能得到了扩展，支持Windows、macOS和ChromeOS的可访问性。在网络上，第二个DOM树称为SemanticsNode树，与RenderObject DOM树并行生成。SemanticsNode树将标志、动作、标签和其他语义属性转化为ARIA属性。现在，您可以使用Narrator、VoiceOver、TalkBack或ChromeVox屏幕阅读器来导航Flutter网络应用。
插件生态系统
最后，在一些最常用的插件中添加了网络支持，使您现有的Flutter应用程序有可能带到网络上。Flutter插件允许您的代码与您所运行的平台的本地库进行交互。当您在网络上运行您的Flutter应用时，您可以通过插件访问现有的JavaScript库。
自测试版发布以来，在社区的帮助下，增加了对以下插件的支持。
- image_picker
- google_maps
- Firebase_analytics
- firebase_storage
- connectivity
- cloud_firestore
- cloud_functions
- cross_file
期待
几年前，还不可能在网络上以可接受的质量和性能水平提供Flutter。然而，新的网络技术的引入和平台的不断进步使我们能够利用更多的基础设备的潜力。通过对网络的支持，Flutter涵盖了互联网上的每一个设备，并在所有现代浏览器和设备上提供一致的体验。
这个版本的大部分内容是由早期的网络用户分享的反馈和社区提交的问题所决定的。为此，我们感谢你们 展望未来，我们的首要目标是快速处理您的反馈并解决问题，以便您可以专注于在所有目标平台上发布高质量的Flutter应用程序。
Moi Mobiili，一个现代化的移动虚拟网络运营商，最近使用Flutter推出了他们的网络应用。
性能可能永远是一个投资的领域。我们的目标是减少代码大小，提高每秒帧数（fps）。今天，每个Flutter网络应用都会下载它所需要的引擎代码。我们正在研究缓存部分逻辑的可能性，减少启动时间和下载大小。我们最近在Flutter Gallery演示应用中做了使用递延库减少代码大小的工作，并计划很快分享我们学到的东西。
在未来几个月内，我们还在继续完善一些领域。
- 虽然CanvasKit是稳定的，但还有一些边缘情况没有被覆盖，比如特殊字符的字体回退或正确支持跨源资源共享（CORS）图像。
- PWA目前缓存了一个资源子集，所以我们的完全离线支持仍然需要额外的手动步骤来为CanvasKit工作。
- 文本渲染和功能，比如选择重风格的文本，仍然是我们将继续努力的最复杂的功能之一。
- 我们的插件生态系统也是我们将继续投资的对象，以便谷歌发布的包在移动和网络上有更大的平等性。
- Simplebet使用Flutter的网络支持，在Fanduel现有的移动应用程序套件中建立高度互动的可嵌入的NFL和NBA投注体验。
在网络上开始使用Flutter
凭借Dart的可移植性、Web平台的强大功能和Flutter框架的灵活性，您现在可以从同一个代码库中为iOS、Android和浏览器构建应用程序。
对于那些已经拥有现有Flutter Web应用的人，你现在可以在稳定频道中构建你的应用。如果您是构建Flutter web应用的新手，请查看flutter.dev/web ，我们的入门codelab，以及Flutter Engage web分组会议。而且，当你在构建你的web应用时，一定要在GitHub上提交任何问题。
我们迫不及待地想看到你用Flutter新的web支持构建的东西!
通过www.DeepL.com/Translator（免费版）翻译
