Important recent updates of Flutter Web

Our release focuses on performance, developer experience, and web integration.

March 2021 Flutter Web support has entered the stable version , so what is the next step?

Our research on users found that more than 10% of Flutter projects aim to publish to the Web platform. Therefore, we are currently focusing on improving the quality of the initial stable version and enabling more people to put Flutter web applications into production.

Based on Flutter's quarterly survey results, and information we heard through issues, developer interviews, and social media channels, we have established these priorities. We have just received the survey results for the third quarter, and we are glad that your feedback coincides with this plan.

This article provides a detailed road map and corresponding work plan for each priority. Some features may take several quarters to complete. The features identified with the magnifying glass symbol 🔍 mean that they still need further investigation before a solution can be given.

It is very important to make Flutter applications behave naturally on the Web. This includes features such as scrolling behavior, text functions, splash screens, hyperlinks, search engine optimization, and other web application-specific interface features.

RTL text

Previously, Flutter did not provide complete support for right-to-left (RTL) languages (such as Arabic and Hebrew) on the Web. Although the framework itself supports RTL text, the web engine ignores the difference between LTR and RTL, resulting in undefined behavior.

The recently released stable version (2.5) adds basic support for RTL. The Flutter web application already supports all major scenarios of the RTL language. Most of the issues related to basic support have been resolved, and we are planning to fix the remaining issues.

• implements RTL support for text editing (fixed)
• RTL text rendering failure on the Web (fixed)
• TextField with TextDirection.rtl has a misplaced cursor on the Web (planned)
• In RTL applications, (fixed)

Scrolling behavior

Although Flutter 2 has made some improvements to support scrolling behavior on desktop browsers (such as scroll bar support), scrolling behavior is still in some cases on browsers or operating systems running web applications Did not meet expectations.

Although some of these behaviors rely on Flutter's desktop support, we plan to solve some physical scrolling properties and scroll bar issues in this roadmap. The issues are as follows. We also plan to start research on touchpad support.

• PageScrollPhysics exhibits strange behavior
• There is no scroll bar in the (Infinite) List Widget
• The scrolling physics of the Mac desktop should maintain the range
• Let the scroll bar avoid blocking the inner margins of Sliver and media queries
• MaterialScrollBehavior.buildScrollbar needs to be updated

🔍 Research on support

Application loading API

Some web applications like to display a splash screen, loading indicator, or landing page when the application loads or provides some customized experience. At the moment, in the Flutter Web application, there is no simple way to load or implement a custom experience; when the CanvasKit used for rendering is large, this will become a more difficult problem.

We are focusing on providing an explicit API for the application startup cycle, which can be used to pre-install the application, control the loading cycle of the application, and create a splash screen or loading indicator.

• Add support for splash screen pages on the Web

Accessibility is one of our top priorities; we aim to provide you with the necessary tools to build accessible web applications that work well on the most common screen readers.

Flutter 2.2 has greatly improved accessibility support. Since then, we have heard the concerns of some end users who tried to use screen readers (such as JAWS ) to browse their web applications.

In this roadmap, we will focus on the desktop browser support screen readers issues such as snackbar announcement. We will also continue to study how to improve our overall accessibility support.

• button click failed to trigger when using the Enter key
• arrow keys and the B key do not update the focus of the screen reader

We will always prioritize performance to improve the user experience of Flutter web applications. At present, our main goal is to improve scrolling lag and speed up the initial loading of web applications.

Stuttering when scrolling

Our recent quarterly survey data shows that rolling lag is one of the top performance problem reports. Our goal is to ensure smooth scrolling of Flutter web applications whether using gestures on the phone or using the mouse/keyboard on the desktop, but this also depends on the type and amount of content that the web application expects users to scroll.

In the next few months, we will focus on improving the stuttering caused by image decoding, and we will continue to study the performance issues of scrolling to find other use cases that we can improve.

• Transfer image decoding to Web Worker
• Reduce cost platform rendering engine manipulation in view of CanvasKit

Bundled with CanvasKit (offline support)

Currently, Flutter web applications rendered with CanvasKit require additional manual steps to work offline as a progressive web application (PWA). In order to fully work as a PWA in offline mode and ensure that the application complies with strict content security policies, we need to bundle CanvasKit and alternative fonts.

We will first bundle CanvasKit, then bundle fonts, and add the necessary tools to enable offline mode.

• CanvasKit's backend should not rely on unstable Google fonts
• supports the bundled CanvasKit instead of CDN

CanvasKit download size

CanvasKit's performance is better than DOM-based methods, so it is our default renderer on desktop browsers. However, the time required to download the app will affect the initial loading performance (and the Lighthouse score of the Flutter app running on the web).

In this roadmap, we will study how to reduce the download size of CanvasKit in an effort to improve the initial loading performance. We want to ensure that the end user’s device or browser does not handle a large amount of payload.

🔍 Improve CanvasKit download size

🔍 found a suitable size alternative font for

Enhancing the ability of browser code integration is conducive to the use of the advantages of the Web platform. Flutter web applications can be integrated with HTML in two ways. 1) Use the HTML platform view in the Flutter web application, or 2) Embed Flutter as a content set into an existing web application (similar to an add-on application to the web). The former is currently available and needs improvement, while the latter will be a new feature that needs further design and development.

Embed with custom elements (add to existing application add2app)

Today, the only way to embed a Flutter web application into an existing website/web application is through an iframe. Although this is feasible in some scenarios, it is not an ideal solution for developers who are slowly migrating their web applications to Flutter.

In this roadmap, we will research and design a customized solution that enables you to embed a Flutter web application, similar to a mobile scene added to the application.

🔍 Render the application within a custom element

Flutter's ecosystem includes functions for development, but there is still a lack of support for Web functions, such as plug-ins, debugging, and hot reloading. In order for you to have a good developer experience on the web, we will continue to narrow the gap between the mobile and web.

Camera plug-in

Since the release of the initial web stable version, the camera plug-in has been one of the most popular plug-ins; many people have found that the synchronization gap is a major problem when introducing Flutter mobile applications to the web.

In the stable version of Flutter 2.5, we provide an plug-in , which can initialize the camera, display the camera preview, and take photos. We will improve this plugin after we receive feedback.

• Add camera support for Web (fixed, some PRs to be determined).

The above is an overview of our current roadmap on the Web. The GitHub issue list still the source of the issues we are dealing with. We may add, extend or postpone features based on what we learn and your feedback.

We value your feedback and thank you for your continued support.

Thanks to flutter.cn community members (@AlexV525, @Vadaski, @MeandNi) and Lynn for reviewing and contributing to this article.