使用 Flutter 构建 Web 应用
本页面包含如下主题,帮助你开启 Flutter Web:
This page covers the following steps for getting started with web support:
-
配置
flutter
工具以支持 WebConfigure 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 .