要求

创建支持 Web 的新项目

准备工作

创建并运行

编辑器 (IDE)

命令行

构建

为现有项目添加 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 的新项目。

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

请注意

运行 flutter channel stable 会替换你正在使用的 Flutter 版本为稳定版本，如果你的网络状况不好，可能会花费较多的时间。运行完成后，再运行 flutter upgrade 会升级到最新的 stable 版本。如果你需要切换回其他渠道的 Flutter 版本（beta 或 master），你需要运行 flutter channel 。

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

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

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

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

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

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

提示

如果你没有连接任何设备，那么 -d chrome 参数是可选的。

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

请注意

Web 浏览器不支持热重载。 目前为止，Flutter 仅支持在 Web 浏览器中 热重启，不支持 热重载。

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

发布版本的构建会使用 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 支持，请在项目的根目录下运行：