The Flutter 2.2 release focuses on polish and optimization, including iOS performance improvements, Android deferred components, updated service worker for Flutter web and more!

 

Today is the day we make Flutter 2.2 available. You get to it by switching to the stable channel and upgrading your current Flutter installation, or going to flutter.dev/docs/get-started to start a new installation.

Even though it’s only been a couple of months since the Flutter 2 release, we have a lot of improvements to share in 2.2. This release merges 2,456 PRs and closes 3,105 issues across the framework, engine, and plugins repositories. Special shoutout to the Flutter community at large who provided a significant number of PRs and PR reviews, including Abhishek01039 who contributed the most PRs (17) and xu-baolin, who reviewed the most PRs (9) towards Flutter 2.2. Thanks to all contributors for your help in bringing Flutter 2.2 to the stable channel. We couldn’t do it without you.

With each new Flutter release to stable comes a new set of updates, whether those are performance enhancements, new features or bug fixes. In addition, a release includes a number of features that haven’t yet ready for production use but that we want you to be able to verify that they’re working the way you want them to. And finally, each new release comes with a set of associated tooling updates and updates from the larger Flutter community. To be honest, there is so much going on with each new release of Flutter these days that we can’t reasonably capture it all in a single blog post, but we’ll try to hit the highlights.

Flutter 2.2 updates in stable

This release covers a wide range of improvements on top of Flutter 2, including updates across Android, iOS, and web, new Material icons, updates to text handling, scrollbar behavior, and mouse cursor support for the TextSpan widget and new guidance on how to best support multiple kinds of platforms from a single source code base. All of these features are available in stable now and available for your use in production apps. And all of them are built on a new release of Dart.

Dart 2.13

Flutter 2.2 comes with the Dart 2.13 release. Among other things, this Dart update contains a new type aliases feature, which enables you to create aliases for types as well as for functions:

	// Type alias for functions (existing)
	typedef ValueChanged<T> = void Function(T value);
	// Type alias for classes (new!)
	typedef StringList = List<String>;
	// Rename classes in a non-breaking way (new!)
	@Deprecated(“Use NewClassName instead”)
	typedef OldClassName<T> = NewClassName<T>;

Type aliases make it possible to give nice short names to long, complicated types, and it also lets you rename your classes in a non-breaking way. There’s more that’s new in Dart 2.13 as well; check out the details in the Dart 2.13 release announcement.

Flutter web updates

Flutter’s newest stable platform, web, has been improved in this release.

To start, we’ve optimized caching behavior with a new service worker-loading mechanism, and fixed double-downloading of main.dart.js. In previous versions of Flutter web, the service worker downloaded updates to your app in the background while giving your user access to the stale version of your app. Once that update was downloaded, the user wouldn’t see those changes until they refreshed the browser page a couple times. As of Flutter 2.2, when the new service worker detects a change, the user will wait until the updates are downloaded to use the app, but then they’ll see the updates without requiring a second manual refresh of the page.
Enabling this change requires you to regenerate the index.html of your Flutter app. To do that, save your modifications, delete the index.html file, and then run flutter create . in your project directory to recreate it.
We also made improvements to both web renderers. For HTML, we added support for font features to enable setting FontFeature as well as using canvas APIs to render text so that it appears in the correct place when hovering. For both HTML and CanvasKit, we added support for shader masks and computeLineMetrics, addressing the parity gaps between Flutter web and mobile apps. For example, developers can now use opacity masks to perform fade-out transitions with shader masks, and use computeLineMetrics as they would for mobile apps.
For Flutter web, as well as Flutter in general, accessibility is one of our top priorities. As designed, Flutter implements accessibility by building a SemanticsNode tree. Once a Flutter web app user enables accessibility, the framework generates a DOM tree parallel to the RenderObject DOM tree, and translates the semantic properties to Aira. In this release, we improved semantic node position to close the gap between mobile and desktop web apps when using transforms, which means that the focus box should appear properly over elements when widgets are styled with transforms. To see this in action, check out this video by Victor Tsaran, who leads the Accessibility program for Material Design, using VoiceOver with Flutter Gallery App:

We also exposed the semantics node debug tree with a command line flag in profile and release modes to help developers debug accessibility by visualizing the semantic nodes created for their web app.
To enable this for your own Flutter web app, run the following:

$ flutter run -d chrome –profile \

  --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

With that flag activated, you’ll be able to see your semantic nodes on top of the widgets, which allows you to debug and see if semantic elements are placed where they shouldn’t be. If you find examples like that, please don’t hesitate to file a bug report.
While we’ve made significant progress with support for a set of core accessibility features, we will continue to improve accessibility support. In builds available on the master and dev channels beyond the 2.2 stable release, we’ve added an API to let developers programmatically auto-enable accessibility for their apps and are fixing issues with using Tab with screen readers.
And last but certainly not least, the latest version of Flutter DevTools now supports the layout explorer for your Flutter web apps.

This update gives you the same layout debugging tool on the web that you’re used to with your mobile and desktop apps.

iOS page transitions and incremental installs

For iOS, in this release we’ve made the page transition smoother in Cupertino by reducing the time it takes to render the frames of the animation by 75%, and potentially more on low-end phones. We don’t just look for end-user performance improvements; we’re always looking for ways to improve the development performance as well.
In this release, we’ve implemented incremental iOS installs during the development process. In our benchmarks, we’ve seen a 40% decrease in the amount of time to install an updated version of your iOS app, which decreases your turn-around time when testing app changes.

Use Flutter to build platform adaptive apps

As Flutter expands to support more platforms in stable, it becomes useful to consider apps that support not just different form factors, such as mobile, tablet, and desktop, but also different input types (touch vs. mouse+keyboard) and platforms with different idioms, such as navigation drawers vs. system menus for navigation. We call apps that can adjust to the details of different target platforms to be “platform adaptive” apps.
For an introduction to the considerations you’ll want to keep in mind when building platform adaptive apps, we’ll point you at the Building platform adaptive apps session from Kevin Moore. For a more detailed look, check out the platform adaptive apps guidance on flutter.dev.
And, finally, for sample apps that have been written for multiple platforms according to these principles, we recommend the Flokk and Flutter Folio apps from gSkinner. You can download the code for Flokk and Folio as well as download Flokk and Folio from the various app stores or run them directly from your browser. Another great sample is the app used to create the guidance itself:

The UX portions of the Flutter platform adaptive apps guidance is based on the new Material Guidance for Large Screens. This new guidance from the Material team includes reworks of several of the main layout articles as well as updates to several components and an updated Design Kit, all with large screens in mind.

Flutter’s goal has always been to enable apps that do more than just run on multiple platforms; we’re not done until your apps run great on all of the platforms you’re targeting. Flutter has the support you need to not only target your app at multiple platforms but also intends to tailor your apps for screen size, input modes, and idioms of each of these platforms.

More Material icons

And on the subject of Material guidance, in this release we’ve landed not one but two separate PRs adding new Material icons to Flutter, including an icon for Dash herself!