Flutter 3.16: what’s new

Material 3 default theme, Impeller Android preview, DevTools extensions and more. Our Flutter Team Lead Yuri Petrov, author YouTube channel “Yuri Petrov | Everything about IT”, shares the first translation of the official release from Google. Let’s see what has been added and improved in the framework in the three months since release Flutter 3.13.

Flutter

Material 3 – default

As of version 3.10 (May 2023), the Material library has been updated to the latest Material Design specification. Changes include new components and component themes, as well as updated component visuals. Before release 3.16, the use of the Material 3 theme was optional and was installed via the flag: useMaterial3: true.

The new version uses the Material 3 theme by default (#130764). You can still opt out of the Material 3 version of the material library by specifying the flag useMaterial3:false in your MaterialApp topic, but keep in mind that Material 2 will eventually become obsolete and be removed.

In addition, some widgets could not simply be updated; they required a completely new implementation. For this reason, your UI may look a little strange when you see it running like Material 3. To fix this, manually upgrade to new widgets like NavigationBar. More detailed information on Material3 can be found at GitHub.

Demo application will allow you to try out all the components. The demo version supports switching to Material 3, so you can compare changes.

The appearance of Material 3 components is mainly determined by the values [ThemeData.colorScheme] And [ThemeData.textTheme]. The preferred way to create a Material 3 color scheme is to use the method ColorScheme.fromSeed(). It creates dark and light schemes that are both aesthetically pleasing and meet contrast requirements for accessibility.

You can also create a color scheme based on the dominant colors in an image using ColorScheme.fromImageProvider. To further customize the appearance of Material 3 components, add component themes to your ThemeDatasuch as ThemeData.segmentedButtonTheme or ThemeData.snackBarTheme. Non-null components override the default values ​​specified in the API documentation.

Animation support in Material 3

Material 3 animation improvements include the addition of classes Easing And Durations. Curves Material 2 has been renamed to include the word “legacy” and will eventually be deprecated and removed. (#129942)

Adding More Options to the Edit Menu

On native iOS, users can now select text and launch a sharing menu that provides several standard services. This update adds options for searching, retrieving, and sharing.

TextScaler to specify a global text scaling factor

For support non-linear font scaling functions in Android 14, which helps people with visual impairments, a new class TextScaler replaces property Text.textScaleFactor. (#128522)

Updates in SelectionArea

Class SelectionArea Flutter has been updated to support native single-click, double-click, and long-press gestures on touchscreen devices. These new gestures are available by default when you use SelectionArea And SelectableRegion.

• Single click: Sets a collapsed selection where you click.

• Double-click: Select the word where you clicked.

• Double-click + drag: Expands selection in word blocks.

Long press + drag: Expands selection in word blocks.

Menu elements that work with the active widget

This update improves the ability to clear focus changes when using menu items: a feature applyFocusChangesIfNeeded V FocusManager now restores menu focus. When the user clicks on a menu item, focus will already be set to the item that had focus before the menu was opened. (#130536)

Animation MatrixTransition

New widget MatrixTransition Allows you to perform transformations when creating animated transitions. Based on the current animation value, you can provide a matrix transformation that is applied to the child widget to create effects like those shown in the following GIF. (Example in DartPad). (#131084)

PaintPattern added to flutter_test.

In the package flutter_test a new class has been added PaintPatternwhich allows you to check draw calls made on the canvas by widgets such as CustomPainters And Decorations (used in unit tests).

Previously, a “golden file” was required to check that the color and rectangle were being drawn correctly, but now you can use PaintPattern. The following example confirms that the MyWidget widget on the canvas has drawn a circle:

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’s test files, and the Flutter team noticed that some developers found it so useful that they copied it into their own projects. If this applies to you, you can remove the copy from your project after upgrading to Flutter 3.16.

Scroll Updates

Following the initial release of the 2D scrolling framework in Flutter 3.13, this release introduces new features and improvements. Flutter 3.16 now supports 2D KeepAlive widgets and also has built-in support for focus transition and implicit scrolling. 2D widgets created on this basis will automatically receive this support. For a complete guide to working with 2D scrolling, check out latest release of Flutter Build Show.

Shortly after the release of 3.13 the package was published two_dimensional_scrollables. This package is maintained by the Flutter team and contains the first of several 2D scrolling widgets built on top of the TableView framework. Since its initial release, it has added design and styling support, as well as additional bug fixes.

Graphics engine (Engine)

Impeller, Android

In this release, the Flutter team is excited to share that Impeller on Android is ready for preview testing on the stable channel. The team has been hard at work on the Vulkan backend for Impeller since the beginning of this year, and this preview includes collecting feedback on Impeller’s performance on devices that support Vulkan.

Impeller is not yet expected to work well on devices without Vulkan support. As developers bring OpenGL Impeller to full functionality in the coming months, there are also plans to receive feedback on Impeller’s performance on such devices in a future stable release.

Flutter developers can try Impeller on Android devices that support Vulkan by adding the flag --enable-impeller at startup flutter run or adding the following setting to the file AndroidManifest.xml your project under the tag <application>:

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

To determine whether a device supports Vulkan, Impeller uses the tests described in the documentation Impeller repository. Typically, Impeller runs a Vulkan backend on devices running a 64-bit OS running Android API level 29 or higher. Users can also determine if their device supports Vulkan by following Tips for checking Vulkan support.

While confident in the progress made so far in the development of the Vulkan Impeller backend, there are a few known issues during the pre-production testing period:

• Platform views are not yet implemented, and frames that would otherwise contain a platform view work with some limitations.

• Custom shaders have not yet been implemented.

• For a complete list known bugs And missing features The most up-to-date information is on the project board Impeller on GitHub. Many of these issues already have fixes coming in the 3.17 beta, so please give it a try.

The Flutter team is generally pleased with Impeller’s progress in reliability and performance on the Vulkan-enabled Android devices they’ve tried so far. However, compared to iOS, the Android hardware ecosystem is much more diverse, and developers expect a longer pre-test period for Android than for iOS before making it the default on the stable channel.

Therefore, the most useful Impeller feedback should include details about the specific device and version of Android that is experiencing the issue.

Additionally, Vulkan Impeller includes additional debugging capabilities in debug builds beyond those used with Skia, and these capabilities add additional performance overhead at runtime. Therefore, it is important that feedback on Impeller’s performance comes from a profile or release build and includes timings from DevTools as well as comparison to Skia on the same device.

Finally, as always, the Flutter team is very grateful for the feedback, which includes a small, reproducible test case demonstrating the problem.

Impeller performance, accuracy and stability

In addition to working on the Vulkan backend, the team has also made a number of improvements to text performance in Impeller since earlier this year, which have had a positive impact on both Android and iOS. Specifically, improvements have been made to the management of the Impeller glyph atlas and the way the load of text tasks is distributed between the user interface (UI) and the Engine raster threads. As a result, users will notice less stuttering when working with text loads.

The team has also worked hard to improve accuracy and stability for both Android and iOS, especially keeping in mind user requests. Specifically, over the three-month period of this stable release cycle, the team made 209 Impeller-related commits to the flutter/engine repository and closed 217 issues, including 42 user reports of accuracy, stability, or performance issues.

Performance

To provide better performance on mobile devices with heterogeneous multiprocessing, the Flutter team modified mechanism so that performance-sensitive threads, such as UI threads and raster threads, are tied to more powerful device cores.

The developers noticed that this change had a positive impact on a number of tests and devices. In some cases, the improvement was dramatic: 99% or 90% of the file had its frame time cut in half or better. The team expects that after this change, users will notice fewer stutters when working with both the Skia and Impeller backends on Android. The effect is less noticeable on iOS devices, where the difference between more powerful and less powerful kernels is smaller.

API and fidelity improvements

Impeller Performance Overlay

IN previous versions performance overlay featureand Flutter was not rendering with Impeller. This issue is fixed in this release. The performance overlay now displays correctly when included Impeller. Anti-aliasing is now displayed correctly

In this release the property Paint.enableDithering installed in true and deprecated according to Flutter deprecation policy. Anti-aliasing is now enabled by default (developer-configurable anti-aliasing is no longer supported) and you will no longer see banding issues. For a full explanation of this change and migration guidance, see change page on docs.flutter.dev.

Games

A set of tools for creating games using Flutter

The casual game development community has grown tremendously over the past few years. Tens of thousands of games have been published using Flutter, ranging from simple but fun puzzle games to more complex arcade games. Some of our favorites include Trivia Crack from Etermax, 4 Pics 1 Word by Lotum (word guessing game), Brick Mania by Dong Digital (arcade game), StopotS from Onrizon (a category game), a retro pinball game from Flutter built for I/O, and PUBG Mobilewhich uses Flutter in its social services.

To help game developers become more productive, Flutter is today releasing a major update to its suite of tools for casual games. This is a collection of new resources to help you go from concept to launch with more genre-specific templates such as card game, endless runner, as well as integration of services such as Play Games Services, in-app purchases, advertising, achievements, reporting bugs and support for multi-user modes. For more information check out with a message about the launch of the gaming toolkitwritten by Zoey Fan.

Web

Flutter Timeline Events in Chrome DevTools

Flutter Timeline events are now visible in the performance section of Chrome DevTools. (#130132) To learn more, check out the manual on debugging performance in web applications.

Android

Mouse scroll wheel support

During application optimization Wonderous To comply with Android guidelines for large screens, one issue was identified: the mouse scroll wheel did not work well on tablets and devices with flexible screens. It was known, that the user needed to make a significant number of scroll wheel movements to get the screen to respond. With this release, the mouse scrolling speed on a Flutter widget matches the scrolling speed on Android devices. (#44724)

Predictable navigation back

The Android 14 release included a predictive back gesture feature that allows you to use the back gesture on your device to “peek” at the home screen behind the current screen. This update brings predictable gestures back to Flutter! Review the migration guide.

iOS

Application Extensions

Now Flutter can be used to direct to some extensions iOS applications. This means you can create user interfaces for certain types of iOS app extensions using Flutter widgets. This does not work for all types of app extensions due to possible API limitations (such as home screen widgets) or memory limitations.

Learn more and see an example of how to set up the Share extension on iOS platform in the documentation Online docs.flutter.dev.

Package ecosystem for Flutter

New favorites in Flutter

Flutter team reloaded Flutter Favorite Flutter! For this cycle, the Flutter Ecosystem Committee appointed flame, flutter_animate, flutter_rust_bridge, riverpod, video_player, macos_ui and fpdart packages like the new flutter favorites. Congratulations to everyone!

You can suggest a package or plugin as a potential future Flutter favorite, or ask questions to the committee, by emailing flutter-committee@googlegroups.com.

Google Maps Cloud Styles

The Google Maps platform offers the ability to customize the style of your map from the Map Styles page in the Google Cloud Console. This allows you to create a custom user experience without having to update your application code every time you make a style change.

To use this feature in Flutter, you simply access 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

In stable version 3.10, the developers added preliminary support Camera X into the Flutter camera plugin. Camera X is a Jetpack library that makes it easy to add rich camera functionality to your Android app.

With this release, the Flutter team has added most of the features needed by any app that uses a camera. CameraX solves many of the problems that exist with the plugin’s implementation of Camera 2.

It is recommended to use the plugin CameraX. To enable it, add the following line to your file pubspec.yaml.

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

macOS Video Player

Added support for macOS video player plugin, allowing developers to play video on the widget surface.

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

DevTools – developer tools

Extensions for DevTools

New system extensions for DevTools Allows: Package authors to create custom tools for their packages that integrate directly into DevTools.

• package authors to develop powerful tools that use existing frameworks and utilities from DevTools;

• Dart and Flutter developers who debug an application using DevTools will have access to tools specific to their use cases (depending on their application’s dependencies and what dependencies the DevTools extensions provide).

Thanks to the package authors Provider, DriftAnd Patrol this ecosystem has already begun to develop, and you can use DevTools extensions for these packages today!

For an in-depth look at DevTools extensions, check out the extensions announcement DevTools for Dart and Flutter by Kenzie Davisson.

DevTools Updates

Highlights for DevTools with this release:

• added support for DevTools extensions;

• Added a new Home screen that shows a summary of the connected app.

Other improvements include:

1. Overall Performance

2. Hot restart reliability

3. Text selection and copy behavior

4. Polished viewing of network profiler responses

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

VS Code UI detection capability

Thanks to the amazing work of a Flutter community member DanTupThe Flutter extension for VS Code now features a Flutter sidebar that provides easy access to:

• opening Flutter DevTools screens;

• viewing active debugging sessions;

• viewing available devices;

• creating new projects;

• hot reboot and restart;

• launch Flutter Doctor -v;

• and much more.

Deprecated features and changes that break compatibility

Compatibility-breaking changes in this release include deprecated APIs that expired after v3.13 was released. To see all affected APIs, as well as additional context and migration guidance, see Legacy Features Guide for this release. Many of them are supported by the tool Flutter fix, including quick fixes in the IDE. Bulk fixes can be assessed and applied using the command dart fix.

As always, many thanks to the community for contribution to testing – This helps the team identify changes that break compatibility. To find out more, check out policy of changes that break compatibility at Flutter.

In the next release it is planned to expand the deprecation policy to cover the package flutter_driver in addition to already supported packages flutter And flutter_test.

Conclusion

The Flutter team mentioned the number of participants at the beginning, and this is intentional. Flutter wouldn’t be the enjoyable and productive tool it is today without the efforts of all of you – our amazing community. Thank you!

For a complete list of PRs included in this release, check out release notes and changelog.

Flutter 3.16 is available on the stable channel today and includes Dart 3.2. To get started with the latest updates, all you need to do is run the command flutter upgrade.

See you soon!