使用 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 常见问题解答。

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 的设备信息。

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:

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

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

After enabling web support, restart your IDE. You should now see Chrome (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 的新应用，将 myapp 替换成自己工程的名字，运行下面的命令：

To create a new app for use with 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 命令将使用 Chrome 浏览器的 development compiler 来启动应用程序。

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

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 资源文件。因为 debug 构建可能包含数千个小文件，所以这里不支持 debug 构建。

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 支持

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 .

如果需要在 Chrome 中通过 localhost 打开，在 package 顶部输入下面的命令：

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

$ flutter run -d chrome