Flutter 的 Web 支持

Flutter 在 Web 上提供与移动端相同的体验。

借助 Dart 的可移植性、Web 平台的强大功能、Flutter 框架的灵活性以及 WebAssembly 的高性能，您可以使用同一代码库为 iOS、Android 和浏览器构建应用程序。对于您的应用而言，Web 只是另一个设备目标平台。

若要开始，请访问 使用 Flutter 构建 Web 应用。

Dart 和 Flutter 可以编译为 WebAssembly，这是一种二进制指令格式，支持在所有主流浏览器上运行快速的应用程序。

若要了解使用 WebAssembly 的优势，请查看以下视频。

在 YouTube 上新标签页中观看：“Flutter 的新功能 - WebAssembly”

为 Flutter 添加 Web 支持，不仅涉及将 Dart 编译为 JavaScript（而非用于移动应用的 ARM 机器码），还涉及在标准 Web API 之上实现 Flutter 的核心绘图层。通过结合使用 DOM、Canvas 和 WebAssembly，Flutter 能够在现代浏览器中提供可移植、高质量且高性能的用户体验。我们完全用 Dart 实现了核心绘图层，并利用 Dart 优化的 JavaScript 编译器将 Flutter 核心、框架以及您的应用程序编译成一个单一的、经过压缩的源文件，该文件可部署到任何 Web 服务器上。

虽然您可以在 Web 上做很多事情，但 Flutter 的 Web 支持在以下场景中最有价值：

单页应用程序 (SPA)

Flutter 的 Web 支持使复杂的独立 Web 应用（富含图形和交互内容）能够触达各种设备上的最终用户。

现有的移动应用程序

Flutter 的 Web 支持为现有的 Flutter 移动应用提供了一种基于浏览器的交付模型。

目前，并非所有 HTML 场景都最适合使用 Flutter。例如，诸如博客文章这类富文本、基于流式布局的静态内容，更适合采用以文档为中心（document-centric）的 Web 模型，而不是 Flutter 这类 UI 框架所提供的以应用为中心（app-centric）的服务。不过，您可以使用 Flutter 将交互式体验嵌入到这些网站中。

然而，如果您想使用 Dart 并希望实现传统的基于 DOM 的网站，社区发布的 Dart 包 Jaspr 支持静态网站；事实上，Dart 文档、Flutter 文档 以及 营销 网站都已经迁移到使用 Jaspr 包。请注意，Jaspr 使用的是 Dart（而非 Flutter），并且其 SEO 工作方式与传统网站相同。

以下资源可以帮助您入门：

• 要为现有应用添加 Web 支持，或创建包含 Web 支持的新应用，请访问 使用 Flutter 构建 Web 应用。
• 要在一个集中的文件中配置 Web 开发服务器设置，请查看 设置 Web 开发配置文件。
• 要了解 Flutter 的不同 Web 渲染器（CanvasKit 和 Skwasm），请查看 Web 渲染器。
• 要了解如何创建响应式 Flutter 应用，请查看 创建响应式应用。
• 要查看常见问题及解答，请访问 Web 常见问题解答 (FAQ)。
• 获取代码示例，请查看 Flutter Web 示例。
• 查看 Flutter Web 应用演示，请体验 Wonderous 应用。
• 要了解如何部署 Web 应用，请访问 准备 Web 发布版应用。
• 在 Flutter 主仓库 提交 Issue。
• 您可以在 Discord 的 #help 频道中交流并提问与 Web 相关的问题。