Flutter Web is stable, yeah 😊

Flutter web support hits the stable milestone

Publish to web and mobile from the same codebase

A summary of Mariam Hasnany product manager @Google post found on https://medium.com/@mariam.hasnany

Flutter vision for Flutter is to be a portable UI framework for building beautiful app experiences on any platform. Today, as part of Flutter 2, they announced that Flutter’s web support has hit the stable milestone. And this stable release of Flutter for Web, will seriously impact the industry, the possibilities, and peculiarities of app development.

The first Flutter release in 2017 supported iOS and Android and has been used to bring over 150,000 apps to mobile app stores. Since the first release of Flutter, this framework gained leading positions among cross-platform mobile development technologies. The updated Flutter 2 is suitable for all platforms. Developers use one codebase to adjust apps to any operating system – from Android, iOS, and Windows to macOS or Linux Flutter is even suitable for smart TV and home appliances.

Now, adding web support means that those same apps can reach an even broader audience, as well as opening new ways to build interactive experiences on the web.

In this initial release of web support, Flutter focused on three app scenarios:

  • Progressive web apps (PWAs) that combine the web’s reach with the capabilities of a desktop app.
  • Single page apps (SPAs) that load once and transmit data to and from internet services.
  • Expanding existing Flutter mobile apps to the web, enabling shared code for both experiences.

Which Features in Flutter 2 are interesting?  The first one would be Flutter’s web support. Since Flutter beta release of web support a year ago, Flutter worked with a customers who have now shipped their Flutter web apps to production.

Over this period, they made major architectural improvements and added features that extend and optimize Flutter for the web, focusing on four areas: performance, web-specific features, desktop form factors, and plugins.

Flutter web support’s stable release features

The biggest area of improvement since early releases is performance.

To be able to handle render intensive graphics efficiently, Flutter experimented with CanvasKit, which enables rendering Skia paint commands in the browser using WebAssembly and WebGL. Flutter discovered that CanvasKit can deliver superior performance, fidelity, and correctness.

Each renderer offers advantages in different scenarios, so Flutter is supporting both rendering modes:

  • HTML renderer: Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.
  • CanvasKit renderer: This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.

A Flutter app running in the browser should feel like a web app. The web has many strengths, especially its global reach. One of the many reasons to bring existing Flutter app to the web is to reach users outside of app stores. To do that, support for custom URL strategies was added.

Another integral part of any app is text rendering.

Now, Flutter can do detailed measurements efficiently on the web, enabling things like painting highlight boxes accurately on selected text.

Flutter 2 is particularly suitable for implementing Progressive Web Apps, or PWAs. PWAs are a good fit for bridging the gap between mobile and web apps in a safe and trusted manner.

And to support all users, Flutter’s web semantic features are expanded to support accessibility for Windows, macOS, and ChromeOS. 

Finally, web support was added to some of the most-used plugins, making it possible to bring your existing Flutter apps to the web. Support for the following plugins was added:

  • image_picker
  • google_maps
  • firebase_analytics
  • firebase_storage
  • connectivity
  • cloud_firestore
  • cloud_functions
  • cross_file

A few years ago, it wouldn’t have been possible to deliver Flutter on the web with an acceptable level of quality and performance. However, the introduction of new web technologies and continued advances in the platform allowed us to harness much more of the potential of the underlying device.

With support for the web, Flutter encompasses every device on the internet with a consistent experience across all modern browsers and devices.

With the portability of Dart, the power of the web platform, and the flexibility of the Flutter framework, all  can now build apps for iOS, Android, and the browser from the same codebase.

It will be interesting to see what can be built with Flutter’s new web support!

Add a Comment

Your email address will not be published. Required fields are marked *