This article is more than 1 year old

Flutter now has less stutter and plays nicer with the web

Version 3.7 shows Google's cross-platform, Dart-based UI framework maturing

Flutter developers gathered on Wednesday in Nairobi, Kenya, and at stream-fed screens elsewhere in the world to learn about the alpha release of Dart 3 and Flutter 3.7, the next iteration of Google's open source Dart-based UI toolkit.

The occasion is Flutter Forward, a developer event, and Tim Sneath, who heads product management for Dart and Flutter, spoke with The Register earlier this week about the changes coming to the Dart/Flutter ecosystem that bring meaningful performance improvements and expanded capabilities.

Flutter, which helps developers create apps for mobile platforms (Android, iOS), desktop platforms (Linux, macOS, and Windows) and the web, reached its 1.0 milestone on December 4, 2018. When last we checked, in May 2022, Sneath said there were 500,000 apps built using Flutter, twice the number from a year earlier. That number has now grown to 700,000. And the number of packages available through pub.dev has surpassed 32,000, up from 23,000 last May.

Flutter, Google claims, has attracted 5 million developers and is one of the top three open source projects, per GitHub, based on the number of contributors. When others measure such things, Flutter still appears to be rather popular.

It may become more so because Flutter is expanding to new hardware platforms like RISC-V and ARM64 for Windows and is tackling performance issues, making it better suited for games and other computationally demanding applications. Finally, it's learning to play nicely with the web and with other programming languages.

Dart 3, as we noted recently, is a major break from previous versions of the language because it mandates sound null safety, meaning that non-nullable variables cannot contain a null value. This generally makes software development faster, makes code easier to maintain, and enables compiler checks to weed out null reference errors.

The alpha release of Dart 3 has now arrived, allowing developers to prepare their code for the stable 3.0 release later this year. The transition is already well under way: all of the top 250 packages and 98 percent of the top 1,000 packages in pub.dev, the Dart package repository, currently support null safety.

There are, however, some breaking changes – the removal of previously deprecated core library APIs – that may require code revisions. Also, there are some new language features like records, patterns, and class modifier controls.

There's also support for RISC-V in the Dart 3 alpha – at Flutter Forward, the plan is to demo Flutter on the RISC-V-based ClockworkPi DevTerm Kit R-01. Google clearly sees a future for RISC-V, with its Android team recently talking up their efforts.

We understand that Flutter compilation to WebAssembly will also be shown, the result of work with the Chrome team to add support for garbage-collected languages like Dart to WebAssembly.

Flutter in recent years has been trying to stomp out performance issues like excessive CPU usage and "jank" – jittery graphics due to shader loading. Those working on the project have created a new graphics rendering engine called Impeller to solve those issues.

According to Sneath, Impeller uses precompiled shaders to deal with frames at runtime dropped due to shader compilation. It's designed to take advantage of low-level graphics APIs like Metal and Vulkan, and uses concurrency to better distribute single-frame workloads across threads.

"Under Impeller, we're seeing on the order of six to 10 times faster improvements for the same code," said Sneath. "Impeller completely eliminates early onset shader compilation, jank... Essentially, instead of having to do some key parts of the graphics compilation at runtime, now we do it ahead of time, so that by the time the app is loaded, all of those things that could cause that jank are dealt with."

Sneath has produced a video demonstrating the effect of the new rendering engine, which is expected to lead to support for importing 3D models from tools like Blender into Flutter apps.

Flutter is also learning to get along better with the web. Previously, Flutter developers had to choose whether they wanted web builds to render with the HTML renderer – producing a combination of HTML elements, CSS, Canvas elements, and SVG elements – or with the CanvasKit renderer, which produces graphics rather than readable source code.

Its latest trick is element embedding, which lets Flutter content be added to any web page within a <div> element. It thus becomes part of the Document Object Model (DOM) and can be manipulated using CSS selectors and transformations.

In addition, Google's Dart team has been working on a package called js that enables interoperability between JavaScript and Dart code. By annotating functions in Dart code with the @JSExport attribute, those functions can be called directly from JavaScript code.

The Flutter team has prepared a proof-of-concept app demonstrating how Flutter code can live within a web page.

The Register asked Sneath whether there was anything to say about the recent Google layoffs which are said to have affected about 16 percent of 400-person team developing Fuchsia, a Google operating system for home devices and products unknown for which Flutter is an officially endorsed framework.

Sneath didn't address the question directly but said there are a lot of Google products that depend upon Flutter, including Google Classroom, which should be discussed at Flutter Forward. He said he was just happy to see Flutter's adoption within Google, with more than 30 different teams using the framework. "I expect that number to just continue to grow over time," he said.

While Flutter and Dart may be becoming more cosmopolitan in their associations, Google's vision for Flutter remains forward-looking.

"Historically, people built for the web using the Document Object Model and HTML," explained Sneath. "And that was kind of the only way to build web apps. Now, over the last couple of years, between Canvas and WebAssembly, we've got these new technologies that enable a different class of web app experience. And so Flutter is unapologetically aiming at that next-generation class."

"We don't think of ourselves as a competitor to Angular or React or Vue. We're not even aiming at that same market. We're aiming at this next class of apps that look very much like the kinds of apps that Flutter is designed to solve – high graphical fidelity, offering pixel level of control over apps, having a canvas where you can draw and manage every part of the environment yourself." ®

More about

TIP US OFF

Send us news


Other stories you might like