Flutter 正式支持 Web 平台

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

In addition to mobile apps, Flutter supports the generation of web content 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, in addition to compiling Dart to JavaScript, instead of the ARM machine code that is used for mobile applications. Using a combination of DOM, Canvas, and CSS, Flutter can provide a portable, high-quality, and performant user experience across modern browsers. We implemented the 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.

虽然以传统方式开发 web 仍旧是一个不错的选择,但我们认为在 Flutter 中提供的 Web 支持在许多情况下都很有价值。例如:

While traditional web approaches remain a great choice, we envision the web support available in 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.

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.

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

Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich flow-based content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.

关于 web 支持的说明

Notes on web support

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

The following resources can help you get started: