Web 常见问题

目录

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

Is the web version of Flutter ready for production?

Flutter 网页支持在测试版频道中提供。作为典型的测试版软件,我们仍在进行修改以提高性能和质量,与稳定的移动平台相比,您可能会发现渲染方面的 BUG。虽然网页支持还在测试阶段,但我们建议您在部署到生产环境之前在各种平台上仔细测试,定期跟踪 Flutter 更新并将其应用于已部署的站点。

Flutter web support is available on the beta channel. As is typical for beta software, we’re still making changes to improve performance and quality, and you may discover rendering bugs compared to the stable mobile platforms. While web support is in beta, we recommend careful testing on a variety of platforms before deploying to production, and that you track and apply Flutter updates to your deployed site on a regular basis.

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

What scenarios are ideal for Flutter on the web?

尽管传统的 Web 场景是非常有价值,但我们设想在如下场景中的 Web 支持也有很大价值:

While traditional web approaches remain a great choice, we envision the web support available in Flutter being valuable in many scenarios. For example:

  • 丰富的交互式单页应用

    Rich interactive single page applications

  • 渐进式网络应用 (PWA)

    Connected Progressive Web Applications (PWAs)

  • 在现有网站中嵌入动态/互动内容

    Embedding dynamic/interactive content in an existing website

目前,并不是每一个 HTML 场景在这个阶段都适合 Flutter。例如,博客文章等基于流媒体的丰富文本内容,其受益于网络构建的以文档为中心的模式,而不是像 Flutter 这样的 UI 框架可以提供的以应用为中心的服务。然而,你可以使用 Flutter 将交互式体验嵌入到这些网站中。

Not every HTML scenario is ideally suited for Flutter at this time. For example, text-rich flow-based content such as blog articles benefit from the document-centric model that the web is built around, rather than the app-centric services that a UI framework like Flutter can deliver. However, you can use Flutter to embed interactive experiences into these websites.

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

For more information on how you can use Flutter on the web, see Web support for Flutter.

点击查看 将使用 flutter_web package 升级使用到 Flutter SDK 以获得 Flutter Web 体验。

See Upgrading from package:flutter_web to the Flutter SDK.

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

How do I create an app that also runs on the web?

请参见 使用 Flutter 构建 Web 应用

See building a web app with Flutter.

Web 应用上能热重载吗?

Does hot reload work with a web app?

不能,但是可以使用热重启 (hot restart)。

No, but you can use hot restart.

Can I use Flutter plugins?

可以使用了,许多 plugin 已经支持 web。使用 web 过滤器在 pub.dev 上寻找 plugin 更新列表。你也可以向已有 plugin 添加 web 支持,或者编写你的 web plugin

Yes, several plugins have web support. Find an updated list of plugins on pub.dev using the web filter. You can also add web support to existing plugins or write your own plugins for the web.

我该如何提交关于 Web 支持的 issue?

How do I file an issue about web support?

你可以在 Flutter 主仓库中 提交一个 issue。确保标题中包含 “Web” 字样。

You can file an issue on the main Flutter repo. Make sure that “web” is included in the title.

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

How do I refresh the app running in the browser?

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

Using the browser’s refresh button doesn’t work, but you can enter “R” in the console where “flutter run -d chrome” is running.

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

Can I build, run, and deploy web apps in any of the IDEs?

Flutter 最新的 beta 频道已开启 web 支持,你可以在 Android Studio、IntelliJ 和 VS Code 中选择 Chrome 作为目标设备。要启用 web 支持,请在终端中执行以下命令:

You can select Chrome as the target device in Android Studio/IntelliJ and VS Code if you are using the latest beta channel of Flutter and have enabled web support. To enable support, run the following in the terminal:

flutter config --enable-web

你仅需要执行一次。

You need only run this once.

如果 IDE 已在运行,请重新启动它。设备列表菜单现在应该包含 Chrome(web) 选项了。

If the IDE is already running, restart it. The device pulldown should now include the Chrome (web) option.

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

How do I build a responsive app for the web?

请参阅创建响应式应用

See Creating responsive apps.

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

Can I use dart:io with a web app?

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

No. The file system is not accessible from the browser. For network functionality, use the http package. Note that security works somewhat differently because the browser (and not the app) controls the headers on an HTTP request.

如何在 Web 用户界面中显示前进和后退按钮?

How are forward and backward buttons presented in the web UI?

Web 应用支持浏览器的后退按钮。前进按钮尚未支持。有关更多信息,请参阅 Issue 32248

The browser’s back button is supported for web apps. The forward button is not yet enabled. For more information, see Issue 32248.

复制和粘贴功能状况如何?

How do copy/paste work?

在移动设备上复制和粘贴可以使用。如果你遇到了什么问题,请 提一个 issue

Copy/paste works on mobile. If you encounter problems, please file an issue.

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

How do I embed a web app in a web page?

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

You can embed a Flutter web app, as you would embed other content, in an iframe tag of an HTML file. In the following example, replace “URL” with the location of your hosted HTML page:

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

实现跨域资源共享

Implementing CORS

HTTP 请求适用于移动设备,但不适用于网络。 Web 应用程序有特殊的安全限制。如果你遇到问题,请检查正在访问的 Web 服务器是否设置了接受来自托管 Flutter 应用程序的域的请求的 CORS 标头。

HTTP requests work on mobile, but not on the web. Web applications have special security restrictions. If you experience problems, check that the web server you are accessing is setting CORS headers that accept requests from the domain hosting your Flutter app.

我该如何使用 CORS 避免 JS 锁定?

How do I avoid JS lockout with CORS?

尚未有明确的解决方案。

IDK

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

How do I debug a web app?

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

Use Flutter DevTools for the following tasks:

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

Use Chrome DevTools for the following tasks:

我该如何测试 Web 应用?

How do I test a web app?

跟常规的 widget tests 通用。

Use the normal widget tests.

自动化测试尚不支持。

Driver tests are not yet supported.

我该如何国际化 Web 应用?

How do I internationalize a web app?

暂未完成

TBD

我该如何部署 Web 应用?

How do I deploy a web app?

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

See Preparing a web app for release

Platform.is API 现在可用吗?

Does Platform.is work on the web?

目前还不行。

Not currently.

如何跟其他使用者交流?

How can I compare notes with others who are playing with this feature?

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

Check out the #web discussion board on Discord. Flutter engineers routinely read and respond on Discord.