What's new in Flutter 3.24?
Hello, Amigos! This is Pavel Gershevich, Mobile Team Lead of the Amiga product development agency. We have translated it for you in tornado mode article about the new features in Flutter 3.24: Flutter GPU, Multi-View Embedding and much more. And they also left some enthusiastic comments about the widgets that have been long awaited!
This release introduces a preview of Flutter GPU, which enables advanced graphics and 3D scenes directly from Flutter. Web apps can now embed multiple Flutter Views, increasing their flexibility. And we’ve added monetization with video ads to maximize your revenue.
Let's dive into the new update and explore all the features and improvements the Flutter community has brought!
Come and discuss innovations in Flutter. A lot..
Flutter Framework
New Slivers
This version adds new slivers that can be combined for dynamic app bar behavior:
The new slivers help make headings floating, sticky, or resizable on scroll. The new slivers are similar to the existing ones. SliverPersistentHeader And SliverAppBarbut have a simpler API that can be combined to achieve cool effects.
The new slivers come with new code examples. The PinnedHeaderSliver API documentation includes an example that recreates the effect found in the iOS Settings app bar:
New slivers will allow not to use some libraries, but to transfer this functionality to vanilla Flutter. For example, if we need persistent headers.
Updates in the Cupertino library
This update has improved accuracy. CupertinoActionSheet. Swiping across action sheet buttons now provides haptic feedback. Button font size and weight match native ones.
Also new focus properties have been added CupertinoButtonand now you can customize the color of the disabled CupertinoTextField.
The Cupertino library update is currently in development, so more information will be available in future releases!
TreeView
In the package two_dimensional_scrollables widget added TreeView along with several companion classes to create performant scroll trees that can scroll in all directions as the tree grows.
The sample app from the package has also been updated to include several widget use cases. TableView And TreeView.
A widget has also been added TreeSliver for creating trees in a one-dimensional scroll. The TreeView and TreeSliver APIs are the same, making them easy to replace.
CarouselView
This update includes a widget Carousels from Material Design: CarouselView. It is a “Uncontained» layout: a scrolling list of items that scrolls from the edge of the container, and the previous and next items can change their size dynamically as they disappear or appear on the screen.
More functionality for already available widgets
This release contains some work to move core widget logic that is independent of design from the Material library to the Widgets library for more frequent use. Including:
Widget Feedbackwhich provides easy access to haptic and audio feedback from the device and is responsible for actions such as pressing, holding, and more.
ToggleableStateMixin And ToggleablePainter base classes for creating switchable widgets such as checkboxes, switches, and radio buttons.
Improvements to enum functions for AnimationStatus
This is a fantastic addition from a community member. @nate-thegrateimprovements to enum functions have been added in AnimationStatusincluding getters:
isDismissed,
isCompleted,
isRunning,
isForwardOrCompleted.
Some of these getters already existed in subclasses AnimationFor example AnimationController And CurvedAnimation. Now all of them are available in Animation subclasses, as well as in AnimationStatus. Method toggle was added to AnimationController to change the direction of the animation.
Updates in SelectionArea
Widget SelectionArea now supports more native triple-click and double-tap gestures. By default, widgets SelectionArea And SelectableRegion use these new gestures.
Triple click
Triple click + drag: Enlarges the selected area in the paragraph.
Triple click: Selects the entire paragraph block at the location you clicked.
Double tap
Double tap + drag: Zooms in on selected words (supported on native Android/Fuchsia/iOS and iOS web).
Double tap: Selects the word where you tap (supported on native Android/Fuchsia/iOS and Android/Fuchsia web).
Engine
Impeller
Impeller Performance and Precision
In anticipation of the Impeller toggle disappearing on iOS in the upcoming release, a lot of work has been done on performance and fidelity improvements. As one example, a long series of text rendering improvements significantly increased emoji scrolling performanceeliminating jank when scrolling through large emoji collections, which was a great stress test for Impeller's text rendering capabilities.
Besides this, with solving a number of issuesImpeller's text rendering accuracy has been greatly improved. Text boldness, indents, and kerning are now fully consistent with the previous renderer.
Android Preview
The preview period has been extended due to complications arising from a bug in Android 14 that impacts the APIs used by Impeller for Platform Views. The Android team has since fixed the bug, but many deployed devices will be running an unpatched version of Android for the foreseeable future. Dealing with these issues means additional API migrations and therefore an additional release cycle. Out of an abundance of caution, and to ensure Flutter apps work on as many devices as possible, Impeller is being delayed from becoming the default renderer until a stable release later this year.
As the Impeller preview on Android continues to run on the 3.24 stable release cycle, developers should update to the latest stable release and report any issues they notice when enabling Impeller.
Improved default settings for thumbnails
In this release, the default FilterQuality for images has changed from FilterQuality.low to FilterQuality.medium. When an image is much larger than its location, FilterQuality.low produces a more pixelated image and is slower to render than FilterQuality.medium. Going forward, more appropriate names will be given to the different FilterQuality levels.
Flutter GPU Preview
This is a major update to Flutter's rendering capabilities, with Flutter GPU available in the main channel. This low-level graphics API allows developers to create custom renderers using Dart code and GLSL shaders without having to write native code.
Flutter GPU extends Flutter’s rendering capabilities, including advanced graphics and 3D scenes. It requires the use of Impeller, which is currently available on iOS, macOS, and Android. Flutter GPU aims to eventually support all platforms that Flutter runs on.
The API allows full control over the rendering pass nesting, vertex stage, and data that is sent to the GPU. The flexibility is necessary to create complex rendering solutions, from 2D character animations to complex 3D scenes.
You can start using Flutter GPU by switching to the main channel and adding the flutter_gpu package to your project. More functionality and stability improvements will be coming in the coming months with higher-level rendering libraries like flutter_scene that make it easier to use advanced features.
More details about Flutter GPU in article. It will be especially useful for developers of games or complex graphics.
Web
Embedding multiple views
Flutter web apps can use multi-view embedding, which allows developers to render content into multiple HTML elements at once. This feature, known as “embedded mode” or “multi-view,” adds flexibility to integrating Flutter views into an existing web app.
In multi-view mode, a Flutter web app is not rendered immediately after 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 such views, and Flutter will adjust its widgets accordingly.
To enable multi-view mode, add multiViewEnabled: true to the initializeEngine method in the flutter_bootstrap.js file. Views can be controlled from JavaScript, adding them to the desired HTML elements and removing them if necessary. Each addition or removal of a view triggers an update inside Flutter, allowing content to be rendered dynamically.
This feature is especially useful for integrating Flutter into complex web applications where multiple independent Flutter views are required. It also supports custom initialization data for each view, enabling personalized configurations and interactive experiences.
For a deep dive into adding multi-view to a Flutter app, check out documentation.
Monetization
Support for video ad monetization
New plugin launched Interactive Media Ads (IMA) to support monetization of streaming video ads in Flutter mobile apps. IMA provides new capabilities on top of the existing Google Mobile Ads plugin, which supports other ad formats.
Streaming video ads are typically shown to the user in the video player before (preroll), during (midroll), or after (postroll) the video is viewed. Some streaming video ads are also skippable.
Pros of Flutter IMA:
Easily monetize video player content in Flutter apps. For example, when an app user clicks the play button for video content, they will first be shown a 15-second ad.
Same benefits as the native IMA SDK, including access to Google's premium ad demand and compliance with industry standards (e.g. IAB VAST).
The first version only supports pre-roll video ads on Android and iOS. Midroll ad support will be added soon.
Resources: Plugin Guide, example application, git repository
iOS
Swift Package Manager Support
Flutter currently uses CocoaPods to manage native iOS and macOS dependencies.
Flutter 3.24 adds early support for Swift Package Manager. This adds several benefits, including:
Access to the Swift package ecosystem. Flutter plugins will be able to use a growing ecosystem of packages Swift!
Simplifying Flutter installation. Swift Package Manager is built into Xcode. In the future, you won't need to install Ruby and CocoaPods to use Flutter for Apple platforms.
Ecosystem
Shared Preferences Plugin Update
Added 2 new APIs to the plugin shared_preferencesSharedPreferencesAsync and SharedPreferencesWithCache. The most important change is that on Android, the Preferences DataStore is now used instead of Shared Preferences.
SharedPreferencesAsync allows users to call platform code immediately to access data stored on the device asynchronously, which is slightly slower than using a cached version. This is useful for preferences that may be updated by other systems or isolates, making the cache out of date.
SharedPreferencesWithCache works on top of SharedPreferencesAsync and allows access to a local copy of preferences synchronously. It is similar to the old API, but can now be initialized multiple times with different parameters.
The new APIs are intended to replace the current SharedPreferences API in the future, although it is one of the most used plugins in the ecosystem.
DevTools and IDEs
The release includes some interesting improvements to the Flutter DevTools suite.
The new Rebuild Stats feature will help you get information about how many times a widget was built in an app on a specific Flutter frame.
Fixed bugs and critical issues in tools like Network Profiler and Flutter Deep Links tool. Plus, you can use any DevTools directly inside the IDE.
We've made improvements to the Flutter Sidebar in VS Code to make it easier to access the tools you need. The new Sidebar will be available when you update to the latest versions of VS Code and the Dart and Flutter extensions.
Several major improvements have been made to the framework DevTools ExtensionsYou can now use DevTools extensions (tools provided by one of the package's dependencies) when debugging a Dart or Flutter test, or simply when writing code in the IDE.
More information in the DevTools release notes 2.35.0, 2.36.0 And 2.37.2.
Breaking Changes and Deprecated Features
Breaking changes in this release include: Navigator Pages API, generic types in PopScope, Flutter Web default renderer and the introduction of some new legacy features. A full list of migration recommendations can be found at critical changes page.
Conclusion
The full list of additions in Flutter 3.24 is available at notes And change log.
And Flutter 3.24 and Dart 3.5 are available in the stable channel. Happy coding, everyone!
Translation prepared by the Amiga mobile development team. More about Flutter development in the telegram channel Flutter. A lot..
