Material 3 by default, Impeller preview for Android, DevTools extensions, and much more

Kevin Chisholm

14 min read

·

Nov 15, 2023

--

19

Listen

Share

Welcome back to the quarterly Flutter stable release, this time for Flutter 3.16. This release sets Material 3 as the new default theme, brings a preview of Impeller to Android, allows adding extensions for DevTools, and much more! It also coincides withsignificant updates to the Flutter Casual Games Toolkit!

In only three months since our last release, we’ve had 928 pull requests merged by 145 community members with 40 community members authoring their first commit to Flutter!

Keep reading to learn about all the new additions and improvements the Flutter community has contributed to this latest release!

Framework

Material 3 is the new default

As of the 3.10 release (May 2023) the Material library has been updated to match the latest Material Design spec. Changes include new components and component themes, and updated component visuals. Prior to the 3.16 release, the changes were “opt-in” with theuseMaterial3 theme flag. As of this release,useMaterial3 is true by default. (#130764)

You can still opt out of the M3 version of the Material library by specifyinguseMaterial3: false in yourMaterialApp theme, but Material 2 will eventually be deprecated and removed. Also, some of the widgets couldn’t merely be updated, but needed a whole new implementation. For this reason, your UI might look a little strange when you see it running as Material 3. To fix this, manually migrate to the new widgets, such asNavigationBar. For more details, check out theMaterial 3 umbrella issue on GitHub.

Ademo application allows you to try all of the components. The demo supports togglinguseMaterial3 so that you can compare the changes.

The appearance of Material 3 components are primarily determined by the values for [ThemeData.colorScheme] and [ThemeData.textTheme]. The preferred way to create a Material 3 color scheme is withColorScheme.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 withColorScheme.fromImageProvider. To further customize the appearance of Material 3 components, add component themes to yourThemeData, such asThemeData.segmentedButtonTheme orThemeData.snackBarTheme. Non-null component theme properties override the defaults specified in the component’s API documentation.

Support Material 3 motion

Improvements to Material 3 motion includes the addition ofEasing andDurations classes. Material 2 curves have been renamed to include the word “legacy” and will eventually be deprecated and removed. (#129942)

Add additional options in edit menu

On native iOS, users can now select text and initiate a share menu that provides several standard services. In this release, we’ve added the look up, search, and share options.

TextScaler for specifying a global text scale factor

To support Android 14’snon-linear font scaling feature that helps those who are visually impaired, the newTextScaler class replaces theText.textScaleFactor property. (#128522)

SelectionArea updates

Flutter’sSelectionArea 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 withSelectionArea andSelectableRegion.

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

Menu items that operate on the focused widget

This release features cleanup of focus changes when using menu items: TheFocusManager’sapplyFocusChangesIfNeeded function now restores menu focus — when the user clicks a menu item, focus will already have returned to the item that had focus before the menu was opened. (#130536)

Automatic reordering of menu item shortcuts for iOS, macOS

Flutter apps on Mac platforms now order the shortcut modifiers in menus to follow Apple Human Interface Guidelines. (#129309)

MatrixTransition animation

A newMatrixTransition widget allows transforms 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 the one in the following GIF. (Example in DartPad) (#131084)

PaintPattern added to flutter_test

In theflutter_test package, the newPaintPattern class allows you to validate paint calls made to the canvas by widgets likeCustomPainters andDecorations (used in unit tests).

Previously, a golden file was needed to verify that the correct color and rect were painted, but you can now usePaintPattern. The following example verifies thatMyWidget painted a circle on the canvas:

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, they had copied it into their own projects. If this applies to you, you can delete the copy from your project after upgrading to Flutter 3.16.

Scrolling updates

After the initial release of the two dimensional scrolling foundation in Flutter 3.13, this release brings more features and polish. With Flutter 3.16, the 2D foundation now supportsKeepAlive widgets, as well as default focus traversal and implicit scrolling. 2D scrolling widgets built on top of the foundation will automatically adopt this support. For a comprehensive guide on building on the 2D foundation, seethe latest episode of the Flutter Build Show.

Soon after the 3.13 release, thetwo_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

Android

In this release, we are pleased to share that Impeller on Android is ready for preview feedback on the stable channel. Since early this year, the team has been hard at work on a Vulkan backend for Impeller, and this preview includes gathering feedback about Impeller’s characteristics on Vulkan-capable devices.

Impeller isn’t yet expected to perform well on devices without Vulkan support. As we bring Impeller’s OpenGL backend up to feature completeness in the coming months, we plan to also seek feedback about Impeller’s characteristics on such devices in a future stable release.

Flutter developers can try out Impeller on Vulkan-capable Android devices by passing the— enable-impeller flag toflutter run, or by adding the following setting to their project’sAndroidManifest.xml file under the<application> tag:

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

To determine whether a device supports Vulkan, Impeller uses the tests discussed in theImpeller repo docs. Generally, Impeller uses the Vulkan backend on devices running a 64-bit OS at Android API level 29 or newer. Users can also determine whether their device supports Vulkan by following the advice inchecking for Vulkan support.

While confident in the progress we’ve made on Impeller’s Vulkan backend so far, there are a few known issues going into the preview period:

• Platform views aren’t yet implemented, and frames that would otherwise include a platform view perform somewhat poorly.
• Custom shaders are not yet implemented.
• For the full list ofknown bugs andmissing features, the most up-to-date information is on the Impellerproject board on GitHub. Many issues already have fixes coming in the 3.17 beta, so please give it a try as well.

We are generally happy with our progress on Impeller’s fidelity and performance on the Vulkan capable Android devices that we’ve tried. However, compared with iOS, the Android hardware ecosystem is much more diverse, and we anticipate a longer preview period for Android than for iOS before making it the default backend on the stable channel. For that reason, the most helpful feedback about Impeller should include detailed information about the specific device and Android version where issues occurred.

Further, Impeller’s Vulkan backend enables additional debugging capabilities in “debug” builds beyond what is used with Skia, and these capabilities have additional runtime overhead. Therefore it’s important that feedback about Impeller’s performance is from a profile or release build, and should include timelines from DevTools and a comparison with the Skia backend on the same device. Finally, as always, we are very grateful for feedback that includes a small reproducible test case that demonstrates the issue.

Impeller performance, fidelity, and stability

In addition to the focus on the Vulkan backend, since the beginning of the year, the team has also made a number of improvements to text performance in Impeller that benefit both Android and iOS. In particular, we have made improvements to the management of Impeller’s glyph atlas and the way that text workloads are divided across the Engine’s UI and raster threads. As a result, users will notice less jank in text heavy workloads.

The team has also been hard at work on fidelity and stability improvements for both Android and iOS, especially those reported by users. In particular, in the three months of this stable release cycle, the team has made 209 Impeller related commits to the flutter/engine repo, closing 217 issues, including 42 user reports of fidelity, stability, or performance issues.

Engine performance

To support better performance on mobile devices with heterogeneous multiprocessing, wehave modified the engine so threads that are performance sensitive, such as the UI and raster threads, have affinity for a device’s more powerful cores. We observed that this change had a positive impact across a range of benchmarks and devices. In some cases the improvement was dramatic, halving or better 99%-ile or 90%-ile frame times. We anticipate that users will notice less jank after this change with both the Skia and Impeller backends on Android. The effect is less dramatic on iOS devices, where there is a smaller difference between the more powerful and less powerful cores.

API and fidelity improvements

Impeller performance overlay

In previous releases, Flutter’sperformance overlay feature wasn’t displayed with Impeller. This release fixes that issue. The performance overlaynow displays correctly with Impeller enabled.

Dithering is now displayed correctly

In this release, thePaint.enableDithering property is set to true, and is deprecated as perFlutter’s deprecation policy. Dithering is now enabled by default (developer-configurable dithering is no longer supported), and you will no longer see banding issues. For the full explanation of this change and the migration guide, seethe breaking change page on docs.flutter.dev.

Games

Flutter Games Toolkit

Over the past few years, we’ve seen a growing community around casual game development. Tens of thousands of games have been published using Flutter, from simple but fun puzzles to more complex arcade games. Some of our favorites include Etermax’sTrivia Crack, Lotum’s4 Pics 1 Word (word guess game), Dong Digital’sBrick Mania (arcade game), Onrizon’sStopotS (categories game), theretro pinball game we built in Flutter for I/O, andPUBG mobile who uses Flutter in their social and menu screens.

To help game developers become more productive, today Flutter is launching a major update to itsCasual Games Toolkit. It is a collection of new resources to help you move from concept to launch with more genre-specific templates such as a card game, an endless runner game, and service integrations like Play Games Services, in-app purchase, ads, achievements, crashlytics and multiplayer support. To learn more, check out thegames toolkit launch post byZoey Fan.

Web

Flutter timeline events on Chrome DevTools

Flutter Timeline events are now exposed in the performance panel of Chrome DevTools. (#130132)

To learn more, check outDebugging performance for web apps.

Android

Mouse scroll wheel support

While optimizingWonderous to meet Android’s large screen guidelines, one issue we discovered was that the mouse scroll wheel didn’t work well on tablets or foldables. It waswell known that the user had to move the scroll wheel a significant amount for the screen to respond.

With this release, scrolling with a mouse on a flutter view matches the scroll speed on Android devices. (44724)

Predictive back navigation

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

iOS

App extensions

Flutter can now be used to target some iOS app extensions. This means that you can draw the UI for certain types of iOS app extensions using Flutter widgets. This doesn’t work for all types of app extensions because there might be limitations to the API (for example, home screen widgets) or memory.

Learn more and see an example for how to target the Share extension atAdding iOS app extensions on docs.flutter.dev.

Package ecosystem

New Flutter Favorites

We have rebooted theFlutter Favorite program! For this cycle, the Flutter Ecosystem Committee designated theflame,flutter_animate,flutter_rust_bridge,riverpod,video_player,macos_ui andfpdart packages as new Flutter Favorites. Congrats to all!

Look out for new Flutter Favorites in the future. To nominate a package or plugin as a potential future Flutter Favorite, or to bring any other issues to the attention of the committee, send the committee an email atflutter-committee@googlegroups.com.

First package ecosystem virtual summit

In August, we held a first-time virtual summit for the package ecosystem, attended by more than 50 non-Googler and Googler contributors topub.dev. The goal was to bring contributors together in unconference-style discussions to plan, educate, learn, and share amongst the community. Satisfaction with the event was 100% in a post-event survey. We plan to partner with the community on similar events for the package ecosystem (in-person and virtually) in the future. Find out more in an upcoming Package ecosystem update blog post.

Cloud-based Google Maps styling

Google Maps Platform offers the ability to customize the style of your map from the Map Styles page in the Google Cloud Console. This lets you create a customized experience without having to update your app code each time you make a style change.

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

In the 3.10 stable release, we added preliminary support for Camera X to the Flutter camera plugin.Camera X is a Jetpack library that simplifies adding rich camera functionality to your Android app.

With this release, we’ve added most of the features needed by any app that uses a camera. CameraX solves many issues that exist with the Camera 2 implementation of the plugin.

We encourage you to use the CameraX plugin. To opt in, add the following line to your pubspec.yaml file.

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

We would love your feedback as we plan on making CameraX the default implementation in a future release.

macOS Video Player

We have added macOS support to thevideo player plugin, allowing developers to play videos on a widget surface.

To learn more check out thevideo player plugin onpub.dev.

DevTools

DevTools extensions

The newDevTools 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 ofProvider,Drift, andPatrol, 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 theDart and Flutter DevTools Extensions announcement byKenzie 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 DevTools2.26.1,2.27.0, and2.28.1.

VS Code UI discoverability

Thanks to the amazing work by Flutter community memberDanTup, 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

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, seethe deprecation guide for this release. Many of these are supported byFlutter fix, including quick fixes in the IDE. Bulk fixes can be evaluated and applied with thedart fix command.

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

In our next release, we will be planning to extend the deprecation policy to cover theflutter_driver package in addition to already supported packages,flutter andflutter_test.

Conclusion

We called out the number of contributors at the beginning of this announcement, this is with intention. Flutter would not be the delightful and productive toolkit that it is today without the efforts of you all — our amazing community. Thank you.

For a full list of PRs that were included in this release, check out therelease notes and change log.

Flutter 3.16 is available on the stable channel today, and includesDart 3.2. To get started with these newest updates, all it takes is aflutter upgrade.

See you all again soon!