在 Web 平台使用 Flutter

Web 支持是 Flutter 的代码兼容实现,使用基于标准的 Web 技术呈现:HTML,CSS和JavaScript。通过 Web 支持,你可以将使用 Dart 编写的现有 Flutter 代码编译为可以嵌入浏览器,并部署到任何 Web 服务器上,具有客户端体验的 Web 应用。你可以使用 Flutter 的所有功能,而不需要任何浏览器插件。

Web support is a code-compatible implementation of Flutter that is rendered using standards-based web technologies: HTML, CSS and JavaScript. With web support, you can compile existing Flutter code written in Dart into a client experience that can be embedded in the browser and deployed to any web server. You can use all the features of Flutter, and you don’t need a browser plug-in.

showing Flutter architecture for C++ vs Flutter for web

向 Flutter 添加 Web 支持涉及在标准浏览器 API 之上实现Flutter 的核心绘图层。通过结合使用DOM、Canvas 和 CSS,Web 支持旨在为现代浏览器提供便携、高质量和高性能的用户体验。我们在 Dart 中完全实现了这个核心绘图层,并使用 Dart 的优化过的 JavaScript 编译器将 Flutter 核心与框架,同你的应用程序一起编译成一个可以部署到任何 Web 服务器的简化源文件。

Adding web support to Flutter involved implementing Flutter’s core drawing layer on top of standard browser APIs. Using a combination of DOM, Canvas, and CSS, web support aims to provide a portable, high-quality, and performant user experience across modern browsers. We implemented this core drawing layer completely in Dart and used Dart’s optimized JavaScript compiler to compile the Flutter core and framework along with your application into a single, minified source file that can be deployed to any web server.

在开发的早期阶段,我们设想 Flutter 的 Web 版本在许多场景中都很有应用价值。比方说:

In this early stage of development, we envision the web version of Flutter being valuable in many scenarios. For example:

使用 Flutter 构建的 [渐进式 Web 应用程序][]
对 Flutter 的 Web 支持使现有的基于移动设备的 Flutter 应用可以打包为 PWA,以覆盖更广泛的设备,或为现有应用提供配套的 Web 体验。

A connected Progressive Web Application built with Flutter
Web support for Flutter enables existing mobile-based applications to be packaged as a PWA for reach to a broader variety of devices, or to provide a companion web experience to an existing app.

嵌入式交互内容
Flutter 为创建丰富的,以数据为中心的组件提供了一个强大的环境,可以轻松地在现有网页中托管。无论是数据可视化,或是如汽车配置器这样的在线工具,又或是嵌入式图表,Flutter 都可以为嵌入式 Web 内容提供高效的开发途径。

Embedded interactive content
Flutter provides a powerful environment for creating rich, data-centric components that can be easily hosted within an existing web page. Whether for data visualization, an online tool like a car configurator, or an embedded chart, Flutter can provide a productive development approach for embedded web content.

在 Flutter 移动应用中嵌入动态内容
在现有移动应用程序内提供动态内容更新的既定方法是使用 Web 视图控件,其可以动态地加载和显示信息。Flutter 支持现在提供统一的 Web 和移动内容环境,使您可以在线部署内容或嵌入应用程序中,而无需重写。

Embedding dynamic content in a Flutter mobile app
An established way to provide dynamic content updates within an existing mobile application is the use of a web view control, which can load and display information dynamically. The support Flutter now offers for a unified environment for web and mobile content enables you to deploy content online or embedded in an app without rewriting.

关于 1.9 版本中的 Web 支持的说明

Notes on web support in 1.9

此预览版的 Web 支持是你开始试用它绝佳时机。在你开始之前,有一些注意事项:

This preview version of web support is your opportunity to try it out. Before you get started, here are a few notes:

  • 此版本缺少一些功能,并存在已知性能问题,因此我们不建议将其用于生产环境。

    This release is missing features and has known performance issues, so we don’t recommend it for production.

  • 你可以更新现有的 Flutter 代码以在 Web 上运行,但会有一些警告,因为 Web 支持还未达到 beta 测试状态。有关更多信息,请参阅 Web 常见问题

    You can update existing Flutter code to work on the web, but there are some caveats as web support hasn’t yet reached beta. For more information, see the web FAQ.

以下资源可以帮助你入门:

The following resources can help you get started: