Flutter for the web: where does it stand in mid-2019?

This post is a brief overview of what flutter-web does well and some of the things that can be a struggle or even a complete deal-breaker as it stands. If you are planning to create a new web application with flutter or migrating a native app to the web, this article is for you.

The Good:

1. Reusing Native Widgets

Simple Widgets which do not have dependencies on the Flutter SDK can be reused without making any changes whatsoever. For example:

AppBar(
  title: Text("Title"),
  actions: <Widget>[
    Icon(Icons.comment),
    Icon(Icons.settings),
  ],
  backgroundColor: Colors.deepOrangeAccent,
)

The above code works well for web as well as mobile platforms.

2. No CSS Required

This is a big one.
Flutter styles translate well to the web. All theme data can be maintained in one place, so making changes to the styles in one place reflects on all platforms.
If I needed to change the primary colour of my app, I make the change in my main theme file and I’m done.
If my Responsive app has different layouts for different screen sizes, we’re still good!

3. Flutter Animations Have Got You Covered

You don’t need to reproduce animations using javascript or CSS as flutter animations work well on the web. This sounds like a repetition of the second point, but user interactions have become an integral part of client side apps and sometimes these can be complicated enough that CSS doesn’t crack it. With flutter, if your animation works natively, it will work well on the web.

4. Injecting HTML Into Your Page

Flutter-web supports injecting HTML elements into the page, using the flutter_web_ui/ui.dart and dart:html packages. This provides granular control of the page and can be quite useful especially in dealing with native widgets which don’t translate well to the web.
Basically, if a certain feature is supported on the web, you don’t have to worry about it not being supported by flutter.

The Bad and the Ugly:

1. Inadequate Browser Support

Flutter for web uses the Shadow DOM API underneath and stable browser support for the API is currently at about 74%. [CanIuse Support Statistics]

2. No Support For Plugins

Flutter plugins are not supported on the web platform yet and this could be a brick wall if your project relies on some plugin for crucial functionality. If you need to deliver a feature quickly and run into an issue with plugins, you might have to first develop a plugin of sorts before you can start working on the actual feature. Good luck explaining that to the business-minded stakeholders.
So until the flutter-web repo is merged with the main flutter repo, expect to run into issues with certain features.

3. Breaking Changes Are Expected

As per the flutter documentation,

Design and implementation may change significantly, and changes may be introduced that break compatibility with existing code. As a result, the Flutter team do not recommend using code created with Flutter for web in production at this time.

Since there isn’t a stable release for flutter-web at the moment, the github repo recommends against using it in production apps. With subsequent releases, we might have to make wholesale changes to migrate to a future stable version.

4. Suboptimal Performance

Again, referring to the official docs,

Performance work is only just beginning. The code generated by Flutter for web may run slowly, or demonstrate significant UI “jank”.

When it comes to the web, 53% users navigate away from a page if it does not load within 3 seconds. With flutter-web still in a technical preview stage, performance optimisation isn’t currently a priority. Flutter web apps might be slow with significantly large load times.

5. Not All Native Code Can Be Reused On The Web

You might need to write separate implementations of certain elements in your UI.
Integrating videos for example, will require you to use the flutter_web_ui/ui.dart and dart:html packages to create a video element and render it as an HtmlView as shown below.

The flutter team has done an amazing job with this technical preview. Developing cross platform applications from a single codebase will be a real possibility as soon as the first stable version of flutter-web is released.

While flutter for the web is definitely something to continue looking into, it simply isn’t ready for production at the moment. Once flutter reaches a point where they start accepting PRs and merge the flutter-web repo into the main repo, it should be ready and definitely be considered for future projects.

P.S. I’m fairly new to flutter and this is based on my own experiences with flutter-web. Hope you found it useful and informative. If you find any mistakes or have suggestions, please reach out to me at ziyad@tengio.com.