Flutter on the Web

Flutter on the Web

Web 本身是一个灵活的平台，但 Flutter 非常适合构建 PWA 或 SPA 等 Web 应用程序并将您现有的移动应用程序带到 Web 上。

使用 Flutter 构建 Web 应用程序

1. 开始使用
2. 使用 Flutter 构建 Web 应用程序

本页介绍了开始使用 Web 支持的以下步骤：

• flutter为 Web 支持配置工具。
• 使用 Web 支持创建一个新项目。
• 使用 Web 支持运行一个新项目。
• 构建具有 Web 支持的应用程序。
• 为现有项目添加 Web 支持。

要求

要创建具有 Web 支持的 Flutter 应用程序，您需要以下软件：

• Flutter SDK。请参阅 Flutter SDK安装说明。
• 铬; 调试网络应用程序需要 Chrome 浏览器。
• 可选：支持 Flutter 的 IDE。您可以安装Android Studio、IntelliJ IDEA或Visual Studio Code并 安装 Flutter 和 Dart 插件 以启用语言支持和工具，以便在编辑器中重构、运行、调试和重新加载 Web 应用程序。有关更多详细信息，请参阅设置编辑器 。

有关详细信息，请参阅网络常见问题解答。

使用 Web 支持创建一个新项目

您可以使用以下步骤创建具有 Web 支持的新项目。

设置

运行以下命令以使用最新版本的 Flutter SDK：

内容复制

 flutter channel stable
$ flutter upgrade

 警告： 运行flutter channel stable会将您当前版本的 Flutter 替换为稳定版本，如果您的连接速度很慢，可能需要一些时间。在此之后，运行flutter upgrade会将您的安装升级到最新的 stable. 返回另一个频道（beta 或 master）需要 flutter channel <channel>显式调用。

如果安装了 Chrome，该flutter devices命令会输出一个Chrome在您的应用程序运行时打开 Chrome 浏览器的设备，以及一个Web Server提供应用程序的 URL 的设备。

内容复制

 flutter devices
1 connected device:

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

在您的 IDE 中，您应该会在设备下拉菜单中看到Chrome (web)。

创建并运行

创建一个具有 Web 支持的新项目与为其他平台创建一个新的 Flutter 项目没有什么不同。

这里

在您的 IDE 中创建一个新应用程序，它会自动创建应用程序的 iOS、Android 和 Web 版本。（还有 macOS，如果您启用了桌面支持。）从设备下拉菜单中，选择Chrome (web) 并运行您的应用程序以查看它在 Chrome 中启动。

命令行

要创建一个包含 Web 支持（除了移动支持）的新应用程序，请运行以下命令，替换myapp为您的项目名称：

内容复制

 flutter create myapp
 cd myapp

提示

lutter create myapp
Creating project myapp...
Running "flutter pub get" in myapp...                               4.4s
Wrote 96 files.

All done!
In order to run your application, type:

  $ cd myapp
  $ flutter run

要localhost在 Chrome 中提供您的应用程序，请在包顶部输入以下内容：

内容复制

flutter run -d chrome

 注意： 如果没有任何其他连接的设备，-d chrome则为可选。

该命令使用Chrome 浏览器中的开发编译器flutter run启动应用程序 。

 警告： 网页浏览器不支持热重载 目前，Flutter 支持热重启，但网页浏览器不支持热重载。

建造

运行以下命令以生成发布版本：

内容复制

flutter build web

发布版本使用dart2js （而不是开发编译器）来生成单个 JavaScript 文件main.dart.js。您可以使用发布模式 ( flutter run --release) 或使用flutter build web. build/web这将使用构建文件填充目录，包括assets需要一起提供的目录。

您还可以分别包含--web-renderer html 或--web-renderer canvaskit在 HTML 或 CanvasKit 渲染器之间进行选择。有关详细信息，请参阅Web 渲染器。

有关详细信息，请参阅 构建和发布 Web 应用程序。

向现有应用程序添加 Web 支持

要为使用以前版本的 Flutter 创建的现有项目添加 Web 支持，请从项目目录运行以下命令：

默认的例子启动后是这种样子的

flutter build web 后就会出现build/web目录。目录结构是