Flutter 2.0 has been released to stable, and with it, there is stable web support. This means that Flutter is now safe to use in production-quality web projects.

With that said, let's see what Flutter for Web entails.

Renderers

There are two ways Flutter for Web can display your app in a browser. It can either render it using HTML, CSS, and Canvas, or using CanvasKit. Each has its own advantages. The HTML renderer, since it uses more basic elements, is faster to download and load. The CanvasKit renderer is a bit heavier, but it provides better performance when there's a lot on-screen.

By default, a Flutter web app will automatically choose which renderer to use, based on the client device. Mobile devices will be sent the HTML renderer, while desktop devices will get CanvasKit. In the case that you want to use a specific renderer, Google has provided options to always use one or the other.

Flutter 2.0 architecture

Web-Specific Features

Even though Flutter is cross-platform, there are still some things that are specific to each supported platform. This is because some things only exist on one platform, or work in some way that needs a special API. And the web is no different.

Flutter 2.0 adds support for things like custom URL strategies, web-app deep linking, and proper PWA support. When you create a Flutter for Web project, a web manifest and service worker templates will be generated for you.

Gestures & Keyboard

To truly be cross-platform, a framework needs to take into account its target. If it's running on a desktop platform, it should respond to keyboard shortcuts. On mobile, it should respond to tap and swipe gestures.

Well, Flutter for Web does both of these things. Through the web, it targets both desktop and mobile devices. With the stable release of Flutter for Web, there is support for native gestures, depending on the client platform and input source.

Plugins

Like any good language, Flutter supports libraries, or plugins in this case. As a safety measure, plugins need to specify their platform compatibility. Since Flutter for Web is a relatively recent addition to the framework, a lot of plugins, including Google's own, didn't support it.

With the release of Flutter 2.0, a whole bunch of Google's Flutter plugins, including the Firebase suite, are marked as web-compatible.

While this may not seem like a lot, these are some pretty big features. Flutter 2.0 gained an entire platform, and a lot of work was put in to make Flutter for Web integrate into the rest of the framework.

What do you think of Flutter for Web? Is it a good option for web development? Let us know!