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

Framework

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.colorScheme and 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.segmentedButtonTheme or 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.

Why TextScaler.textScaleFactor
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 updates

Flutter’s 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 SelectionArea and SelectableRegion.

·         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 FocusManager's 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

The new 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.

expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
);
// Multiple paint calls can even be chained together.
expect(
  find.byType(MyWidget),
  paints
    ..circle(
      x: 10,
      y: 10,
      radius: 20,
      color: const Color(0xFFF44336),
    ),
    ..image(
      image: MyImage,
      x: 20,
      y: 20,
    ),
);

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

Engine

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 <application> tag:

<meta-data
  android:name="io.flutter.embedding.android.EnableImpeller"
  android:value="true" />

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.

Games

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.

Web

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.

  

Android

• 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

• 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.

  

Package Ecosystem

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:

  GoogleMap(
          onMapCreated: _onMapCreated,
          initialCameraPosition: const CameraPosition(
            target: _kMapCenter,
            zoom: 7.0,
          ),
          key: _key,
          cloudMapId: _mapId
  );

• 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.

  Dependencies:
   camera: ^0.10.4 # Or try the latest camera version
   camera_android_camerax: ^0.5.0

• macOS Video Player: The video_player plugin now supports macOS, enabling developers to play videos on macOS widgets. This expands the plugin's capabilities and caters to a wider range of platforms.

  To learn more check out the video player plugin on pub.dev.

These enhancements demonstrate Flutter's commitment to providing a robust and supportive package ecosystem that empowers developers to create exceptional applications.

Additional Updates

• 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.

DevTools

DevTools extensions

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).

Thanks to the package authors of Provider, Drift, and Patrol, this ecosystem is already being built out and you can use the DevTools extensions for those packages today!

For a deep dive into DevTools extensions, check out the Dart and Flutter DevTools Extensions announcement by Kenzie Davisson.

DevTools updates

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:

• Overall performance

• Hot restart robustness

• Text selection and copy behavior

• Network profiler response viewer polish

To learn more, check out the release notes for DevTools 2.26.1, 2.27.0, and 2.28.1.

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

• Much more

  

  
  

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.

As always, many thanks to the community for contributing tests — these help us identify these breaking changes. To learn more, check out Flutter’s breaking change policy.

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, flutter and flutter_test.

Additional Enhancements

• 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.

Conclusion

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.