Web 常见问题

在 Web 平台使用 Flutter 的场景有哪些?

Flutter 目前并非适用于所有的网页内容,不过我们主要关注三个应用场景:

  • 渐进式 web 应用 (Progressive web apps, PWA),兼具 web 的高覆盖面与桌面应用的强大功能。

  • 单页应用 (Single page apps, SPA),只需一次加载,并与互联网服务动态互传数据。

  • 将现有 Flutter 移动应用拓展到 web,在两个平台共享代码。

现在阶段,Flutter 不适合具有丰富文本和瀑布流的页面。例如,博客文章等基于流媒体的丰富文本内容,其受益于网络构建的以文档为中心的模式,而不是像 Flutter 这样的 UI 框架可以提供的以应用为中心的服务。然而,你可以使用 Flutter 将交互式体验嵌入到这些网站中。

有关如何在 Web 上使用 Flutter 的更多信息,参考文档: Flutter 的 Web 支持

Flutter Web 应用的 SEO 优化

一般情况下,Flutter Web 的目标是构建「动态化」网页应用。 Flutter 的 Web 端支持会优先考虑和确保性能、保真度和一致性。这意味着生成的网页页面可能不是搜索引擎「熟悉」的结构化页面。对于一些网页、文档内容,我们建议你使用 HTML 构建,就像我们为 FlutterDart 官网所做的那样。你还应该考虑将主要的类应用体验(使用 Flutter 构建的 Web 网页)与首页、营销内容以及帮助内容等(使用搜索引擎「熟悉」的 HTML 构建)进行分离,避免将它们混在一起。

如何创建同时在 Web 上运行的应用?

请参见 使用 Flutter 构建 Web 应用

我该如何在浏览器中刷新正在运行的应用?

不能,但是可以使用热重启 (hot restart)。热重启是可以你的应用快速响应改动的方法,无需等待重新编译的载入。它与移动端的热重载功能类似。唯一的区别是热重载可以保持应用的状态。

我该如何在浏览器中重启正在运行的应用?

使用浏览器的刷新按钮不会起作用,但你可以在执行 flutter run -d chrome 的控制台中输入「R」进行刷新。

现在有哪些浏览器支持 Flutter 了?

现在 Flutter web 应用可以运行在以下浏览器中:

  • Chrome(移动和桌面端)

  • Safari(移动和桌面端)

  • Edge(移动和桌面端)

  • Firefox(移动和桌面端)

在开发阶段,Chrome(在 macOS、Windows 以及 Linux)以及 Edge(在 Windows 上)将作为默认浏览器用于调试。

我可以在任意 IDE 中,构建、运行并发布 web 应用吗?

你可以在 Android Studio/IntelliJ 和 VS Code 里选择使用 Chrome 或者 Edge 浏览器。

设备下拉列表里现在应该在所有平台里都包含了 Chrome (web)。

我该如何构建响应式 web 应用?

请参阅 创建响应式应用

我能在 Web 应用中使用 dart:io 这个 package 吗?

不行。文件系统在浏览器中是无法访问的。对于网络功能来说,请使用 http package。请注意,安全方面的工作有所不同,因为浏览器(而不是应用程序)控制 HTTP 请求上的标头。

我应该如何处理一个 Web 平台特定的导入?

部分插件需要在特定平台导入库或者文件,尤其是当使用浏览器无法访问的文件系统时。若要在你的应用里使用这些插件,请参阅 dart.cn选择性的导入

Flutter Web 是否支持并发?

Dart 通过 isolates 机制实现并发,目前在 Web 中尚未支持。

Flutter Web 没有内置并发的支持,但你可以尝试通过 web workers 来解决这个问题。

我该如何把一个 Flutter web 应用嵌入到一个网页中?

你可以通过下面这个例子,以 iframe 来内嵌,把 URL 替换成托管 Flutter Web 的页面 URL:

<iframe src="URL"></iframe>

如果你遇到问题,请 提交一个 issue 给我们。

我该如何调试一个 web 应用?

使用 Flutter DevTools 来尝试如下工作:

使用 Chrome DevTools 来尝试如下工作:

我该如何测试 Web 应用?

使用常规的 widget tests,了解更多关于如何在浏览器里使用集成测试,请查看 集成测试 文档页面。

我该如何部署 Web 应用?

请参阅 打包并发布到 Web 平台

Platform.is API 现在可用吗?

目前还不行。