Flutter 3.24: What's New

Flutter GPU preview for advanced graphics and 3D, Multi-View Embedding support in web apps, video ad monetization.

Flutter Developer Team Friflex shares the translation of the official release new version of the framework.

Flutter

New Slivers

Added sliders that can be combined together to make the app bar behave dynamically:

You can use the new sliders to make floating headers stay fixed or resize as the user scrolls the page.

The new sliders are similar to the old ones, SliverPersistentHeader And SliverAppBarbut they have simpler APIs.

New sliders have new sample code. In API documentation PinnedHeaderSliver There is an example that recreates the effects as seen in the iOS Settings app panel.

Cupertino library update

Increased accuracy CupertinoActionSheet. Sliding your finger across the action button now provides tactile feedback. Button font size and weight now match their native counterparts.

Added new properties for working with focus for CupertinoButton (focusNode, focusColor, onFocusChange, autofocus). You can also now customize the color of the disabled CupertinoTextField.

TreeView

At the package two_dimensional_scrollables widget appeared TreeView along with several helper classes that allow you to create high-performance scrolling trees. They can be scrolled in all directions as they grow. The update includes several examples of how to use widgets TableView And TreeView.

Added TreeSliverto build trees in one-dimensional scrolling API TreeView And TreeSliver match. Switching between them has become easier. You can choose the widget that suits your use case.

CarouselView

The update introduced CarouselView — widget for Material Design Carousel. He is Infinite list of elements: A list of items that can be scrolled to the edge of the container. The edge items can be dynamically resized as you scroll.

Other widget capabilities

The following widgets have been moved from the Material library to the Widgets library:

• Widget Feedback – Provides easy access to haptic and audio feedback from the device in response to gestures such as pressing.

Advanced Features for AnimationStatus

Thanks to the fantastic contribution of @nate-thegrate, advanced features have been added for AnimationStatus:

• isDismissed;

• isCompleted;

• isRunning;

• isForwardOrCompleted.

Some of these recipients already exist in animation subclassesFor example, AnimationController And CurvedAnimation. Now getters are available in animation subclasses in addition to AnimationStatus. A method has been added to AnimationController toggleso that you can switch animation directions.

Updates in SelectionArea

SelectionArea now supports more native gestures that are related to triple-clicking a mouse and double-tapping a touch device. Widgets SelectionArea And SelectableRegion use new gestures by default.

Triple click

• Triple-click + drag: Expands the selection within paragraph blocks.

• Triple click: Selects the paragraph block at the tapped position.

Double tap

• Double tap + drag: Expands selection in word blocks. Supported on native Android/Fuchsia/iOS and iOS web.

• Double tap: Selects the word at the tapped position. Supported on native Android/Fuchsia/iOS and Android/Fuchsia web.

Engine

Increased productivity and accuracy

We are still waiting for the “Opt out of Impeller on iOS” option to be removed in the stable version. In the meantime, the team has been hard at work improving Impeller's performance and accuracy. For example, text rendering has increased emoji scrolling performanceTo achieve this, we eliminated lag when scrolling through a large collection of emoji, which was a great stress test for Impeller's text rendering capabilities.

The team has improved the accuracy of Impeller's text rendering. Specifically, text weight, spacing, and kerning are now fully consistent with the quality of text rendered using the legacy renderer.

Android Preview

Impeller Android preview has been extended due to errors in android 14. It affects the APIs that Impeller uses for Platform Views. The bug was fixed by the Android team, but for the foreseeable future, many deployed devices will be running an unpatched version of Android. To resolve this issue, additional API migration is needed, and therefore an additional stable release cycle. To ensure Flutter apps work on the widest possible range of devices, we decided to delay Impeller becoming the default renderer. It will appear in a stable release later this year.

Improved default values ​​for low-resolution images

Meaning FilterQuality default changed from FilterQuality.low on FilterQuality.medium for images. When they are significantly larger than their target rectangle, which is considered normal, FilterQuality.low makes them more pixelated and slows down rendering. FilterQuality.medium there are no such problems. In the future, the team will consider suitable names for different levels FilterQuality.

Flutter GPU Preview

There's a major update to Flutter GPU rendering capabilities, available on the main channel. This low-level graphics API lets you create custom renderers using Dart code and GLSL shaders, without the need for native platform code.

Flutter GPU expands rendering capabilities and enables improved graphics and 3D scenes. It requires Impeller rendering, which is currently supported on iOS, macOS, and Android. In the early preview, Flutter GPU aims to support all Flutter platforms.

The API provides full control over render pass bindings, vertex stage, and GPU data loading. This flexibility is needed to create complex rendering solutions: from 2D character animations to complex 3D scenes.

To get started with Flutter GPU, you need to switch to the main channel and add the flutter_gpu package to your projects.

New features and stability improvements are planned for the coming months, and higher-level rendering libraries like flutter_scene will make working with new features easier.

To dive deeper into Flutter GPU and learn how you can use it, read on Flutter GPU blog.

Web

Multi-view embedding

Flutter web apps can now use multi-view embedding to display content in multiple HTML elements at the same time. The feature offers flexibility for integrating Flutter views into web apps.

In multi-view mode, a Flutter web app does not display immediately upon startup. Instead, it waits for the host app to add the first View using the addView method. The host app can dynamically add or remove these views, and Flutter adjusts its widgets accordingly.

To enable multi-view display mode, set multiViewEnabled: true in the method initializeEngine in file flutter_bootstrap.jsViews can be manipulated from JavaScript, adding them to HTML elements and removing them as needed. Flutter updates after each action on a view, allowing content to be displayed dynamically.

The feature is useful for integrating Flutter into complex web applications where multiple independent Flutter views are required. It also supports custom initialization data for each view. Developers can set up customized configurations and interactive experiences.

For a deeper dive into implementing multi-view embedding in Flutter web apps, check out documentation.

Monetization

Support for video ad monetization

New plugin Interactive Media Ads (IMA) supports monetization of video ads in mobile applications on Flutter. IMA complements the plugin Google Mobile Ads (GMA)which mainly supports display advertising formats.

Inline video ads are typically shown in a video player before (pre-roll), during (mid-roll), or after (post-roll) content playback. Some inline video ads can be skipped by the user.

Benefits of Flutter IMA

• Seamless monetization of video content in Flutter apps. For example, you can show the user a 15-second ad before the video starts.

• Benefits of the native IMA SDK. The developer will have access to Google premium advertising. The plugin complies with industry standards such as IAB VAST.

The initial version currently supports pre-roll format on Android and iOS platforms. Mid-roll format support will be available soon. If you encounter any problems with the IMA plugin, please write here.

Resources: Plugin guide, Sample App, Git Repository.

iOS

Initial support for Swift Package Manager

Flutter uses CocoaPods to manage dependencies for native apps on iOS and macOS.

Flutter 3.24 introduces initial support for Swift Package Manager, which offers several benefits:

1. Flutter plugins will be able to use Swift Package Ecosystem.

2. Easy installation of Flutter. Swift Package Manager is included with Xcode. In the future, you will not need to install Ruby and CocoaPods to use Flutter for Apple platform.

You can try adding Swift Package Manager support in your plugins and share your feedback Here.

Ecosystem

Shared Preferences Plugin Updates

Added two new APIs to the plugin shared_preferences: SharedPreferencesAsync And SharedPreferencesWithCache. An important change is that the Android implementation uses Preferences DataStore instead of Shared Preferences.

SharedPreferencesAsync allows you to directly access the platform to get the latest settings stored on the device. This method is asynchronous and slow compared to the cached version. It is useful for settings that may be updated by other systems or isolates.

SharedPreferencesWithCache built on the basis SharedPreferencesAsync. It allows users to synchronously access a locally cached copy of settings. SharedPreferencesWithCache similar to the old API, but now it can be instantiated multiple times with different parameters.

The new APIs are intended to replace the current API. SharedPreferences in future. SharedPreferences — one of the most used plugins in the ecosystem. So it will take time to migrate to new APIs.

DevTools and IDEs

If you've ever wondered if your Flutter app is building more widgets than expected, a new feature in DevTools Performance will answer this question. With the help of Rebuild Stats You can find out how many times a widget was built in the app or even in which Flutter frame.

Fixed critical errors in Network profiler And Flutter Deep Links tool and made general improvements. Now you can use all the DevTools right inside the IDE.

We've improved the Flutter sidebar in VS Code to make it easier to access the tools you need. Update to the latest versions of VS Code and the Flutter and Dart extensions.

There are updates in DevTools Extensions. You can now use DevTools extensions when debugging Dart or Flutter tests, or just writing code in the IDE. If you've ever wanted to use a tool (or create one!) for one of these custom tasks, you can now.

To learn more about all the updates in Flutter 3.24, check out the DevTools release notes 2.35.0, 2.36.0 And 2.37.2.

Breaking Changes and End of Support

Critical changes have occurred Navigator Pages API, generic types in PopScope, default renderer for Flutter web. A full list of migration recommendations can be found at page with critical changes.

For more details on the update, read on release notes And changelog.