Flutter 为您的 Web 应用开发注入更多精彩

作者: Kevin Moor

作为一款出色的移动 UI 框架，Flutter 允许开发者自由地创建精美的个性化用户体验。Flutter 现已提供现代 web 支持！我们很高兴向大家推出技术预览版 SDK，今后，您便能直接在 web 浏览器上运行 Flutter UI 代码并实现业务逻辑。

Flutter

https://flutter.dev/

Web 浏览器上的 Flutter 有多棒?

自去年首个 Beta 版发布以来，来自世界各地的开发者们纷纷发挥创意，利用 Flutter 构建出许许多多精美的 iOS 及 Android 移动应用。不过，Flutter 的魅力并不止步于此，作为一套可移植的 UI 工具包，Flutter 亦能在其他环境下运行，如 Windows、Fuchsia 和 Raspberry Pi。

Flutter 使用 Dart 语言开发，而 Dart 为原生机器码和 JavaScript 均提供了生产级别的编译器，这为我们的平台扩展工作奠定了坚实的基础。接下来的挑战在于能否找到对应的 web 平台版工具，用于替代基于 Skia 的图形引擎和文本渲染器。

为了解决这个问题，我们首先需要做到以下 4 点:

以 60 帧/ 秒的速率实现快速流畅的交互动画性能
确保 web 版 Flutter 与其它平台版本的 Flutter 享有一致的行为和视觉体验
提供可与当前开发模式相集成的高效开发工具
在所有现代浏览器上实现对核心 web 特性的支持

尽管 web 版 Flutter 还有很长一段路要走，而且，上述四个方面也存在许多挑战等待我们去攻克。但是，预览版已准备就绪，欢迎大家积极尝试，并与我们分享您的反馈！

Flutter web 架构

Web 版 Flutter 的整体架构与移动平台版本的 Flutter 非常类似:

Flutter web 架构图

移动平台和 web 平台共用一个 Flutter 框架 (上图绿色部分)，该框架为 Flutter UI 基础层提供了多个高层抽象，其中包括动画、手势、基础 widget 类、以及大部分应用所需的 Material 主题 widget 集合。如果您之前已经接触过 Flutter 开发，相信您使用 Flutter web 的时候一定不会感到陌生。

真正巧妙地方在于，我们将这些概念迁移到了浏览器平台: 我们重新实现了 dart:ui 库，并利用基于 DOM 和 Canvas 的代码替换了移动平台上对 Skia 引擎的绑定。在您针对 web 平台重新编译 Flutter 代码时，应用、Flutter 框架以及 web 版 dart:ui 库内的 dart 代码全部都会被转换为 JavaScript，并在所有现代浏览器上顺利运行。

分别在 Chrome、Firefox 和 Safari 三个浏览器上运行 web 版 Flutter 的演示版本

我们仔细添加了对核心 web 特性的支持，例如无缝集成 Flutter 路由模型与浏览器历史。另外，我们也在努力让 Flutter 适应桌面环境，启用了鼠标滚动、悬停、聚焦等移动体验并不需要的特性。

努力让 Flutter 适应桌面环境

https://github.com/flutter/flutter/wiki/Desktop-shells

Flutter web 项目聚焦于框架所提供的核心价值，即丰富的交互体验。即便 web 内容以文档为主，亦可借助内嵌的 Flutter 视觉元素来改进用户体验。

预览版框架仅仅是现有 Flutter 框架的一个临时分支，它的主要目的是让我们的工程师可以快速实现 web 功能，与此同时，允许核心团队继续维护并改进生产可用的工具包。目前，我们正在向主开发库合并浏览器支持。我们计划提供一个 Flutter 工具包，通过单一框架全方位满足移动、web 和其他平台的开发需要。

后续工作包括: