使用 Flutter 构建 Web 应用

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

  • Configure the flutter tool for web support.
  • Create a new project with web support.
  • Run a new project with web support.
  • Build an app with web support.
  • Add web support to an existing project.

要求

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

备忘

在 1.12 版本之后，Flutter 已经有了对 Web 应用的早期支持，如果在使用中发现问题，请 发一个 Issue 给我们，并确保标题上有「web」字样。

创建一个支持 web 的新项目

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

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

初始化

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

  1. $ flutter channel beta
  2. $ flutter upgrade
  3. $ flutter config --enable-web

备忘The flutter upgrade command silently failswhen origin points to a personal fork.To validate that origin points to https://github.com/flutter/flutter.git,run the following commands in the root directoryof your local copy of the https://github.com/flutter/flutter repository:

这里的 flutter upgrade 命令会在个人 fork 情况下失效，验证 origin 是否指向 “flutter/flutter” 仓库，可以通过下面命令：

  1. $ cd <inside local copy of the flutter/flutter repo>
  2. $ git remote get-url origin
  3. https://github.com/flutter/flutter.git

开启 Web 支持

使用如下命令来开启 Web 支持：

  1. $ flutter config --enable-web

这个命令只需要运行一次即可，它会创建一个 ~/.flutter_settings的配置文件：

  1. {
  2.   "enable-web": true
  3. }

一旦开启了 Web 支持，运行 flutter devices命令会输出一个名为 Chrome 的设备信息。

  1. $ flutter devices
  2. 2 connected device:
  4. Chrome     • chrome     • web-javascript • Google Chrome 78.0.3904.108
  5. Web Server • web-server • web-javascript • Flutter Tools

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

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

对已有的应用添加 Web 支持

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

  1. flutter create .

备忘You should only need to execute these configure steps once. You can alwayscheck the status of your configuration using the flutter config command.

Create and run

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

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

  1. $ flutter create myapp
  2. $ cd myapp

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

  1. flutter run -d chrome

备忘

如果没有其他连接的设备，那么 -d chrome 是可选的。

如果没有连接任何其他设备，-d chrome 可以省略。

Build

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

  1. flutter build web

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

向现有应用添加 Web 支持

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

  1. $ flutter create .

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

  1. $ flutter run -d chrome