Web 常见问题

目录

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

Is the web version of Flutter ready for production?

Flutter 网页端的支持正式在稳定版渠道发布,提供了以应用为中心的框架,框架以现代 Web 平台的功能为基础,如果希望了解更多,请查看文章 Flutter Web 支持现已进入稳定版

Flutter’s web support is now available on the stable channel, offering an app-centric framework that builds on the power of the modern web platform. Find out more details about Flutter’s production quality support for the web.

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

What scenarios are ideal for Flutter on the web?

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

Not every web page makes sense in Flutter, but we think Flutter is particularly suited for app-centric experiences:

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

    Progressive Web Apps

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

    Single Page Apps

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

    Existing Flutter mobile apps

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

At this time, Flutter is not suitable for static websites with text-rich flow-based content. For example, 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.

我应该如何提交 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.

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

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

请参见 使用 Flutter 构建 Web 应用

See building a web app with Flutter.

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

Does hot reload work with a web app?

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

No, but you can use hot restart. Hot restart is a fast way of seeing your changes without having to relaunch your web app and wait for it to compile and load. This works similarly to the hot reload feature for Flutter mobile development. The only difference is that hot reload remembers your state and hot restart doesn’t.

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

How do I restart 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.

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

Which web browsers are supported by Flutter?

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

Flutter web apps can run on the following browsers:

  • Chrome(移动和桌面端)

    Chrome (mobile & desktop)

  • Safari(移动和桌面端)

    Safari (mobile & desktop)

  • Edge(移动和桌面端)

    Edge (mobile & desktop)

  • Firefox(移动和桌面端)

    Firefox (mobile & desktop)

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

During development, Chrome (on macOS, Windows, and Linux) and Edge (on Windows) are supported as the default browsers for debugging your app.

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

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

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

You can select Chrome or Edge as the target device in Android Studio/IntelliJ and VS Code.

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

The device pulldown should now include the Chrome (web) option for all channels.

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

How do I build a responsive app for the web?

请参阅 创建响应式应用

See Creating responsive apps.

我能使用 Flutter 插件么?

Can I use Flutter plugins?

是的,目前有很多插件已经支持了 web。在 pub.dev 上使用 web 过滤以找到更新的插件清单。你也可以为已有的或者 你自己编写的 plugin 添加 web 支持。

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 应用中使用 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 do I handle web-specific imports?

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

Some plugins require platform-specific imports, particularly if they use the file system, which is not accessible from the browser. To use these plugins in your app, see the documentation for conditional imports on dart.dev.

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

How do I embed a Flutter 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>

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

If you encounter problems, please file an issue.

我该如何调试一个 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 widget tests or integration tests. To learn more about running integration tests in a browser, see the Integration testing page.

How do I internationalize a web app?

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

This isn’t any different than internationalizing a Flutter mobile app.

我该如何部署 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 channel on Discord. Flutter engineers routinely read and respond on Discord.