使用 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:

更多详细信息请参阅 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 支持：

$ flutter channel stable
$ flutter upgrade

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

If Chrome is installed, 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
1 connected device:

Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150

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

In your IDE, you should see Chrome (web) in the device pulldown.

创建和运行

Create and run

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

集成开发环境 (IDE) 配置

IDE

在 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 created using a previous version of Flutter, run the following command from your project’s directory:

$ flutter create .