使用 Flutter 构建 Web 应用

本页面包含如下主题，帮助你开启 Flutter Web：

This page covers the following steps for getting started with web support:

• 配置 flutter 工具以支持 Web

  Configure the flutter tool for web support.

• 创建一个支持 web 的新项目

  Create a new project with web support.

• 在新工程中开启 Flutter Web

  Run a new project with web support.

• 创建一个支持 Web 运行的新应用

  Build an app with web support.

• 对已有的应用添加 Web 支持

  Add web support to an existing project.

前置条件

Requirements

如果希望创建一个支持 Web 的 Flutter 应用，你需要先安装好下面的应用：

To create a Flutter app with web support, you need the following software:

• Flutter SDK，请查阅 这个链接 找到安装教程。

  Flutter SDK. See the Flutter SDK installation instructions.

• 谷歌浏览器，在调试 Web 应用时需要谷歌浏览器。

  Chrome; debugging a web app requires the Chrome browser.

• 可选：支持 Flutter 的集成开发环境 (IDE)，你可以选择使用 Android Studio、IntelliJ IDEA 或者 Visual Studio Code，并安装 Flutter 和 Dart 插件的 IDE 插件 以获取编程语言支持和在 IDE 里进行编译、调试、运行、重新加载等功能。了解更多详细信息，请查看文档：编辑器设定。

  Optional: An IDE that supports Flutter. You can install Android Studio, IntelliJ IDEA, or Visual Studio Code and install the Flutter and Dart plugins to enable language support and tools for refactoring, running, debugging, and reloading your web app within an editor. See setting up an editor for more details.

更多详细信息请参阅 web 常见问题解答。

For more information, see the web FAQ.

创建一个支持 web 的新项目

Create a new project with web support

当前，你需要 master 或者 dev 渠道的的 Flutter SDK 来获取 Web 支持：这里我们假定你已经安装了 Flutter 命令行工具，运行下面的命令需要安装 master 渠道最新的 SDK 噢：

你可以通过以下步骤创建一个支持 web 的新项目。

You can use the following steps to create a new project with web support.

初始化

Set up

运行以下命令，使用最新的 beta 频道的 Flutter SDK，并开启 web 支持：

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

一旦开启了 Web 支持，运行 flutter devices，命令会输出一个名为 Chrome 的设备信息，开启一个为 Web 应用提供服务的 Web Sever，并打开 Chrome 浏览器并访问某个 URL 地址。

Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

$ flutter devices
2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome     • chrome     • web-javascript • Google Chrome 81.0.4044.129

在开启了 Web 支持后，需要重启 IDE。你现在可以在设备下拉列表中看到 Chrome (web) 和 Web Server (web)。

After enabling web support, restart your IDE. You should now see Chrome (web) and Web Server (web) in the device pulldown.

运行 flutter run 命令将使用 Chrome 浏览器的 development compiler 来启动应用程序。当前连接的 Web 设备是 chrome，要在这个设备运行的话，无需特别声明使用它（当没有其他设备的时候）。

The flutter run command launches the application using the development compiler in a Chrome browser. The name of the web device is currently chrome, but this doesn’t need to be specified if there are no other devices attached.

对已有的应用添加 Web 支持

Add web support to an existing app

对一个已有的工程添加 Web 支持，需要在工程根目录下输入下面的命令：

To add web support to an existing project, run the following command in a terminal from the top of the project package:

flutter create .

创建和运行

Create and run

创建一个支持 Web 的 Flutter 工程与在支持其他平台的过程没有区别，请查看文档 创建一个 Flutter 工程。

Creating a new project with web support is no different than creating a new Flutter project for other platforms.

当你配置好对 Web 的支持后，你可以通过 IDE 或者命令行创建和运行一个 Web 应用。

Once you’ve configured your environment for web support, you can create and run a web app either in the IDE or from the command line.

集成开发环境 (IDE) 配置

IDE

在你配置好支持 Web 应用的环境后，如果 IDE 已经在运行了，请重启一下它。

After you’ve configured your environment to support the web, make sure you restart the IDE if it was already running.

在 IDE 里创建一个新的应用，它将会自动创建应用的对应的 iOS、Android 和 Web 版本。（如果启用了 桌面版应用支持，它还会创建 macOS 应用的版本）。在设备下拉菜单中，选择 Chrome (web)，然后点击运行，你的应用就会在 Chrome 中打开。

Create a new app in your IDE and it automatically creates iOS, Android, and web versions of your app. (And macOS, too, if you’ve enabled desktop support.) From the device pulldown, select Chrome (web) and run your app to see it launch in Chrome.

命令行

Command line

为了创建一个既支持移动端又支持 Web 的新应用，将 myapp 替换成自己工程的名字，运行下面的命令：

To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

$ flutter create myapp
$ cd myapp

要在 Chrome 的 localhost 中部署你的应用，从软件包根目录输入以下内容：

To serve your app from localhost in Chrome, enter the following from the top of the package:

flutter run -d chrome

运行 flutter run 命令将使用 Dart 的 开发编译器 dartdevc 在 Chrome 浏览器中启动应用程序。

The flutter run command launches the application using the development compiler in a Chrome browser.

使用 build 命令

Build

运行下面命令以生成发行版构建：

Run the following command to generate a release build:

flutter build web

Release 构建产物使用 dart2js（不是 dartdevc）生成了一个单独的 JavaScript main.dart.js 文件。你可以通过 release 模式 (flutter run --release) 或者 flutter build web 创建一个发行构建。输出文件在 build/web 目录下，包括需要一起提供的 assets 资源文件。

A release build uses dart2js (instead of the development compiler) to produce a single JavaScript file main.dart.js. You can create a release build using release mode (flutter run --release) or by using flutter build web. This populates a build/web directory with built files, including an assets directory, which need to be served together.

你也可以使用 --web-renderer html 或 --web-renderer canvaskit 来切换 HTML 或 CanvasKit 渲染器。更多信息请参阅网页渲染器。

You can also include --web-renderer html or --web-renderer canvaskit to select between the HTML or CanvasKit renderers, respectively. For more information, see Web renderers.

了解更多相关信息，请查阅文档： 打包并发布 Web 应用。

For more information, see Build and release a web app.

向现有应用添加 Web 支持

Add web support to an existing app

为了向现有应用添加 Web 支持，请在项目根目录下，在终端运行以下命令：

To add web support to an existing project, run the following command in a terminal from the root project directory:

$ flutter create .