使用 Flutter 构建 Web 应用

本页概述了如何使用 Flutter 配置、运行和构建 Web 应用。

在使用 Flutter 构建 Web 应用之前，请确保已安装 Flutter SDK 和 Web 浏览器。有关详细信息，请参阅设置 Flutter Web 开发说明。

要设置项目，你可以创建一个新的 Flutter 项目，或者为现有项目添加 Web 支持。

要创建包含 Web 支持的新应用，请运行以下命令

flutter create my_app

如果你已经有一个项目，请在项目目录中运行 flutter create 命令

flutter create . --platforms web

这会创建一个 web/ 目录，其中包含用于启动和运行 Flutter 应用的 Web 资产。

选择 Chrome 作为你应用的目标设备，以运行和调试 Flutter Web 应用

flutter run -d chrome

你也可以在你的 IDE 中选择 Chrome 作为目标设备。

如果你愿意，可以在 Windows 上使用 edge 设备类型，或者使用 web-server 在你选择的浏览器中导航到本地 URL。

你可以传入 --wasm 标志，使用 WebAssembly 运行你的应用

flutter run -d chrome --wasm

Flutter Web 提供了多种构建模式和渲染器。有关更多信息，请参阅Web 渲染器。

运行以下命令以生成发布版本

flutter build web

你也可以传入 --wasm 标志，使用 WebAssembly 构建你的应用

flutter build web --wasm

这会用构建好的文件填充 build/web 目录，其中包括一个 assets 目录，这些文件需要一起提供服务。

要了解如何将这些资产部署到 Web，请参阅构建和发布 Web 应用。有关其他常见问题的答案，请参阅Web 常见问题解答。

使用 Flutter DevTools 执行以下任务

• 调试
• 日志记录
• 运行 Flutter 检查器

使用 Chrome DevTools 执行以下任务

• 生成事件时间线
• 分析性能——确保使用性能分析构建

使用部件测试或集成测试。要了解如何在浏览器中运行集成测试，请参阅集成测试页面。