Is the web version of Flutter ready for production?

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.

What scenarios are ideal for Flutter on the web?

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

  • Progressive Web Apps
  • Single Page Apps
  • Existing Flutter mobile apps

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.

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

Search Engine Optimization (SEO)

In general, Flutter is geared towards dynamic application experiences. Flutter’s web support is no exception. Flutter web prioritizes performance, fidelity, and consistency. This means application output does not align with what search engines need to properly index. For web content that is static or document-like, we recommend using HTML—just like we do on flutter.dev, dart.dev, and pub.dev. You should also consider separating your primary application experience—created in Flutter—from your landing page, marketing content, and help content—created using search-engine optimized HTML.

How do I file an issue about web support?

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

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

See building a web app with Flutter.

Does hot reload work with a web app?

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?

You can either use the browser’s refresh button, or you can enter “R” in the console where “flutter run -d chrome” is running.

Which web browsers are supported by Flutter?

Flutter web apps can run on the following browsers:

  • Chrome (mobile & desktop)
  • Safari (mobile & desktop)
  • Edge (mobile & desktop)
  • Firefox (mobile & desktop)

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

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

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

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

How do I build a responsive app for the web?

See Creating responsive apps.

Can I use Flutter plugins?

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.

Can I use dart:io with a web app?

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.

How do I handle web-specific imports?

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.

Does Flutter web support concurrency?

Dart’s concurrency support via isolates is not currently supported in Flutter web.

Flutter web apps can potentially work around this by using web workers, although no such support is built in.

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

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>

If you encounter problems, please file an issue.

How do I debug a web app?

Use Flutter DevTools for the following tasks:

Use Chrome DevTools for the following tasks:

How do I test a web app?

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?

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

How do I deploy a web app?

See Preparing a web app for release.

Does Platform.is work on the web?

Not currently.

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

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