Flutter 3.22: What’s New
Engineering
Flutter
Update
Summary
Key updates to Flutter 3.22 include Impeller rendering engine improvements that optimize performance for complex visual effects, integration of Vulkan for Android, and the release of stable WebAssembly support to enhance web app performance. Additionally, the introduction of the Firebase Vertex AI Dart SDK enables seamless AI integration in Flutter applications. Lastly, several framework, Android, and iOS improvements are introduced.
Key insights:
Flutter 3.22 introduces significant enhancements including the Impeller rendering engine upgrade, Vulkan backend integration for Android, and stable support for WebAssembly (Wasm) to improve performance and developer experience.
The Firebase Vertex AI Dart SDK preview in Flutter 3.22 allows developers to integrate advanced machine learning features into their apps easily.
Updates to the framework include renaming MaterialState to WidgetState for broader applicability, improved form validation, dynamic view size adjustments, and streamlined asset bundling based on app flavors.
Several breaking changes have been introduced that developers should be aware of.
Introduction
Flutter has revolutionized the way developers build natively compiled applications for mobile, web, and desktop from a single codebase. The latest update, Flutter 3.22, continues this trajectory by introducing a wide array of enhancements, including improved performance, expanded platform support, and a refined developer experience. This article delves into the major updates that Flutter 3.22 brings to the table.
Impeller
Flutter 3.22 has made significant improvements to the Impeller rendering engine. The engine now utilizes a new blur effect algorithm that enhances downscaling and supports mipmaps for backdrop filters, ensuring smoother visual effects. Additionally, the update leverages GPU acceleration more effectively for operations, with the new approach cutting down CPU and GPU time of blurs by nearly half. These enhancements allow for more sophisticated UI designs that can run efficiently across various devices.
On the Android front, Flutter 3.22 introduces the integration of a complete Vulkan backend for Impeller (Flutter's rendering engine). This enhancement leads to smoother graphics rendering and significant performance improvements by utilizing modern GPUs more efficiently and eliminating runtime shader compilation stutter through pre-compiling shaders. Vulkan support is available on devices running Android 7.0 and above, ensuring that a wide array of devices benefit from these performance improvements.
Furthermore, the rendering strategy of Impeller on both iOS and Android has been changed to a "stencil-then-cover" approach, which is effective for rendering complex paths such as those found in SVGs and Lottie animations. As a result of this new strategy, CPU usage is reduced significantly by shifting more work to the GPU. Users will notice smoother animations and more efficient rendering of complex graphical elements.
WebAssembly Support
Flutter 3.22 introduces stable support for WebAssembly (Wasm), aiming to enhance the performance and capabilities of Flutter web applications. Wasm allows Flutter applications to achieve near-native performance by compiling code to low-level binary instructions that are safe, fast, and platform-independent. This is particularly beneficial for applications with rich animations and transitions.
Complementing the Wasm support, the Dart next-generation web interop has also become stable in Flutter 3.22. Developers can now migrate their packages to package:web and dart:js_interop to ensure compatibility with Wasm. This migration will enable their web applications to leverage the performance benefits offered by Wasm, providing a more seamless and responsive user experience.
Firebase Vertex AI Preview Release
Flutter 3.22 introduces an exciting preview release: the Firebase Vertex AI Dart SDK. This new software development kit allows Flutter developers to leverage the capabilities of Google's Vertex AI, enabling them to seamlessly integrate advanced machine learning and AI-driven features directly into their Dart and Flutter applications.
The Firebase Vertex AI Dart SDK simplifies access to powerful AI tools like the Vertex AI Gemini API, which provides language models for natural language processing tasks. With this SDK, developers can enhance their applications with intelligent and responsive features, such as chatbots, text summarization, sentiment analysis, and more.
Moreover, the integration with Firebase App Check ensures secure interactions with Firebase services, protecting against threats like billing fraud, phishing, and app impersonation. This added security layer safeguards both developers and end-users.
This preview release represents a significant step forward in bridging the gap between cutting-edge AI technology and modern application development frameworks.
Framework Updates
Widget State Properties
The MaterialState class has been renamed to WidgetState to better reflect its broader applicability beyond Material widgets. This change allows developers to manage the state of various widgets, including those in the base “Widgets” layer using a unified approach. The renaming simplifies the state management process and makes state properties more consistent and intuitive to use across different types of widgets.
With the WidgetState class, handling different widget states such as "hovered," "focused," and "disabled" can now be done more flexibly with a wide array of widgets outside the Material library. Developers can define state-dependent behaviors more easily, allowing them to improve the interactivity and responsiveness of their Flutter applications.
This change promotes code reusability and maintainability. By providing a unified approach to handling widget states, Flutter 3.22 allows developers to create more cohesive and responsive user interfaces across their applications.
Dynamic View Size
Enhancements have been made to dynamic view sizes, including improved constraint handling, enhancements to flexible and expanded widgets, and better layout widgets. These improvements provide developers with greater control and flexibility when building responsive user interfaces that adapt seamlessly to different screen sizes and orientations.
Improved Form Validation
Form validation has been enhanced to simplify the process of validating user input. The update introduces more flexible validation methods, facilitates real-time feedback, and improves error handling. These enhancements allow developers to implement robust input validation with less effort.
Conditionally Bundling Assets Based on Flavor
Flutter 3.22 improves the process of conditionally bundling assets based on different app flavors. This update streamlines the configuration process, making it easier for developers to specify individual assets to be bundled only when building for a specific flavor. This provides greater control and flexibility in managing app assets across different versions.
Android Improvements
In addition to the completion of the Vulkan backend for Android, Flutter 3.22 enhances deep-linking validation through a set of new features designed to verify setups within Android manifest files. These improvements help developers ensure that their deep links are correctly configured, reducing the likelihood of errors.
Furthermore, the update includes support for the upcoming predictive back gesture feature on Android. This allows users to peek at the previous application during a back-gesture, providing a smoother and more intuitive navigation experience.
Likewise, Flutter now supports Gradle Kotlin DSL, improving the code editing experience for Android developers. With features like auto-completion and quick access to documentation, developers can write and manage their Gradle scripts more efficiently.
These updates contribute to a more powerful and developer-friendly environment for Android developers working with Flutter, facilitating better deep-linking implementation, supporting predictive back gestures, and enhancing productivity through Gradle Kotlin DSL support.
iOS Improvements
Flutter 3.22 addresses the longstanding platform view performance issue on iOS, leading to significant performance gains. According to internal benchmarks, this enhancement has resulted in a 50% reduction in GPU usage, a 33% decrease in average frame render time, and a 21% reduction in worst-case frame render times.
Moreover, the update introduces support for wireless debugging on iOS 12 and earlier versions, streamlining the development process. Developers can now debug their applications without the need for a physical connection, enhancing convenience and flexibility.
These additions not only enhance the overall performance of iOS applications built with Flutter but also improve the developer experience by providing more efficient debugging capabilities, ultimately leading to a more seamless and optimized development workflow.
DevTools Updates
Flutter 3.22 introduces enhancements to DevTools, focusing on performance and usability improvements. One significant addition is the inclusion of CPU samples in the timeline, allowing developers to capture and analyze CPU usage over time. This granular view of application performance under various conditions enables developers to easily identify performance bottlenecks and optimize their code more effectively. Furthermore, developers can now save snapshots and compare them over time, tracking memory usage patterns.
The update also enhances filtering capabilities within DevTools. The advanced filtering option streamlines the process of navigating through extensive logs, making it easier for developers to pinpoint specific issues. This improvement reduces the time spent on debugging by isolating relevant information more efficiently.
These updates collectively make DevTools more powerful and user-friendly, empowering developers to optimize application performance, diagnose issues more effectively, and streamline the overall development workflow.
Breaking Changes
Flutter 3.22 introduces several breaking changes that developers should be aware of. Here's a summary of the most impactful updates:
Deprecated API Removal: APIs deprecated in versions prior to v3.19 have been removed in this release. Bulk fixes can be applied with the dart fix command.
MaterialState Renamed to WidgetState: As mentioned above, developers will need to ensure that this change is reflected in their codebases.
New ColorScheme Roles: These roles provide developers with more control over the color theming of their applications, enabling more precise and consistent design implementations.
Dropping Support for Android KitKat: Support for Android KitKat has been discontinued.
New APIs for Android Plugins Rendering to a Surface: The Android embedder for Flutter introduces a new API, SurfaceProducer, allowing plugins to render to a Surface without managing the backing implementation. Plugins using the older createSurfaceTexture API will not work with Impeller.
Nullable PageView.controller: If a controller isn't provided in the constructor, the controller member is null.
MemoryAllocations Renamed to FlutterMemoryAllocations: MemoryAllocations in Flutter is renamed to make the name available to a non-Flutter, Dart project.
Conclusion
Flutter 3.22 represents a significant leap forward for the framework. This update brings a wide array of performance optimizations, rendering engine enhancements, and expanded platform support, allowing developers to build high-quality, natively compiled applications. While this article has highlighted some of the major updates, refer to the official release notes for a more comprehensive overview.
With its continued focus on performance, developer experience, and cross-platform capabilities, Flutter 3.22 solidifies Flutter's position as a powerful solution for building applications across mobile, web, and desktop platforms.
Authors
References
https://docs.flutter.dev/release/release-notes/release-notes-3.22.0
https://medium.com/flutter/whats-new-in-flutter-3-22-fbde6c164fe3
https://medium.com/flutter/io24-5e211f708a37
https://www.spiceworks.com/tech/devops/articles/what-is-webassembly/#:~:text=WebAssembly%20(Wasm)%20is%20defined%20as,browsers%20at%20near%2Dnative%20speeds.
https://docs.flutter.dev/platform-integration/web/wasm
https://www.blup.in/blog/flutter-3-22-update-what-s-new-in-framework-material-ios-android-windows-more