使用 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 渲染器。

要临时禁用 VS Code 中的热重载支持，请使用 --no-web-experimental-hot-reload 标志更新您的 launch.json 文件。

"configurations": [
    ...
    {
      "name": "Flutter for web (hot reload disabled)",
      "type": "dart",
      "request": "launch",
      "program": "lib/main.dart",
      "args": [
        "-d",
        "chrome",
        "--no-web-experimental-hot-reload",
      ]
    }
  ]

如果您通过命令行使用 flutter run，则可以使用以下命令临时禁用 Web 上的热重载

flutter run -d chrome --no-web-experimental-hot-reload

DartPad 也通过新增的“Reload”（重载）按钮支持热重载。该功能仅在运行的应用中检测到 Flutter 时才可用。您可以通过选择 DartPad 提供的示例应用来开始热重载会话。

查看以下章节以构建您的应用。

运行以下命令以生成发布构建

$ flutter build web

您也可以传入 --wasm 标志以使用 WebAssembly 构建应用

$ flutter build web --wasm

这会在 build/web 目录中生成构建文件（包括 assets 目录），这些文件需要一起部署。

要了解有关如何将这些资源部署到 Web 的更多信息，请访问构建并发布 Web 应用。有关其他常见问题的解答，请访问 Web 常见问题解答。

使用 Flutter DevTools 执行以下任务

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

使用 Chrome DevTools 执行以下任务

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

使用 组件测试或集成测试。要了解有关在浏览器中运行集成测试的更多信息，请查看集成测试页面。