使用 Flutter 构建网络应用
此页面介绍了使用网络支持入门所需执行的以下步骤
- 为网络支持配置
flutter工具。 - 创建支持网络的新项目。
- 运行支持网络的新项目。
- 构建支持网络的应用。
- 向现有项目添加网络支持。
要求
要创建支持网络的 Flutter 应用，您需要以下软件
- Flutter SDK。请参阅 Flutter SDK 安装说明。
- Chrome；调试网络应用需要 Chrome 浏览器。
- 可选：支持 Flutter 的 IDE。您可以安装 Visual Studio Code、Android Studio、IntelliJ IDEA。此外，安装 Flutter 和 Dart 插件，以启用语言支持以及用于在编辑器中重构、运行、调试和重新加载网络应用的工具。请参阅 设置编辑器 了解更多详情。
如需了解更多信息，请参阅 网络常见问题解答。
创建支持网络的新项目
您可以使用以下步骤创建支持网络的新项目。
设置
运行以下命令以使用最新版本的 Flutter SDK
$ flutter channel stable
$ flutter upgrade
如果已安装 Chrome，则 flutter devices 命令会输出 Chrome 设备，该设备会打开运行您应用的 Chrome 浏览器，以及提供提供应用服务的 URL 的 Web Server。
$ flutter devices
1 connected device:
Chrome (web) • chrome • web-javascript • Google Chrome 88.0.4324.150
在您的 IDE 中，您应该在设备下拉列表中看到 Chrome (web)。
创建并运行
创建支持网络的新项目与为其他平台创建新的 Flutter 项目没有区别。
IDE
在 IDE 中创建一个新应用，它会自动为你的应用创建 iOS、Android、桌面版和网络版。从设备下拉菜单中，选择Chrome（网络），然后运行你的应用，查看它在 Chrome 中启动。
命令行
要创建一个包含网络支持（除了移动支持之外）的新应用，请运行以下命令，用 my_app 替换你的项目名称
$ flutter create my_app
$ cd my_app
要在 Chrome 中从 localhost 提供你的应用，请从包的顶部输入以下内容
$ flutter run -d chrome
flutter run 命令使用 开发编译器在 Chrome 浏览器中启动应用程序。
构建
运行以下命令生成发布版本
$ flutter build web
如果你收到 not supported 错误，请运行以下命令
$ flutter config --enable-web
发布版本使用 dart2js（而不是 开发编译器）生成一个名为 main.dart.js 的 JavaScript 文件。你可以使用发布模式（flutter run --release）或使用 flutter build web 创建发布版本。这会使用构建文件填充 build/web 目录，包括一个 assets 目录，该目录需要一起提供。
你还可以包含 --web-renderer html 或 --web-renderer canvaskit，分别选择 HTML 或 CanvasKit 渲染器。有关更多信息，请参阅 网络渲染器。
要了解更多信息，请参阅 构建和发布网络应用。
向现有应用添加网络支持
要向使用以前版本的 Flutter 创建的现有项目添加网络支持，请从项目的顶级目录运行以下命令
$ flutter create --platforms web .
如果你收到 not supported 错误，请运行以下命令
$ flutter config --enable-web