Flutter Web 支持现已进入稳定版

作者 / Mariam Hasnany, Product Manager, Flutter

我们对 Flutter 的愿景是成为一个可移植的 UI 框架，在全平台上构建精美的应用体验。做为 Flutter 2 发布内容的一部分，Flutter 的 web 支持已经抵达稳定版里程碑。

Flutter 的首个版本支持 iOS 和 Android，开发者们已经用它在移动应用商店发布了超过 15 万个应用。现在，随着 web 支持的加入，这些应用可以触达更广泛的受众，同时也开辟了在 web 上建立交互体验的新途径。

在此次初始版本的 web 支持中，我们主要关注三个应用场景:

• 渐进式 web 应用 (Progressive web apps, PWA)，兼具 web 的高覆盖面与桌面应用的强大功能。

• 单页应用 (Single page apps, SPA)，只需一次加载，并与互联网服务动态互传数据。

• 将现有 Flutter 移动应用拓展到 web，在两个平台共享代码。

这篇文章介绍了我们迄今为止的工作成果，并分享了几个案例，意在帮助开发者在自己的应用中活用 Flutter 对 web 的支持。 

△ iRobot Education 使用 Flutter 开发了 iRobot Coding 应用，通过此 web 应用向大众提供编程学习体验

• iRobot Education

  https://edu.irobot.com/the-latest/building-a-coding-experience-for-all

• iRobot Coding 应用

  https://code.irobot.com/

Web 之旅

如今的 web 平台比以往任何时候都要丰富多彩，开发者可以使用的工具包括: 硬件加速的 2D 和 3D 图形，离线功能和安装体验，以及对底层操作系统和硬件的访问等。在 web 这个底层平台上已经建立起了种类繁多的框架，因此，开发者在创建 web 应用时拥有极大的灵活性。

• WebGL: 用于 web 的 2D 和 3D 图形

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

• PWA

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

• 对底层操作系统和硬件的访问

  https://web.dev/fugu-status/

• 种类繁多的框架

  https://vuejs.org/

  https://angular.io/

  https://flask.palletsprojects.com/

  https://reactjs.org/

Flutter 是用 Dart 编写的，而 Dart 能编译成 JavaScript，所以我们的下一步自然就是要探讨支持 web 平台的可能性。这符合我们的愿景，也就是提供一个可移植的框架，方便您在任何能描绘像素的地方构建出精美的 UI。

• Dart

  https://dart.cn/

我们的方法是，建立一个在所有平台上都能使用的一致的工具包 (而不是建立两个有着各种微妙差异的独立框架)，以确保开发者的代码运行时不会出现意外。

Flutter 框架由一系列层结构组成，其中包含:

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

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

• 技术概览: 层结构

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

框架本身采用 Dart 编写，大约 70 万行 Flutter 框架核心代码在所有平台上相同: 包括移动端、桌面端和现在的 web 端。对于您的代码来说也是这样，我们使用 Dart 开发编译器 (dartdevc) 或 Dart 部署编译器 (dart2js) 将您的代码编译成 JavaScript，这些 JavaScript 代码可以托管在服务器上。

• dartdevc 命令

  https://dart.cn/tools/dartdevc

• dart2js 命令

  https://dart.cn/tools/dart2js

由于 Dart 拥有将 Flutter 框架 (以及开发者的应用代码) 编译成 JavaScript 的能力，我们对 web 的支持工作就变成了用映射 web 平台 API 的代码来取代移动应用所使用的底层 C++ 渲染引擎。Flutter 并不会简单地将 widget 移植为 HTML 里的等价组件，Flutter 的 web 引擎为开发者提供了两种渲染器: 一个是针对尺寸和兼容性进行优化的 HTML 渲染器，另一个则是使用 WebAssembly 和 WebGL 通过 Skia 绘图命令向浏览器画布进行渲染的 CanvasKit 渲染器。

我们对 Flutter 的要求是，提供一种针对 web 平台进行开发的新方式，在现有基础上提供新见解，为所有人提供更棒的 web 体验。

发布生产环境可用