Flutter Update

10 min

10 min

Ashutosh Rawat

Published on May 20, 2024

What's New in Flutter 3.22: Top 12 Features You Need to Know About.

Flutter 3.22 Release includes Web Assembly, Vulkan Graphics, Widget State Enhancements, and much more
Flutter 3.22 Release includes Web Assembly, Vulkan Graphics, Widget State Enhancements, and much more

Flutter 3.22 — What’s New In Flutter.

Did you know that Flutter 3.22 is here with a plethora of exciting updates? 🚀

🌟Have you ever wondered how you can improve your Flutter app's performance and user experience? Flutter 3.22 has the answers!

Discover Flutter 3.22, where smoother Android graphics and enhanced web app performance await! Did you know this update introduces a Vulkan backend and WebAssembly support? Dive deeper to learn how developers manage widget states, ensure UI adaptability, and optimize user input handling. With features like Flavor-Conditional Asset Bundling and Gradle Kotlin DSL Support, Flutter 3.22 elevates app performance, user experience, and developer productivity. Don't miss the Vertex AI for Firebase Dart SDK Preview and Google Mobile Ads SDK 5.0.1 enhancements, shaping the future of Flutter development. Join us on this journey to unlock the full potential of Flutter 3.22!

💡 Let's dive into the latest release of Flutter and discover how you can take your app to the next level. Are you ready to explore?

Top 12 updates from the Flutter 3.22

Discover the latest updates in Flutter 3.22! This release brings a wealth of enhancements from the preview release of Vertex AI for Firebase Dart SDK to improvements in platform views and deep linking capabilities. Also, explore support for Gradle Kotlin DSL in Android build scripts and the completion of the Vulkan backend on Android. Plus, enhancements like Widget State Properties, Dynamic View Sizing, Improved Form Validation, and the Impeller rendering engine elevate app development. Don't miss out on these top 12 features shaping the future of Flutter development!

So, here are the top 12 updates from the Flutter 3.22 release:

1. Vertex AI for Firebase Dart SDK preview release:
Explore the cutting-edge AI features for Dart and Flutter apps with the new Vertex AI integration.

2. Google Mobile Ads SDK for Flutter:
Monetize your Flutter apps effectively with enhanced support and features from the Google Mobile Ads SDK.

3. Support for using Gradle Kotlin DSL in Gradle build scripts on Android:
Experience improved code editing and readability in your Android projects with Gradle Kotlin DSL support.

4. Platform view improvements:
Enjoy smoother interactions and scrolling on iOS with significant enhancements to platform view performance.

5. Deep linking and Predictive back gesture:
Enhance navigation and user experience in your Flutter apps with deep linking and predictive back gesture features.

6. WebAssembly:
Boost web app performance with the introduction of WebAssembly support in Flutter 3.22.

7. Vulkan backend feature complete on Android:
Experience smoother graphics and better performance on Android devices with the completion of the Vulkan backend.

8. Widget state properties:
Simplify widget state management with the introduction of widget state properties in Flutter 3.22.

9. Dynamic View Sizing:
Ensure UI adaptability with Dynamic View Sizing, allowing layouts to respond effectively to different screen sizes and orientations.

10. Improved form Validation:
Enhance accuracy and error handling in forms with improved form validation capabilities in Flutter.

11. Platform views improvements:
Enjoy smoother interactions and scrolling on iOS with significant improvements to platform view performance.

12. Impeller rendering engine:
Dive into the next-generation rendering engine, Impeller, for improved graphics and performance in Flutter apps.

  1. WebAssembly

Introducing WebAssembly (Wasm) in Flutter 3.22! Now available on the stable channel, Wasm brings significant performance improvements. In our benchmarks using Chrome on an M1 MacBook, the Wonderous app saw a 2x improvement in frame rendering time on average and up to

3x in worst-case scenarios.

These enhancements are crucial for apps with animations and rich transitions, where maintaining a smooth frame rate is key. Wasm reduces performance bottlenecks, resulting in smoother animations and transitions. To get started with Wasm in your Flutter web apps, check out our Dart Wasm documentation and Flutter Wasm documentation. For more details, visit the Flutter at Google I/O blog post.

  1. Vulkan backend feature complete on Android

Introducing the Vulkan backend for Impeller in Flutter 3.22, a game-changing enhancement to the rendering engine powering Flutter apps on Android. Vulkan, renowned for its low-overhead and cross-platform 3D graphics and computing API, unlocks high-efficiency access to modern GPUs.

This integration empowers Flutter to leverage Vulkan's capabilities, rendering graphics with unparalleled efficiency. Experience smoother graphics and turbocharged performance across Flutter apps on Android devices. Especially beneficial for apps boasting animations and rich transitions, this enhancement ensures a consistently seamless frame rate, elevating the user experience to new heights.

  1. Widget state properties

In Flutter 3.22, Widget State Properties are pivotal in how widgets manage their appearance and behavior. Previously known as "MaterialState," this mechanism has undergone a transformation, now referred to as "WidgetState." This renaming facilitates broader usage across various components of Flutter.

This evolution simplifies developers' control over widget aesthetics and functionality, critical for crafting visually appealing and well-performing Flutter apps. With Widget State Properties, managing widget behavior becomes more intuitive and efficient, empowering developers to create exceptional user experiences.

  1. Dynamic View Sizing

Dynamic view sizing emerges as a game-changing feature enhancing the framework's responsiveness to different screen sizes. This innovation empowers widgets to adapt their sizes dynamically, ensuring consistent and appealing user interfaces across diverse devices, from smartphones to tablets.

Before this update, developers grappled with manually calculating and setting widget sizes for optimal display on various screens. With dynamic view sizing, tools like Expanded, Flexible, and MediaQuery come to the forefront, facilitating layouts that adjust seamlessly to screen dimensions.

For instance, wrapping a widget in an Expanded or Flexible container enables automatic resizing to fill available space, streamlining the creation of responsive designs. Meanwhile, the MediaQuery class enables developers to query the screen size dynamically, ensuring widgets adjust accordingly.

  1. Improved Form Validation

Improved form validation introduces flexible and robust methods for handling user input. These enhancements empower developers with greater control over validating user input, facilitating the implementation of custom validation logic tailored to specific application requirements.

This advancement in validation capabilities fosters a more user-friendly experience by enabling apps to provide accurate feedback when users input invalid data. Moreover, these enhancements bolster security measures, mitigating potential vulnerabilities like injection attacks.

  1. Flavor-conditional asset bundling

Flavor-Conditional Asset Bundling emerges as a pivotal feature empowering developers to streamline asset management across different app versions or "flavors." With this functionality, developers can precisely specify which assets, such as images, fonts, or configuration files, should be bundled based on the app's flavor.

This capability ensures that version-specific assets, such as branding materials or configuration files, are seamlessly included without impacting other app versions. By organizing assets in this manner, developers maintain a cleaner and more organized codebase, simplifying asset management and updates as required.https://docs.flutter.dev/tools/devtools/deep-links

  1. Android - Deep linking & Predictive back gesture

Deep Linking

Deep linking emerges as a pivotal feature enhancing user experience within your app. Deep links serve as seamless shortcuts, guiding users directly to specific content, thereby boosting engagement and driving sales. While Universal Links for iOS and App Links for Android are recommended for their security and user-friendly attributes, setting them up can be complex.

In the latest Flutter stable release, we introduced a deep link validator tool in DevTools, supporting the verification of web configurations for Android apps. In this version, we've enhanced this tool with additional features to streamline verification within your Android manifest files.

For comprehensive guidance on utilizing this tool, refer to our documentation on validating deep links.

Predictive back gesture

Flutter now extends its support for Android's forthcoming predictive back feature, empowering users to peek at the previous route or even the previous app during a back gesture. Although this functionality is currently behind a feature flag on Android devices, you can access detailed instructions on how to try it out yourself on GitHub. Stay ahead of the curve and explore this exciting new feature in Flutter!


  1. Support for using Gradle Kotlin DSL in Gradle build scripts on Android

Flutter now supports Gradle Kotlin DSL, offering an alternative to the conventional Gradle Groovy DSL. This support enhances the code editing experience, boasting features such as auto-completion, quick access to documentation, source navigation, and context-aware refactoring.

This feature was initially contributed by GitHub user Bartekpacia. Developers can now opt to rewrite their Gradle build scripts in Kotlin to leverage these benefits. However, it's important to note that the Flutter tool does not yet provide the option to select Kotlin over Groovy when using Flutter Create.

  1. Platform views improvements

Platform view performance, especially on iOS, has been a significant concern for many Flutter developers, particularly within scroll views when integrating platform views. However, recent updates have directly addressed these challenges, bringing substantial improvements, especially in scenarios like embedding multiple inline ads within an article. Here's a summary of the key enhancements:

  1. Reduced GPU usage: We've achieved a notable 50% reduction in GPU usage, resulting in lower power consumption and potentially smoother user experiences.

  2. Improved frame rendering: Average frame render times have seen a significant decrease of 1.66ms (33% improvement), enhancing overall performance.

  3. Minimized jank: Worst-case frame render times have been reduced by 3.8ms (21% improvement), resulting in fewer instances of stuttering during scrolling.

  1. Vertex AI for Firebase Dart SDK Preview

The Vertex AI for Firebase Dart SDK Preview introduces the Gemini API, empowering developers to seamlessly integrate generative AI features into their Dart or Flutter apps.

Engineered for production-level performance and scalability, this SDK comes with integration capabilities with Firebase App Check, ensuring enhanced security measures. With the SDK, developers can leverage the Gemini API's functionalities, including image and text generation, within their apps.

Available as a preview release at no cost, developers can access the SDK with a promo code, enabling them to explore and test its features before integrating them into their apps.

  1. Google Mobile Ads SDK for Flutter

Exciting news for Flutter app monetizers! Google Mobile Ads for Flutter has just rolled out a significant update to version 5.0.1, packed with exciting features:

Enhanced UMP SDK support: Version 5.0.1 now supports the latest APIs from the Android UMP SDK version 2.2.0 and iOS UMP SDK version 2.4.0. This is crucial for compliance with privacy regulations, streamlining the process of obtaining user consent for personalized ads.

Expanded mediation partners: We've expanded your ad monetization options by integrating with popular ad partners like Unity, Meta, AppLovin, Iron Source, Mintegral, Pangle, DT Exchange, InMobi, and Liftoff. Enjoy increased revenue potential and simplified integration with these expanded mediation options.

We invite you to explore these new features in your Flutter apps and share your feedback with us. Let us know which other mediation partners you'd like to see supported as we continue to enhance the Google Mobile Ads SDK for Flutter. Your input is invaluable to us!

  1. Impeller rendering engine

Dive into the next-generation rendering engine, Impeller, for improved graphics and performance in Flutter apps.

Introducing Impeller, Flutter's cutting-edge rendering engine, aimed at resolving Flutter's early-onset jank issue. Impeller revolutionizes the rendering process by precompiling a streamlined set of shaders at Engine-build time, eliminating the need for runtime compilation.

Key Objectives of Impeller:

  1. Predictable Performance: Impeller ensures predictable performance by compiling all shaders and reflection offline during build time. It establishes pipeline state objects upfront and meticulously controls caching to optimize performance.

  2. Instrumental: Impeller meticulously tags and labels all graphics resources, facilitating the capture and persistence of animations to disk without compromising per-frame rendering performance.

  3. Portable: Impeller isn't tied to a specific client-rendering API, allowing for shader authoring once and conversion to backend-specific formats as needed.

  4. Leverages Modern Graphics APIs: While Impeller leverages features available in modern APIs like Metal and Vulkan, it doesn't depend on them, ensuring flexibility and compatibility across platforms.

  5. Leverages Concurrency: Impeller maximizes performance by distributing single-frame workloads across multiple threads when necessary, leveraging the power of concurrency.

Conclusion

In conclusion, Flutter 3.22 brings forth a plethora of exciting features aimed at enhancing the development experience and elevating app performance. From the Vertex AI for Firebase Dart SDK to the Google Mobile Ads SDK and Gradle Kotlin DSL support, developers are equipped with powerful tools to create innovative and high-performing apps.

Additionally, the Impeller rendering engine, Vulkan backend, and other enhancements contribute to smoother animations, improved user experience, and increased developer productivity. With these advancements, Flutter continues to solidify its position as a leading framework for building cross-platform apps. Explore these top 12 features and witness firsthand how they revolutionize app development, performance, and user satisfaction.