Hiring
Recruitment and Selection Strategies for the Modern Workforce
12th July 2024
Teamwork
The Importance of Teamwork (as Proven By Science)
17th July 2024
Hiring
Recruitment and Selection Strategies for the Modern Workforce
12th July 2024
Teamwork
The Importance of Teamwork (as Proven By Science)
17th July 2024

Welcome back for another exciting Flutter stable release! This time, we’re thrilled to present Flutter 3.22. We’re bringing WebAssembly to the stable channel, a fully featured Vulkan backend for Impeller on Android, promising smoother graphics and a major performance boost. We’re also introducing streamlined workflows with new widget state properties, dynamic view sizing, and improved form validation. But that’s not all — you’ll find flavor-conditional asset bundling, a preview of Vertex AI for Firebase in Dart, and updated DevTools to make your life easier.

In just a few months since our last update, we’ve merged an impressive 1595 pull requests from the Flutter community, with 37 new community members contributing to Flutter for the first time!

So, dive in and discover all the new features and enhancements that the Flutter community has brought to this latest release!

WebAssembly

With the release of Flutter 3.22, Wasm is now available on the stable channel, offering significant performance improvements. In our internal benchmarks using Chrome on an M1 MacBook, the Wonderous app’s frame rendering time improved by 2x on average and 3x in worst-case scenarios.

flutter app

These enhancements are vital for apps with animations and rich transitions, where maintaining a smooth frame rate is essential. Wasm helps achieve this by reducing performance bottlenecks, resulting in smoother animations and transitions. To start using Wasm with your Flutter web apps, check out our Dart Wasm documentation and Flutter Wasm documentation. For the full announcement, visit the Flutter at Google I/O blog post.

Engine

Flutter 3.22 introduces significant updates to Impeller, the rendering engine that powers your Flutter applications. Key highlights include the completion of the Vulkan backend on Android for smoother graphics and improved performance, ongoing optimizations for blur effects and complex path rendering, and a new experimental API for testing with Impeller. In line with our roadmap, we’re committed to enhancing Impeller’s quality and performance, including completing the iOS migration to Impeller and expanding Android support.

Impeller

Vulkan backend feature complete on Android

In this release, Impeller’s Vulkan backend for Android is feature complete. In particular, in the past few months, the team has been hard at work completing the implementation of fast advanced blends, support for custom fragment shaders with the FragmentProgram API, PlatformView support (though it requires a small API migration), and fully implementing all blur styles.

Android preview

In the 3.19 stable release, after releasing improvements in Impeller’s OpenGL backend, we invited users to try out Impeller on Android devices both with and without Vulkan support. Over the past few months, after evaluating the performance of the OpenGL backend and estimating the remaining work on the Vulkan backend, we have decided to focus our efforts on making the Vulkan backend production ready first.

Impeller solves the issue of shader compilation jank. Additionally, in our benchmarks it outperforms the legacy renderer on average, 90th, and 99th percentile frame times. We therefore believe that the performance of the Vulkan backend on Android is acceptable. In this release (3.22), an app that opts-in to Impeller will use the Vulkan backend where available. In a future release, this will become the default. When an app that opts-in to Impeller runs on a device that doesn’t support Vulkan, Flutter will gracefully fall back automatically to using OpenGL ES with Skia. No action is necessary on your part. In the future, when we believe the OpenGL ES Impeller backend is production ready, this fallback will also use Impeller.

As the Impeller preview on Android continues through the 3.22 stable cycle, we request that Flutter developers upgrade to the latest stable version, and file issues about any shortcomings noticed when Impeller is enabled. Feedback at this stage is invaluable to ensuring that Impeller is successful on Android and that we will be able to confidently make it the default renderer in a release later this year. The Android hardware ecosystem is very diverse. For that reason, the most helpful feedback about Impeller should include detailed information about the specific device and Android version where issues occurred.

Blur performance improvements

Blur has been reimplemented in Impeller for both iOS and Android. In particular, the new approach, which is similar to Skia’s, reduces the CPU and GPU time of blurs by nearly half in benchmarks.

The chart below shows worst-case, 99%-ile, 90%-ile, and average frame rasterization times and GPU frame times in ms on an iPhone 11 device in a pathological benchmark intended to highlight blur performance. After rewriting Impeller’s blur, both the CPU and GPU cost of backdrop filter blurs has been nearly halved. This scale of this improvement translates to non-pathological cases as well, as would appear in typical apps.

Blur performance
99%-ile, 90%-ile and average frame rasterization times and GPU frame times in ms on an iPhone 11 device in a pathological benchmark intended to highlight blur performance

Stencil-then-Cover

Impeller on both iOS and Android has moved to a new rendering strategybased on the Stencil-then-Cover approach described in the chapter “Drawing Filled, Concave Polygons Using the Stencil Buffer” in the OpenGL Redbook. Team members discussed more on this technique as it applies to Flutter in GitHub issue #123671.

This approach solves the issue where the raster thread was spending too much time calculating tessellations for complex paths on the CPU for example, SVGs and Lottie animations. After the change, the total frame time (UI thread on the CPU + raster thread on the CPU + GPU work) is much lower for frames that contain complex paths. Users will notice that Lottie animations and other complex paths render more smoothly, with lower CPU utilization, and slightly higher GPU utilization.

Stencil-then-Cover
(Left) A Lottie animation. Previously, Impeller on a recent iPhone took 64ms / frame of raster thread CPU time to render it. (Right) The same animation on the same device after we landed the Stencil-then-Cover optimization. Raster times are nearly 10x faster.

While pleased with these improvements, there is still more work to do. Among other opportunities, we are aware that polyline generation remains prominent in CPU profiles, and we intend to investigate shifting this work to the GPU, as well.

New API

While still experimental, flutter test now accepts the --enable-impeller flag, which exercises Impeller using the Vulkan backend.

Framework

Widget state properties

MaterialState has been moved outside of the Material library and renamed WidgetState, in order to make it available to Cupertino, the base Flutter framework, and package authors. For more information on migrating to the new WidgetState, see the migration guide.

Dynamic view sizing

Enhancements to dynamic view sizing benefits developers building responsive layouts, ensuring better UI adaptability across various device screens.

Improved form validation

Thanks to the contributions of Flutter community member SharbelOkzan, Flutter 3.22 comes with more flexible form validation methods allowing developers to create more robust user input handling, enhancing both usability and security.

Covariants in 2D APIs

Reducing the need for type casts in 2D graphics APIs simplifies development workflows and enhances performance, important for games and complex animations.

Flavor-conditional asset bundling

Developers using the flavors feature can now configure individual assets to be bundled only when building for a specific flavor. For more information, check out Conditionally bundling assets based on flavor.

Transformation of assets using Dart packages

Users can now configure Dart packages to transform their app’s assets as they are bundled. For more information, check out Transforming assets at built time.

Platform views improvements

Heads up for all Flutter app developers! If you’re using Flutter to build apps that rely on native Android components (like maps, web views, or certain UI elements), we have some important news.

Due to a bug in Android 14, apps built with older versions of Flutter might not work properly on devices running this new Android version.

Flutter 3.22 fixes this issue and improves the overall performance of these native components in your Android apps. So, to ensure your app runs smoothly on all Android devices, make sure to rebuild and release your app with Flutter 3.22.

This update also includes behind-the-scenes improvements to make platform views on Android more reliable and performant overall.

End of support for KitKat

Flutter’s minimum supported Android version is now Lollipop (API 21). Beginning with Flutter’s 3.22 stable release, Flutter will no longer work on devices running Android KitKat (API 19). For more details, see our deprecation guide.

View Similar blog Click

For more information Contact XpertLab