Web 常见问题

Web 版本的 Flutter 是否已经准备好投入生产环境中了呢?

Flutter 网页端的支持正式在稳定版渠道发布,提供了以应用为中心的框架,框架以现代 Web 平台的功能为基础,如果希望了解更多,请查看文章 Flutter 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 支持相关的 issue

你可以在 Flutter 主仓库中 发起一个 issue。请确保标题中包含了 “web” 关键字。

如何创建同时在 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 应用?

请参阅 创建响应式应用

我能使用 Flutter 插件么?

是的,目前有很多插件已经支持了 web。在 pub.dev 上使用 web 过滤以找到更新的插件清单。你也可以为已有的或者 你自己编写的 plugin 添加 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,了解更多关于如何在浏览器里使用集成测试,请查看 集成测试 文档页面。

How do I internationalize a web app?

Flutter 移动应用的国际化 无差别。

我该如何部署 Web 应用?

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

Platform.is API 现在可用吗?

目前还不行。

如何跟其他使用者交流?

请在 Discord 平台的 #web 这个讨论板跟大家讨论, Flutter 团队的工程师会经常阅读和互动。