Google today provided an update on its progress bringing Flutter app development to the web, inarguably its biggest potential target market.

“Our vision for Flutter is to provide a portable toolkit for building beautiful experiences wherever you might want to paint pixels on the screen,” Google’s Mariam Hasnany writes. “As we’ve noted previously, we are deliberately app-centric with our framework and API choices, building a layered architecture that can scale across mobile, desktop, and embedded devices without compromising performance or quality. The web is at the core of our work. Flutter was originally born out of explorations from the Chrome team. It draws inspiration from the productivity and iterative development model of the web, and many of our engineers have years of experience building browser engines and web standards. We target the web browser because it is the beating heart of the internet: the most pervasive, flexible, and extensive app model that has existed in computing history.”

Flutter started off as a cross-platform app development platform for Android and iOS, but it has since expanded to include Windows, Mac, Linux, and web, and Google has plans to bring it to any device type with a screen over time. But the web is obviously a very important platform, and Google’s goal is to make Flutter for web both “true to the web and a no-compromise expression of Flutter.”

As with other versions of Flutter, developers will use the Dart programming language to create web apps using Flutter for web. The difference is what happens under the covers: The engine component of Flutter web translates Flutter scenes into HTML, CSS or Canvas, and renders frames onto webpages as trees of HTML elements. Google calls this the DomCanvas backend.

“It gives us the most compatibility across browsers with a compact code size and is well suited for apps with short lived sessions that require fast startup,” Hasnany says. The firm is also working on a CanvasKit-based backend that uses WebAssembly and WebGL and allows direct access to the low-level graphics stack enabling full parity with native Flutter. “For now Flutter gives you the option to choose which backend best fits your desired use case,” she adds.

As an example of what’s possible using Flutter for web, Google offers the Rive 2 Beta, which was completely rewritten in Flutter. You can sign-up now to test the app in beta.

“Rive is an animation design application that allows designers and developers to create high-quality assets to be easily integrated to any platform,” Hasnany explains. “In order to combine user interface with glitch-free animations in real-time, Rive requires heavy rendering of graphics and performant experiences across modern browsers as well as other platforms.”

Tagged with Flutter