欢迎体验 Beta 版 Flutter web 支持

作者 / Mariam Hasnany, 产品经理, Flutter

我们很高兴宣布 Flutter web 支持已顺利迭代至 Beta 版本！

为什么我们要把 Flutter 带向 web 平台？

开发者经常需要构建可以在移动和 web 两个平台上运行的应用。我们想要帮助您设计和构建出自己想要的效果，将心中的奇思妙想变为现实，让您知道 Flutter 能够让您的应用在任何地方流畅运行！开发者们都希望学习一套可在多个平台上灵活使用的技术。Flutter web 支持允许您使用同一套代码，更快地发布功能，并且在不同设备上实现一致的用户体验。此外，强大的 web 端 Dart 编译器和便携性出众的 Flutter 框架可大大简化您的开发工作，让您使用 Flutter 轻松打造出精美的交互式 web 体验。

比预览版更出色

我们在今年的 I/O 大会上发布了 web 支持的技术预览版，并在 7 月推出了早期使用者计划，这段时间以来，我们一直在努力改进 web 支持，力求更好地满足来自 Google 内部团队和外部开发者的需求。

• 早期使用者计划
  

  https://medium.com/flutter/flutter-for-web-early-adopter-program-now-open-9f1fb146e4c4
  

  
  

Beta 版能为您带来什么？

随着 Flutter 1.12 的发布，Flutter web 支持也从技术预览版顺利迭代至 beta 版。当您在 beta 渠道内启用 web 支持后，新创建的 Flutter 项目不仅包含了 Android 和 iOS 应用，其中新增的 web / directory 还提供了丰富的工具，帮助您在浏览器中编译和运行同一个项目。

随着 Flutter web 支持逐渐稳定，它已经准备好迎接新的挑战，欢迎更具探索精神的开发者们前来开启更多的使用场景。目前，团队的开发工作已进入下一个阶段，我们将继续引入变更，并从无障碍支持、测试覆盖等多个方面进一步优化 web 支持。

探索使用场景

在 Flutter web 支持的开发过程中，我们尤为关注部分使用场景。我们认为这些场景特别能够体现 Flutter 的优势所在。我们相信现有的功能已足够帮助开发者构建丰富的交互式 web 体验。在与早期使用者合作的过程中，我们还针对下列使用场景验证与优化了 web 支持。

多平台互连的独立应用

Flutter 允许开发者使用同一套代码实现移动和 web 的跨平台体验。我们的一位早期使用者 Journey 就利用 Flutter 开发了一个多平台应用。

△ 社交应用 Journey 最近刚发布了一个使用 Flutter 开发的跨平台应用

Journey 的创始人 Luke O’Brien 给予了 Flutter 很高的评价: "我大概从 4 个月前开始开发 Journey，起初我只想做一个 Android 版本的最简可行产品。没想到后来竟然发现了 Flutter，当时我就觉得它特别棒，于是我就决定试着用一下。这绝对是我做过最正确的决定。Flutter 为我们缩短了至少一半的开发时间，现在我们已经发布了 Android、iOS 和 web 三个版本的应用，用户增长量多了整整一倍。从萌生想法到产品落地，Flutter 在这个过程中起到了十分关键的作用。"

• Journey
  https://startyourjourney.io/

内嵌式交互内容

第二个使用场景在网站中内嵌一个小程序。这类程序通常功能丰富且以数据为中心，但是它们并不需要提供导航服务或者其它应用级别的复杂功能，比如说，您可以为现有网站添加一个新的汽车配置器、填字游戏或者交互式的可视化数据，这些都是该场景下比较典型的用例。我们的另一位早期使用者 AEI Studio 就开发了一系列聊天机器人并在 web 版的聊天对话框中内嵌了 Flutter，从而实现了动画，键盘文本输入等多项交互功能。

△ Weatherbot 是 AEI Studio 旗下的一款聊天机器人，

它的网页版对话框就内嵌了 Flutter

• AEI Studio
  https://studio.aei.dev/showcase/

  
  

精简版 Lite 应用

尽管 Flutter 本身的移动端运行时 (mobile runtime) 现可提供更为流畅的体验，但有时候用户依旧会觉得安装步骤太繁琐，因而放弃尝试新应用。如果为现有的 Flutter 应用配备一个轻量级 web 体验，岂不两全其美？大部分用户依旧集中在移动版上，精简版 web 应用则通过相同的工具、框架、UI 组件和业务逻辑提供相关功能，只不过会在丰富程度上进行适当缩减。

辅助应用

辅助应用是指用 Flutter 构建的，且为主要的移动版应用提供支持的 web 体验。比如说，您可以使用 Flutter 构建一个 web 应用，管理员或内部用户可以通过这个应用为现有的 Flutter 移动版应用进行内容创作或后台管理。尽管此类 web 应用相对较为独立，但它依旧可以复用移动应用的大量代码。

找到适合您的插件！

插件是 Flutter 一个比较独特的优势，开发者可以通过插件访问运行平台的原生库。当您在 web 平台上运行 Flutter 应用时，您可以调用现有 JS 库中的所有内容。我们在后台完成了所有 JS 互操作代码，确保这些插件在移动和 web 平台上均能正常工作。我们已成功实现了请求最多的几个插件，让它们能够在 web 应用和原生应用中提供一致的使用体验。从现在开始，您也可以像 Ben Hagan 和 Hadrien Lejard 一样 编写自己的插件 ，他们曾分别为 video_player 和 sentry 包开发过插件。下列几个包均有更新:

• shared_preferences
  https://pub.dev/packages/shared_preferences
• firebase_core
  https://pub.dev/packages/firebase_core
• firebase_auth
  https://pub.dev/packages/firebase_auth
• google_sign_in
  https://pub.dev/packages/google_sign_in
• url_launcher
  https://pub.dev/packages/url_launcher
• video_player
  https://pub.dev/packages/video_player
• sentry
  https://pub.dev/packages/sentry

此外，我们还为 pub.dev 包库添加了新平台的标签管理和过滤功能。

首先，我们在每个包的详情页面中列明了它所支持的平台，让开发者可以更轻松地判别这个包是否提供 web 支持。

△ pub.dev 包的详情页面显示了关于 SDK 和平台兼容性的标签

搜索 UI 也新增了若干过滤器，方便开发者找到提供 web 支持的包。我们基于新的 平台清单标签 开发了该功能，您可通过 Flutter 1.12 获取这些标签。

△ pub.dev 的搜索 UI 添加了对 SDK 和平台的过滤器支持

• Ben Hagan
  https://github.com/cbenhagen
• Hadrien Lejard
  https://github.com/lejard-h
• 编写自己的插件
  https://medium.com/flutter/how-to-write-a-flutter-web-plugin-5e26c689ea1
• 平台清单标签
  https://flutter.dev/docs/development/packages-and-plugins/developing-packages#plugin-platforms

向稳定版迈进

我们在 Beta 版中取得了一定的进展，但仍有许多工作亟待完成。除了进一步提高 web 支持的性能表现之外，我们也在积极推进无障碍体验、浏览器兼容性等方面的工作。

无障碍

Flutter 通过 Android TalkBack 和 iOS VoiceOver 为移动浏览器提供无障碍支持。目前，我们已经为多个平台的辅助技术实现了多项特性，其中包括: UI 遍历、遍历顺序以及丰富的 UI 交互提示，例如可点击区域、标签、可编辑区域、渐增操作、图片、活动区域和可检查项目。此外，我们还在研究如何为桌面端浏览器添加读屏支持。

浏览器支持

Flutter 的支持范围已从一开始的移动平台扩展至桌面平台，使得桌面应用的 UX 设计风格也可通过 Flutter 框架实现。Flutter 将继续优化对桌面浏览器的支持，并为用户提供更加流畅的无缝体验。接下来，我们计划为 Chrome、Edge、Firefox 和 Safari 四款浏览器 (移动版和桌面版) 提供支持和测试。

测试覆盖

从技术预览版开始，我们就一直在扩大框架和 Flutter web 引擎的测试覆盖范围。Chrome 目前已支持运行自动测试，Safari 仍需手动进行测试。我们还有许多测试工作需要完成，未经测试的场景可能会出现回归错误。

体验、贡献与分享

欢迎各位开发者立即上手体验 Flutter web 支持！请前往 flutter.dev/web 开启您的 web 之旅，尽情探索示例、文档等精彩内容。如果您之前已经使用过 web 支持，不妨尝试一下我们的 beta 渠道 。

Flutter 插件的数量已突破 1,800 个，但是其中大部分仅提供 iOS 或 Android 支持。如果您想为 web 支持贡献自己的一份力量，帮助我们缩小 web 与移动平台之间的距离，欢迎您为现有插件添加 web 支持或开发新的插件。请阅读 《Flutter web 插件开发指南》 进一步了解技术细节与开发方法。

• beta 渠道

  https://github.com/flutter/flutter/wiki/Flutter-build-release-channels

• 《Flutter web 插件开发指南》

  https://medium.com/flutter/how-to-write-a-flutter-web-plugin-5e26c689ea1

结语

我们已通过 beta 渠道开放了最新的 Flutter web 支持，与此同时，我们离最终稳定版的发布也越来越近，希望您能喜欢这个 beta 版本，同时感受到我们对 Flutter 的热情与付出。

欢迎大家向我们提交反馈并参与 #Flutter 话题讨论，与我们分享您在 Flutter 方面的项目进展。期待您通过 Flutter 打造出精美的交互式 web 体验！

• 提交反馈
  https://flutter.dev/community

Flutter 开发者社区中文资源: https://flutter.cn

 点击屏末 | 阅读原文 | 即刻开启 Flutter 跨平台开发之旅

  想了解更多 Flutter 内容？

• 在公众号首页发送关键词 "Flutter"，获取相关历史技术文章；
  

• 还有更多疑惑？欢迎点击菜单 "联系我们" 反馈您在开发过程中遇到的问题。

推荐阅读

---