Flutter web support hits the stable milestone
By: Mariam Hasnany
Tags: UI, Web Development, Flutter, Programming, Web

Hyperlinks are also critical to how users navigate the web. A new link widget in the url_launcher package enables users to deep link to anchors within your app or to external websites. You can use link on relevant widgets, including buttons, inline text, images, and specify whether the link opens in the same tab or in a new tab.

Another integral part of any app is text rendering. Developing a layout system for text was one of the biggest challenges to support Flutter on the web. Since the web lacks a direct-text layout API, Flutter must perform various measurements on the paragraph by triggering a layout() . These measurements can become quite expensive, so a new canvas-based text measurement adds supports for both plain and rich text. Now, Flutter can do detailed measurements efficiently on the web, enabling things like painting highlight boxes accurately on selected text.

Interacting with text is just as important as being able to render text quickly and accurately. Text can now be selected, copied, and pasted by using SelectableText and EditableText widgets. Also, form text fields support autofill by enabling the browser to store data and handle cases for future autofills.

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 through the efforts of Chrome’s Project Fugu.

Invoice Ninja, an invoice management app, launched the PWA app using the same codebase as their existing Flutter mobile apps.

When you create a Flutter web app, we include a PWA web manifest file, as well as code to setup service workers. The manifest file provides metadata about how your app should run, including information like icons and an app title. Service workers enable caching of resources and running your app offline. When running a Flutter app in the browser as a PWA, you’ll see the opportunity to install it to your device, whether as a mobile or desktop app.

Support for desktop form factors

We want to make Flutter web experiences feel right, regardless of the shape and size of your browser window. On mobile browsers, Flutter apps already have excellent support for gestures and scrolling physics inherited from mobile app support. But desktop browsers offer different UI affordances, and so we’ve updated Flutter accordingly.

For instance, there is an expectation for content on the desktop to display scrollbars that can be controlled by a mouse or keyboard. So the new customizable interactive scrollbars support a theme, a track, and the ability to scroll by dragging a thumb. The PrimaryScrollController has been expanded so that you can use keyboard shortcuts to scroll without having to wire up your own scroll views.

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.

We also increased the default content density, because mouse pointers support a tighter density than touch devices. And we added a superset of system mouse cursors in the framework to support all platforms.

Finally, to support all users, Flutter’s web semantic features are expanded to support accessibility for Windows, macOS, and ChromeOS. On the web, a second DOM tree called the SemanticsNode tree is generated in parallel to the RenderObject DOM tree. The SemanticsNode tree translates the flags, actions, labels, and other semantic properties into ARIA attributes. Now you can use Narrator, VoiceOver, TalkBack, or ChromeVox screen readers to navigate a Flutter web app.

Plugin ecosystem

Finally, web support was added to some of the most-used plugins, making it possible to bring your existing Flutter apps to the web. Flutter plugins allow your code to interact with native libraries for the platform you are running on. When you run your Flutter app on the web, you can access existing JavaScript libraries through plugins.

Since the beta release and with help from the community, support for the following plugins was added:

Looking forward

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.

Much of this release was defined by the feedback shared by early web adopters, and by issues filed by the community. And for that, we thank you! Going forward, our primary goal is to address your feedback and resolve issues quickly so that you can stay focused on shipping a high-quality, Flutter app across all of your target platforms.