构建 Flutter Web 应用

本页面将通过几个步骤让你开启 Web 平台的支持：

• 配置 flutter 工具开启 Web 支持。

• 创建支持 Web 的新项目。

• 运行支持 Web 的新项目。

• 构建支持 Web 的新项目。

• 为现有项目添加 Web 支持。

要求

要创建支持 Web 平台的 Flutter 应用，你需要以下这些软件内容：

• Flutter SDK。查看 Flutter SDK 安装指导。

• Chrome：用于调试 Web 应用。

• 可选：用于 Flutter 开发的 IDE。你可以安装 Android Studio、IntelliJ IDEA 或者 Visual Studio Code，并且 安装 Flutter 和 Dart 插件 以启用语言支持、用于运行/调试/重构的开发工具，以及在 IDE 中重载你的 Web 应用。查看 编辑工具设定 了解更多。

更多内容请阅读 Web 平台常见问题。

创建支持 Web 的新项目

你可以依照以下步骤创建支持 Web 的新项目。

准备工作

运行以下命令以使用最新版本的 Flutter SDK：

$ flutter channel stable
$ flutter upgrade

如果 Chrome 已经安装，flutter devices 命令会输出一个 Chrome 设备，在运行应用时会使用它启动应用；以及一个将应用提供在指定 URL 的 Web Server。

$ flutter devices
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

在你的 IDE 中，你可以在设备下拉列表中看到 Chrome (web)。

创建并运行

创建支持 Web 的新项目的步骤与 开发体验初探 中创建其他平台应用的步骤相差无几。

编辑器 (IDE)

在 IDE 中创建新应用时，会自动包含 iOS、Android 和 Web 支持。（如果你启用了 桌面平台支持，也会一并支持。）在设备下拉列表里，选择 Chrome (web) 运行你的应用，它会在 Chrome 中启动。

命令行

运行以下命令创建支持 Web 平台的应用（包括移动端），你可以调整 myapp 为你的项目名称：

$ flutter create my_app
$ cd my_app

想要使用 Chrome 在 localhost 访问到你的应用，在应用的根目录执行以下命令：

$ flutter run -d chrome

flutter run 命令会在 Chrome 中使用 开发编译器。

构建

运行以下命令生成 release 版本的构建：

$ flutter build web

发布版本的构建会使用 dart2js （而不是 开发编译器）来生成单独的 main.dart.js 文件。你可以通过运行 release 模式 (flutter run --release) 或运行 flutter build web 来构建 release 模式的应用。它们会在 build/web 目录下生成构建的文件，包括需要一并提供的 assets 文件夹。

同时，你可以使用 --web-renderer html 或者 --web-renderer canvaskit 分别切换 HTML 或 CanvasKit 渲染器。想要了解更多信息，你可以阅读 Web 渲染器。

想要了解更多 Web 构建的内容，你可以阅读 构建和发布为 Web 应用。

为现有项目添加 Web 支持

要为现有的项目添加 Web 支持，请在项目的根目录下运行：

$ flutter create --platforms web .