Flutter for Web Now Supports PWA, Plug-Ins, More

Google announced today that it is enhancing Flutter’s beta support for creating web apps by adding several important new features.

“Our vision for Flutter is to provide a portable toolkit for building beautiful experiences wherever you might want to paint pixels on the screen,” Google’s Mariam Hasnany writes. “Given the pervasiveness of the web, it’s a natural place to experiment with Flutter, but its characteristics are different from a mobile platform like Android and iOS … If we are successful at our goals, Flutter’s web support will provide a framework that fully takes advantage of all that the web platform offers, allowing developers to build beautiful rich interactive applications that feel completely at home in a browser.”

Here’s what’s new in Flutter for web.

PWA support. The default Flutter template for web apps now includes support for the core features needed for an installable, offline-capable PWA app. (Anyone whose looked at Flutter is no doubt familiar with the stock “counter” template.) Flutter-based PWAs can be installed in the same way as any other web-based PWA, Google says, and they are supported on most major mobile and desktop browsers.

Plugins. When Flutter for web launched beta, it only supported a few plugins. But thanks to the community, there are now many more plugins supported, including audioplayers, connectivity, cloud_firestore, cloud_functions, and more. Google says that it intends to extend this support to a few more popular Google-authored plugins for the web and will continue to depend on the community for others.

Web debugging with expression evaluation. Visual Studio Code provides a full set of debugging capabilities, including evaluating expressions in the debug window, using the watch functionality or hovering over variables to see their value, Google notes. But until recently, this capability was only available for debugging Flutter mobile apps. But now Google has enabled experimental support for web apps too. Support for other IDEs is still in progress, it says.

Testing. The latest Flutter builds support running automated Flutter driver UI tests against Flutter web apps just as was possible previously for mobile apps.

Desktop-class user experiences. Bringing Flutter to desktop web browsers requires more than web support, Google says, as there are often significant UI differences between mobile and desktop experiences. So it is adding features to support desktop-class experiences, like responsive widgets and scrolling physics, which need to be implemented.

URL Routing. Flutter web apps include a hash marker for routing even on the home page today. But Google says it is working to eradicate this and provide more control over URL routing, with contributions from the community now under review.

Code size. Google says it is looking into ways to cache some logic to reduce startup time and download size.

“We’ve made a lot of progress since the December update,” Hasnany says. “However, you should be aware that Flutter’s web support is still in beta, and you should be cautious about deploying it into production environments since performance and browser compatibility work is still in progress.”

You can learn more about Flutter for web apps from the Flutter website.