构建 Flutter Web 应用

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

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

  • 创建支持 Web 的新项目。

  • 运行支持 Web 的新项目。

  • 构建支持 Web 的新项目。

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

要求

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

更多内容请阅读 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 .