What Flutter 2 Means for Web

10th February, 2021

Published by Hamish Kerry

Since it’s launch in 2017, flutter has seen a heroic uptake interest. Currently used by an increasing list of big brands for their online experiences including Realtor.com, Tencent, Square and the New York Times, Google’s Flutter framework has become a household name in the world of high-end mobile applications. It’s the iOS and Android development framework of choice for Arch, we’ve been advocates of the rich quality of mobile experience it brings users for some years now. However, a proportionally recent development in the world of Flutter is its use case for the development of web apps (essentially most websites with functionality and interactive elements, check out our blog on progressive web apps here: Progressive Web Apps: Are they right for you?)

Flutter web support's architecture diagram

Courtesy of Google

On the 3rd of March, Google announced Flutter’s web support had hit the stable milestone, bringing it out of beta and into a completely stable channel, allowing for it to be applied to:

  • Progressive web apps (PWAs) 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.

So where is Flutter 2 for Web at the moment, and how does it rack up against traditional web frameworks?

Since the release of Flutters web beta in 2020, Flutter’s development team at Google have been focusing heavily on improving performance, paying particular attention to its effectiveness when compared to other rendering technologies currently available for Web.

Google started with an HMTL, DOM-based model in which flutters web engine translated each Flutter scene into HTML, CSS, or Canvas, and rendered this onto a webpage as part of a tree of HTML elements. However, upon performance evaluation with a specific interest in render intensive programmes, and as part of Flutter 2, Google has switched to a focus on using CanvasKit. The use of CanvasKit improves the level of graphical horsepower at the fingertips of users and provides a workspace for Flutter to be used to create graphics intense websites and web apps.

The web has many strengths, especially its global reach. One of the many reasons to bring your existing Flutter app to the web is to reach users outside of app stores. To do that, Google added support for custom URL strategies, to ensure that it’s possible for users to reach your app anywhere with just a click of a URL. With this feature, developers have control over the URLs shown in the address bar as well as the routing of their app on the web. Naturally, Flutter 2 lends itself to PWAs and their ability to bridge the gap between web and app users and provide an in-depth, interactive experience.

Property management solution for Zurich Insurance, built by Spica Technologies, is a great example of the business apps Flutter's web support can enable on desktop browsers.

Flutter for web being used in this desk space booking system for the commercial property management wing of Zurch Insurance

So where will Google be taking Flutter in the future, and how will it further shape the web? It’s a question very much up for discussion. Flutter developers are largely a vocal community, and Google does well to key into this, putting those on the ground at the forefront of their thinking for future updates and additions to the framework. Big investments are likely to be focused on another increase in performance to keep up with continually evolving consumer demands. A reduction in code size and further refinement of the technologies used in association with Flutter should also be expected by developers and users alike.

As Flutter becomes more prevalent on the web, so too do the requirements for increased connectivity with plugins and 3rd party services. The hope for the future is that Flutter becomes as widely accessible and malleable as traditional web development frameworks, until then, we can rest assured Flutter remains an efficient, highly desirable option for web and web app development.

We'd love to chat about your project!

We're here to help. If you've got an idea or a direct need you would like help addressing, we're all ears!