深度解析 | Flutter web 支持的最新进展

作者 / Mariam Hasnany, Product Manager, Flutter

我们将通过这篇文章深入分享将 Flutter 引入 web 平台的最新进展，重点介绍我们为与 web 平台进行深度、原生集成所做的努力。

我们对 Flutter 的愿景是提供一个可移植的工具包，让您可以在任何屏幕上尽情绘制像素，打造美好的体验。正如我们不久前和大家分享的一样，我们在框架和 API 的选择上将应用置于中心位置，构建出了一个可以跨移动、桌面和嵌入式设备的分层架构，且不影响性能和品质。

Web 正是这项工作的核心。Flutter 的诞生离不开 Chrome 团队的不懈探索。它的灵感源自 web 的生产力和迭代开发模型，我们的许多工程师在构建浏览器引擎和网络标准方面都有多年的经验。我们之所以将网络浏览器作为目标，是因为它是互联网的 "心脏": 计算机历史上最普遍、最灵活、最广泛的应用模型。

多年以来，web 平台和 HTML DOM 在本质上相差无几。然而最近，随着 web 平台不断扩展，API 和功能越来越丰富，使得开发者得以接触到底层操作系统和硬件。从硬件加速的图形绘制到 Shell 集成和 PWA，从 Service Worker 到新的布局和绘制 API，对于复杂的应用甚至是在此基础之上布局的框架而言，web 都是一个越来越强大的目标平台。

• 硬件加速的图形绘制

  https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API

• Shell 集成

  https://w3c.github.io/manifest/

• PWA

  https://web.dev/progressive-web-apps/

• Service Worker

  https://developers.google.cn/web/fundamentals/primers/service-workers

• 布局和绘制 API

  https://developer.mozilla.org/en-US/docs/Web/Houdini

Flutter 对 web 的支持不仅仅是对 DOM 的转译: 它充分利用这些全新的 API 集，既提供真正的 web 体验，又完整保留了 Flutter 的特色。

在这篇文章中，我们将详细介绍具体的实现过程，分享 Flutter 如何使用 web 来实现丰富的交互式体验，而无需重写现有 Flutter 代码。我们还会介绍无障碍功能和后端编译选择等内容，虽然初上手尝试 Flutter 的开发者们可能一时还用不到这些功能。

不只是 canvas 绘制

将 Flutter widget 绘制为 web 上的像素实际上意味着什么？

我们先来回顾一下 Flutter 的 web 架构。Flutter 是一个多层系统，包含:

• 用于为 widget、动画和手势等常见的习惯用法提供抽象的框架。

• 使用公开的系统 API 在目标设备上进行渲染的引擎。

• Flutter 的分层模型

  https://flutter.cn/docs/resources/technical-overview#layer-cakes-are-delicious

框架代码是用 Dart 编写的。我们将其与您自己的代码相结合，并在编译时应用摇树优化 (tree-shaking) 算法，以便只将您的应用使用到的代码下载到浏览器中。Flutter 采用响应式模型，根据状态变化渲染用户界面。Flutter 在每帧内构建 widget，执行布局&#