Flutter
Published in

Flutter

Going deeper with Flutter’s web support

Harnessing the full power of the web platform for app-centric experiences

More than a canvas painting

What does it actually mean to paint Flutter widgets as pixels on the web?

  • a framework that provides abstractions for common idioms like widgets, animation and gestures.
  • an engine that renders to the target device using the system APIs it exposes.
Flutter’s architecture for the web is multilayer system with a Framework on top of a browser engine.

Feeling at home in the browser

For a web application to feel at home in the browser, it must support a wide variety of browser idioms, including natural text interaction and scrolling behavior, back/forward navigation, and accessibility, all with good performance across a wide variety of devices and form factors.

Text rendering

One of the biggest challenges we faced when building Flutter’s web support was developing a layout system specifically for text layout. In order to lay out a paragraph of text, Flutter creates a paragraph object and calls its layout() method. Since the web currently lacks a direct text layout API, we use the DOM to perform various measurements on the paragraph by triggering layout() and observing side-effects of layout properties for other elements in the frame.

Scrolling

There are two ways scrolling can make a Flutter web app feel more natural: scrolling performance and scrolling affordance.

Navigation

Unlike native apps, web apps come with a built-in back button in the browser. Today the browser’s back button behaves like Navigator.pop() in any Flutter app. This means that when a user opens a link to a Flutter web app in the browser, the framework splits the initial route into parts and pushes each one.

Today the browser back button tries to match the Flutter app’s back button routing history.

Being accessible

By design, Flutter implements accessibility by building a SemanticsNode tree separate from the RenderObject tree. Flutter’s accessibility system is currently opt-in, meaning an end-user has to choose whether to enable assistive technology. When enabled, the SemanticsNode tree is produced by scanning the render tree and merging semantic nodes that represent a single logical interactive element on the screen.

Every Flutter web app exposes a semantic tree to accessibility tools like VoiceOver.

Rive: A showcase example of Flutter on the web

A prime example of a rich interactive application that demonstrates the capabilities of Flutter’s web support is Rive, who are today launching a rewrite of their design collaboration tool that is built entirely with Flutter.

A video showcasing the new features and enhancements of Rive 2.

Conclusion

We hope this gives you a deeper understanding of how we are making full use of the power of the web platform to build out Flutter support for the web. Just a few years ago, it would not have been possible for us to deliver Flutter on the web with an acceptable level of quality and performance, but the introduction of new web technologies and continued advances in the platform have let us harness much more of the potential of the underlying device. As the web continues to evolve, we will evolve with it and improve our support for text interactions, scrolling, navigation, and accessibility as we continue to work towards to a stable release.

--

--

Flutter is Google's mobile UI framework for crafting high-quality native interfaces on iOS, Android, web, and desktop. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source. Learn more at https://flutter.dev

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Mariam Hasnany

product manager @Google #flutter | co-founder @its_TMA |👩🏾‍🎓 UVA ’13 | 📚currently reading Give andTake by Adam Grant