Nov 20, 2023
Flutter 3.16 Updates
What’s new in Flutter 3.16 ? Material 3, Impeller Preview, and DevTools.
Welcome to the latest Flutter stable release, Flutter 3.16. This update brings exciting features and enhancements, including the adoption of Material 3 as the default theme, the introduction of Impeller for preview on Android, and support for DevTools extensions.
Material 3 reflects the latest Material Design specifications and introduces a visual refresh to components and themes. While Material 2 remains available, Material 3 is set as the default, signaling a forward trajectory for Flutter.
Impeller, now available for preview on Android, marks a significant step forward in Flutter's rendering capabilities. Users can experiment with Impeller on Vulkan-capable Android devices, and feedback is encouraged. Impeller's performance and fidelity improvements extend beyond Android, with significant strides in text performance on Android and iOS
Material 3 is the new default
Material 3 is now the default theme for Flutter apps
Material 3, the latest version of Google's Material Design system, is now the default theme for Flutter apps. This means that all Flutter apps will now use Material 3 components and styles by default. You can still opt out of Material 3 by setting the
useMaterial3 theme flag to
false, Material 2 will eventually be deprecated and removed.
How to customize Material 3
The appearance of Material 3 components is primarily determined by the values for
ThemeData.textTheme. The preferred way to create a Material 3 color scheme is with
ColorScheme.fromSeed(), which creates dark and light schemes that are both aesthetically pleasing and compliant with the contrast requirements for accessibility. You can also create a color scheme from the dominant colors in an image with
ColorScheme.fromImageProvider. To further customize the appearance of Material 3 components, add component themes to your
ThemeData, such as
ThemeData.snackBarTheme. Non-null component theme properties override the defaults specified in the component's API documentation.
Support Material 3 motion
Material 3 motion includes the addition of Easing and Durations classes.
In the recent release of Flutter, two new classes, Easing, and Durations, have been introduced to enhance Material 3 motion further. These classes provide developers with greater control over the timing and intensity of animations, allowing them to craft animations that are perfectly aligned with the desired user experience.
Easing Classes for Precise Timing Control
Easing classes enable developers to fine-tune the timing of animations, specifying how an animation should accelerate, decelerate, or maintain a constant speed throughout its duration. This granular control over animation timing allows for creating animations that feel natural, responsive, and aligned with the user's expectations.
Durations Classes for Setting Animation Length
Durations classes provide developers with the ability to define the duration of animations, ensuring that they unfold at the right pace. By adjusting the duration of an animation, developers can create animations that are both visually appealing and functionally effective.
Combined Power of Easing and Durations
By combining Easing and Durations classes, developers can craft highly sophisticated animations that enhance the user experience and make Flutter apps even more engaging. Whether it's a subtle transition between screens or a complex gesture interaction, Material 3 motion provides the tools to bring these interactions to life.
Deprecation of Material 2 Curves
As Material 3 motion evolves, the Material 2 curves, which were previously used to define animation timing, will be deprecated and eventually removed. To ensure compatibility with the latest Material 3 motion guidelines, developers are encouraged to migrate to the new Easing and Durations classes.
Add additional options in the edit menu
Native iOS Text Selection and Context Menu
Flutter apps on iOS now provide a native-looking context menu when users select text. This menu includes options for looking up, searching, and sharing the selected text, providing users with convenient and intuitive options for interacting with text content.
TextScaler for Granular Control over Text Scaling
To support Android 14's non-linear font scaling feature, which caters to the needs of visually impaired users, Flutter introduces the
TextScaler class. This class replaces the deprecated
textScaleFactor property and offers granular control over text scaling, ensuring consistent and optimized text rendering across devices and font sizes.
The author of a
TextScaler subclass should provide a fallback
textScaleFactor. By making
TextScaler also contain the
textScaleFactor information it also makes it easier to migrate: if a widget overrides
MediaQueryData.textScaler in the tree, for unmigrated widgets in the subtree, it would also have to override
MediaQueryData.textScaleFactor, and that makes it difficult to remove
MediaQueryData.textScaleFactor in the future.
Enhanced SelectionArea for Mouse and Touch Gestures
SelectionArea is updated to support native gestures associated with a single or double click using a mouse, and long pressing on a touch device. These new gestures are available by default with
· Single click: Sets the collapsed selection at the clicked position.
· Double click: Select the word at the clicked position.
· Double click + drag: Extends the selection in word blocks.
· Long press + drag: Extends the selection in word blocks.
Improved Menu Focus Management
Menu items that operate on the focused widget
This release features a cleanup of focus changes when using menu items. The
applyFocusChangesIfNeeded function now restores menu focus, ensuring that the user's focus remains consistent when interacting with menus. This enhances the overall navigation experience and ensures that actions are performed on the intended focused widget.
Automatic Reordering of Menu Item Shortcuts for iOS and macOS
Flutter apps on Mac platforms now order the shortcut modifiers in menus to follow Apple Human Interface Guidelines. This provides a consistent and user-friendly experience for macOS users, ensuring that menu shortcuts align with native expectations.
MatrixTransition Animation for Transform-Based Transitions
MatrixTransition widget allows developers to create animated transitions using matrix transformations. Based on the current animation value, you can provide a matrix transformation that is applied to the child widget to create a variety of effects, such as scaling, rotation, and skewing. This opens up new possibilities for creating visually appealing and engaging transitions.
PaintPattern for Validating Paint Calls in flutter_test
The flutter_test package introduces the new PaintPattern class, which allows developers to validate paint calls made to the canvas by widgets like CustomPainters and Decorations in unit tests. This provides a more efficient and reliable way to verify the visual output of widgets, ensuring that they render as intended.
This API previously existed deep in the framework test files, and we noticed some developers found it so useful, that they had copied it into their projects. If this applies to you, you can delete the copy from your project after upgrading to Flutter 3.16.
Scrolling Updates with KeepAlive, Default Focus, and Implicit Scrolling
Building on the two-dimensional scrolling foundation introduced in Flutter 3.13, this release adds support for
KeepAlive widgets, default focus traversal, and implicit scrolling. These enhancements improve the performance and usability of scrollable widgets, making it easier to create smooth and responsive scrolling experiences.
Soon after the 3.13 release, the two_dimensional_scrollables package was published. This package is maintained by the Flutter team, and contains the first of several 2D scrolling widgets built on the framework’s foundation —
TableView. Since the initial release, more decoration and styling support has been added with additional bug fixes
Impeller enabled on Android for preview
Impeller, a high-performance rendering engine developed by Google, is now available for preview on Vulkan-capable Android devices. This preview marks a crucial step towards bringing Impeller to Android, enabling developers to explore its capabilities and provide valuable feedback.
Trying Out Impeller on Android
Flutter developers can easily enable Impeller on their Android devices by passing the
--enable-impeller flag to the
flutter run command. Alternatively, they can add the following setting to the
AndroidManifest.xml file under the
Known Issues and Feedback
While Impeller's Android preview represents a significant step forward, it's important to note that there are a few known issues, as expected with any preview release. Platform views are not yet implemented, and frames that would otherwise include a platform view may experience some performance degradation. Additionally, custom shaders are not yet supported.
The Flutter team is actively working on addressing these issues and welcomes feedback from developers who try out Impeller on Android. Detailed feedback, including specific device and Android version information, along with reproducible test cases, is highly appreciated to help guide the development process.
Impeller performance, fidelity, and stability for both Android and iOS
Impeller Performance, Fidelity, and Stability
In addition to the introduction of Impeller's Android preview, Flutter 3.16 also brings a host of performance, fidelity, and stability improvements for both Android and iOS. These improvements include enhancements to text performance, addressing user-reported fidelity and stability issues, and optimizing the engine for heterogeneous multiprocessing architectures.
While Impeller is still under development, the team has made considerable progress in enhancing its
performance, fidelity, and stability. Significant improvements include:
Text Performance: Optimizing Impeller's glyph atlas management and text workload distribution across UI and raster threads, resulting in reduced jank in text-heavy applications.
Fidelity and Stability: Addressing user-reported fidelity and stability issues, including 209 Impeller-related commits in the flutter/engine repo, closing 217 issues, and addressing 42 user-reported fidelity, stability, or performance issues.
API and Fidelity Improvements
Two notable API and fidelity improvements include:
Impeller Performance Overlay: The performance overlay now displays correctly with Impeller enabled, providing valuable insights into performance characteristics.
Default Dithering: Dithering is now enabled by default, eliminating banding issues and providing a smoother visual experience.
Known Issues and Feedback
As with any preview release, there are a few known issues with Impeller on Android:
Platform views are not yet implemented, and frames that would otherwise include a platform view may experience performance issues.
Custom shaders are not yet implemented.
The Flutter team encourages developers to try out Impeller on Android and provide feedback on the Impeller project board on GitHub. Detailed feedback should include specific device and Android version information, performance comparisons with Skia, and reproducible test cases.
Flutter Games Toolkit - for Games
Flutter Games Toolkit Empowers Developers with Genre-Specific Templates and Service Integrations
The Flutter community has witnessed an explosion in casual game development, with thousands of engaging games built using Flutter's cross-platform capabilities. To empower developers even further, Flutter is launching a major update to its Casual Games Toolkit, featuring genre-specific templates and seamless integrations for essential services like Play Games Services, in-app purchase, ads, achievements, crashlytics, and multiplayer support.
Key Highlights of the Enhanced Toolkit:
Accelerated Development: Genre-specific templates for card games, endless runners, and more.
Effortless Integrations: Integrate essential services to enhance gameplay and user engagement.
Comprehensive Documentation: Detailed guidance and tutorials for a smooth development process.
Flutter 3.16 brings a host of improvements to both web and mobile development, making it even easier to create high-performance, cross-platform applications.
Flutter timeline events on Chrome DevTools
Flutter Timeline Events: Developers can now visualize Flutter Timeline events directly in the performance panel of Chrome DevTools, gaining valuable insights into app performance.
Mouse Scroll Wheel Support: Flutter now offers smooth and responsive scrolling with the mouse scroll wheel on tablets and foldable devices, providing a more consistent user experience across platforms.
Predictive Back Navigation: Flutter now supports predictive back navigation, a new feature introduced in Android 14. This allows users to seamlessly navigate between screens by peeking at the home screen behind their current screen.
iOS App Extensions: Flutter now supports rendering the UI for certain iOS app extensions, such as the Share extension, using Flutter widgets. This expands the possibilities for creating interactive and engaging iOS app extensions.
Flutter 3.16 introduces a range of enhancements to the package ecosystem and developer experience, making it even more seamless to build and maintain Flutter applications.
Package Ecosystem Highlights
New Flutter Favorites: The Flutter Ecosystem Committee has recognized seven outstanding packages, namely flame, flutter_animate, flutter_rust_bridge, riverpod, video_player, macos_ui and fpdartt, as new Flutter Favorites. These packages demonstrate exceptional quality and innovation, contributing significantly to the Flutter ecosystem.
First Package Ecosystem Virtual Summit: A successful virtual summit brought together over 50 contributors to pub.dev, fostering collaboration, knowledge sharing, and planning for future initiatives. This event highlights the thriving package ecosystem and its commitment to community engagement.
Cloud-based Google Maps Styling: Developers can now customize the styling of their Google Maps directly from the Google Cloud Console, enabling seamless style updates without modifying app code. This cloud-based approach simplifies the process and enhances flexibility.
To use this feature in Flutter, you simply refer to your map using the Map ID set in the console:
Camera X Improvements: The Camera X plugin, which simplifies camera integration for Android apps, has received significant enhancements. It now supports a broader range of features and addresses limitations of the Camera 2 implementation. Developers are encouraged to adopt Camera X for enhanced camera functionality.
macOS Video Player: The
video_player pluginnow supports macOS, enabling developers to play videos on macOS widgets. This expands the plugin's capabilities and caters to a wider range of platforms.
These enhancements demonstrate Flutter's commitment to providing a robust and supportive package ecosystem that empowers developers to create exceptional applications.
Super tiny code optimization: A tiny code optimization removes redundant value checks, improving performance.
Autocomplete enhancements: Autocomplete now supports options for opening the view direction, enhancing user interaction.
Framework updates: Various framework updates improve stability and performance, including leak detection enhancements and documentation updates.
Engine improvements: Impeller on Android enters preview, offering performance and fidelity improvements. Text performance and overall engine stability also receive enhancements.
The new DevTools extensions framework enables:
package authors to build custom tooling for their package that is surfaced directly in DevTools.
package authors to write powerful tools that leverage existing frameworks and utilities from DevTools.
Dart and Flutter developers who are debugging an app with DevTools to get access to tools that are specific to their use cases (as determined by their app’s dependencies and which dependencies provide DevTools extensions).
Some highlights for DevTools with this release are:
Added support for DevTools extensions
Added a new “Home” screen that shows a summary of your connected app.
Other improvements include:
Hot restart robustness
Text selection and copy behavior
Network profiler response viewer polish
VS Code UI discoverability
Thanks to the amazing work by Flutter community member DanTup, the Flutter VS Code extension now has a Flutter Sidebar that gives you easy access to:
Open Flutter DevTools screens
View active debug sessions
View available devices
Create new projects
Hot reload and restart
Run Flutter Doctor -v
Deprecations and breaking changes
Breaking changes in this release include deprecated APIs that expired after the release of v3.13. To see all affected APIs, along with additional context and migration guidance, see the deprecation guide for this release. Many of these are supported by Flutter fix, including quick fixes in the IDE. Bulk fixes can be evaluated and applied with the
dart fix command.
In our next release, we will be planning to extend the deprecation policy to cover the
flutter_driver package in addition to already supported packages,
DevTools extensions: Custom tools directly integrated into DevTools for enhanced debugging and development.
Flutter Casual Games Toolkit: Substantial updates with genre-specific templates and service integrations.
Exposure of Flutter Timeline events in Chrome DevTools: Improved insights for debugging performance on web apps.
Predictive back navigation: Enhanced user experience on supported devices.
Expanded iOS app extension support: New opportunities to contribute to various aspects of iOS app development.
New Flutter Favorites: Designated by the Flutter Ecosystem Committee.
Thread affinity improvements: Better performance on mobile devices with heterogeneous multiprocessing.
Deprecations and breaking changes: Developers are encouraged to review the deprecation guide for detailed information and migration guidance.
Flutter 3.16 delivers a significant step forward in the evolution of the framework, providing developers with even more powerful tools to build beautiful, performant, and engaging applications across platforms. With its commitment to continuous improvement and a thriving community of contributors, Flutter continues to be the go-to choice for cross-platform app development.