What’s new in Flutter 3.19 — Flutter latest release

Empowering App Development with Google Gemini API, Impeller Improvements, & Windows Arm64 support in Flutter.

After 3 months, the Flutter team finally stepped forward from “3.16” towards “3.19” stable release bringing so many improvements and new features in hand. In this blogpost we will try to learn and understand the latest things from visual and code examples. So, before it gets too late let’s dive in.

So, According to our friendly Kevin Chisholm , Flutter 3.19 brings a new Dart SDK for Gemini, a widget enabling developers to add fine-grained control to widget animations, a rendering boost with updates to Impeller, tooling to help implement deep links, Windows Arm64 support and so much more!

Watch the video or continue reading the blogpost.

AI integration into Dart SDK

“The Google AI Dart SDK” and its currently in beta version, This enables you to build generative AI features into your Dart or Flutter app, powered by Gemini, Google’s latest family of AI models. You can utilize this google_generative_ai package in the pub_dev to integrate ChatBot functionality in your flutter app.

The approach to this is very simple, using that package, a simple string prompt, and provide it to the in-built generateContent() method, and there you go. In your flutter app you can take this prompt from a text field and after it’s been submitted, call the generateContent() method and display the generated content as an AI response to build your own Text Generating ChatBot.

In order to see the following Flutter ChatBot using google_generative_ai package, code example in action copy and paste it directly to the DartPad .

Framework improvements & features

Scrolling improvements

Previously, dragging with two fingers would actually double the scroll speed compared to using a single finger. This behavior didn’t align with native platform expectations, potentially causing confusion.

Flutter 3.19 steps in to fix this by making scrolling agnostic to the number of fingers used by configuring default ScrollBehavior with MultiTouchDragStrategy.latestPointer. This means you’ll get the same smooth, predictable scrolling speed regardless of whether you’re using one, two, or even more fingers.

But fear not, customization is still king in Flutter! If you preferred the old behavior, you can easily opt back in by configuring the ScrollBehavior using the MultiTouchDragStrategy.sumAllPointers option. For more info see migration guide .

Other improvements on scrolling includes:

• SingleChildScrollView and ReorderableList: Numerous bug fixes address reported crashes and unexpected behavior, ensuring these widgets scroll smoothly and reliably.
• Two-Dimensional Scrolling: An issue where dragging or tapping during ongoing scrolling would lead to unexpected behavior has been resolved, resulting in a more intuitive and responsive experience.

Flutter AnimationStyle widget

This powerful tool, championed by community member @TahaTesser , empowers you to override the default animation behavior in various widgets like MaterialApp, ExpansionTile, and PopupMenuButton.

Here is an example where popup menu curve and transition duration is overridden:

popUpAnimationStyle: AnimationStyle(
  curve: Easing.emphasizedAccelerate,
  duration: Durations.medium4,
),        

Set AnimationStyle.noAnimation to disable animation.

   return MaterialApp(
      themeAnimationStyle: AnimationStyle.noAnimation,        

Checkout this pull request for more info on AnimationStyle widget.

SegmentedButton.styleFrom static method

The Flutter framework introduces a new update to the SegmentedButton widget, a feature that underscores the framework’s commitment to consistency and ease of use across its UI component library. This update, contributed by Flutter community member @AcarFurkan , enriches the SegmentedButton with a new method: SegmentedButton.styleFrom. This addition harmonizes the SegmentedButton with other button types within Flutter, offering developers a familiar and streamlined way to customize button styles.

Below is the example of SegmentedButton.styleFrom static method:

Switch.adaptive constructor

In the latest Flutter 3.19 release, an intriguing update has been introduced to enhance cross-platform UI consistency and native aesthetics: the Adaptive Switch. This update is particularly noteworthy for developers aiming to deliver a seamless user experience across iOS, macOS and other platforms without leaning heavily on the Cupertino library for Apple-like UI elements. The Adaptive Switch is a Flutter widget designed to automatically adjust its appearance to match the native look and feel of the platform it runs on.

Below is the example of Switch.adaptive constructor in flutter:

Switch.adaptive(
  value: _isSwitched,
  onChanged: (bool newValue) {
    setState(() {
      _isSwitched = newValue;
    });
  },
)        

SemanticsProperties accessibility identifier

Semantics refers to the meaning or interpretation of something. In UI development, semantics pertains to conveying the meaning and purpose of UI elements to users and assistive technologies.

The new accessibility identifier added to SemanticsProperties is a game-changer for enhancing the accessibility of Flutter applications. It provides a unique identifier for each semantic node in the native accessibility hierarchy, bridging a crucial gap in accessibility features offered by Flutter.

On Android, the accessibility identifier is manifested as resource-id in the accessibility hierarchy, while on iOS, it sets the UIAccessibilityElement.accessibilityIdentifier. This deep integration with native platform accessibility features ensures that Flutter apps can leverage the existing screen readers and accessibility tools effectively, providing a seamless experience for users with disabilities.

Implementing accessibility identifier

Semantics(
  child: YourWidget(),
  properties: SemanticsProperties(
    accessibilityIdentifier: 'your_unique_identifier_here',
  ),
)        

In this snippet, YourWidget is wrapped in a Semantics widget, where you specify the accessibilityIdentifier within the SemanticsProperties. This identifier should be unique to ensure that accessibility tools and testing frameworks can precisely target the semantic node.

MaterialStatesController enhancing access to text widget state

There’s a new feature that introduces a statesController property to TextField and TextFormField for handling MaterialState changes through a MaterialStatesController, it represents a significant advancement in how developers can interact with the state of text fields. This feature would allow for more dynamic responsiveness in UI components based on their state (e.g., focused, hovered, pressed).

Here’s an example of MaterialStatesController.

In order to see the following MaterialStatesController code example in action, copy and paste it directly to the DartPad .

Flutter Engine Android OpenGL

As always, Flutter this time too, brings performance improvements by updating the Flutter engine. The key points below highlights Flutter Engine Android OpenGL improvements:

• Almost all Android devices supported: Thanks to the focus on OpenGL, Impeller now covers nearly all Android devices, extending its reach beyond Vulkan’s 77% share.
• MSAA for sharper visuals: The addition of Multisample Anti-Aliasing (MSAA) ensures smoother text and graphics, enhancing the visual quality of your Flutter apps.
• Feature parity on the horizon: While a few features like custom shaders and full external texture support are still in progress, Impeller is rapidly approaching complete functionality on both Vulkan and OpenGL backends.

Android improvements

Flutter deep linking validator

A deep linking validator has been added in Flutter 3.19 for android. Deep linking is when you’re browsing a website on your phone, and you click a link that takes you directly to a specific page in a mobile app. That’s deep linking, But sometimes, setting up deep linking can be tricky and frustrating.

This is where the new Deep Link Validator comes in. It’s like a helpful assistant that checks if your deep linking setup is working correctly. No more guessing or struggling!

The current version focuses on Android specifically. It basically looks at a file called “assetlinks.json”. This file tells the system how your app handles deep link.

To use that Deep Link Validator

1. Open Flutter DevTools, which is a handy debugging tool for Flutter apps.
2. Click on the “Deep Links” tab.
3. Import your Flutter project with deep links set up.
4. The Validator checks your “assetlinks.json” file and tells you if everything is configured correctly.

Android default share button

The default Share button on text fields and views was previously missing from Android, but now it’s added in this release as part of the ongoing effort to ensure all the default context menu buttons are available on each platform.

• More natural text spacing: Flutter now aligns with Apple’s design guidelines, using a tighter spacing for larger fonts instead of the previously used, wider spacing. This creates a more compact and visually balanced appearance that’s consistent with native iOS apps.
• Enhanced readability: While tighter spacing might sound concerning, remember that Apple’s guidelines factor in mobile viewing distances. This subtle adjustment improves readability for larger text sizes, ensuring your content remains clear and accessible.
• Default behavior change: This improvement is now the default behavior for Flutter apps on iOS.

Conclusion

There are more updates and improvements on DevTools, Windows Arm64 support, and some platforms are now deprecated in Flutter. In order to get familiar with everything checkout either Kevin Chisholm’s blogpost on Medium or latest release notes on Flutter 3.19.

At the end, a very big thanks to the intelligent flutter official team and the hardworking community members who’s proving us right for choosing flutter for app development and as a professional career choice.

Thanks for being in touch with me until now, follow me in order to be updated with comprehensive flutter latest updates.

Let’s connect:

LinkedIn: https://www.dhirubhai.net/in/muhammad-adnan-23bb8821b/

GitHub: https://github.com/AdnanKhan45

Instagram: https://www.instagram.com/dev.adnankhan/