Flutter 2.2: everything you need to know

Google I/O is the annual developer conference where Google announces new hardware, software, and numerous updates for its existing apps and services. In this year's conference, Flutter was one of the key elements that stood out.

Flutter 2.2 released on Google I/O 2021, focuses on upgrading the existing Flutter ecosystem by including iOS performance improvements, Android deferred components, updated service worker for Flutter web, and so much more. This release merges 2,456 PRs and closes 3,105 issues across the framework, engine, and plugins repositories. This release focuses on strengthening the existing features and making sure they work the way they are expected to work.

Major Announcements in Flutter 2.2

• Sound null safety is now the default for new projects.
• Flutter can be used to build platform adaptive apps.
• Background caching for the web using service workers.
• New payment plugin that supports Google Pay and Apple Pay.
• There are now over 200,000 apps in the Play Store built with Flutter such as Wombo, the viral singing selfie app; Fastic, the intermittent fasting app, and Kite, a beautiful investment trading app.
• A study from SlashData regarding Mobile Developer Population Forecast 2021 shows that Flutter is now the most popular framework for cross-platform development. 45% of developers are selecting it, which represents 47% growth between Q1 2020 and Q1 2021.
• Toyota is bringing Flutter to their next-generation vehicle infotainment systems
• Canonical shipped their first release of Ubuntu with integrated support for Flutter, with Snap integration and support for Wayland.
• Samsung is porting Flutter to Tizen, with an open-source repository that others can also contribute to.
• Sony is leading the effort to deliver a solution for embedded Linux.

Flutter 2.2: what’s new

Platform adaptive apps

Flutter enables the adjustment of apps to the details of different target platforms in order to be platform adaptive apps. Now Flutter not only supports different form factors such as a mobile, tablet, and desktop but also different input types (touch vs mouse + keyboard) and platforms with different idioms such as navigation drawer vs. system menus for navigation. For more information check out the platform adaptive apps guidance on flutter.dev

iOS page transitions and incremental installs

Page transitions are now smoother by reducing the time to render the frames of animation by 75%. The incremental iOS installs are now supported during the development process and this can lead to a 40% decrease in time to install and update the app which decreases the turn-around time when testing app changes.

Flutter Web

Double-downloading of main.dart.js has now been fixed. Manual refresh of the page is not required after a service worker detects a change. To enable these changes, index.html must be regenerated. In order to do that, run flutter create in the project directory.

There are also improvements to both web renderers. FontFeature support has been for HTML and Shader masks and computeLineMetrics support has been added for both HTML and CanvasKit.

Accessibility support has also been improved such as the semantic node position which means that the focus box should properly appear over the elements when widgets are styled with transforms. Developers can debug accessibility by visualizing the semantics nodes created for the web apps.

To enable this, run the following:

$ flutter run -d chrome — profile \— dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true

The latest version of Flutter now supports layout explorer for Flutter web apps.

Dart 2.13

Flutter 2.2 comes with Dart 2.13 release. Dart 2.13 expands the support for native interoperability by reinforcing arrays and packed structs in FFI. It also includes support for type aliases, which increase readability and provides a gentle pathway for certain refactoring scenarios.

Type aliases enable us 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>;

This allows using nice short names for long and complicated types. It also enables the possibility to rename classes in a non-breaking way. More details can be found at the Dart 2.13 release announcement.

More Material Icons

The total number of material icons is now over 7,000. The icons can be searched by category and name at fonts.google.com/icons.

There is also a new Flutter tab that shows how to use this icon in Flutter.

Text Handling Improvements

Text handling has been improved to support the full customization of keystrokes associated with text actions. This means we can do things like Tab between the TextField and a button.

Automatic scrolling behavior

To have a scrollbar visible, the Scrollbar was needed to be added as a parent widget but this release adds the scrollbar automatically whenever necessary.

Speaking of automating features, here is a guide to building automatic conversational Chatbots.

Mouse cursors over text spans

TextSpan with a gesture recognizer will automatically get the mouse cursor.

Flutter ecosystem and tooling updates

Flutter Favorite updates

There are 24 new Flutter Favorites packages:

• FlutterFire packages in production: cloud_firestore, cloud_functions, firebase_auth, firebase_core, firebase_crashlytics, firebase_messaging, and firebase_storage
• Flutter Community “plus” packages: android_alarm_manager_plus, android_intent_plus, battery_plus, connectivity_plus, device_info_plus, network_info_plus, package_info_plus, sensors_plus, and share_plus
• googleapis package
• win32 package
• intl and characters packages
• Sentry packages: sentry and sentry_flutter
• infinite_scroll_pagination and flutter_native_splash packages

FlutterFire updates and Firebase App Check

Since that initial production release of FlutterFire, Invertase has reduced the number of open issues by 79% and reduced the number of outstanding PRs by 88%. Furthermore, not only have they done an excellent job with the production quality plugins, but they’ve also migrated the beta-quality plugins to null safety and kept them building and running on the same core so that you can mix and match.

FlutterFire provides support for the beta release of a new Firebase product: Firebase App Check. Firebase App Check protects your backend resources like Cloud Storage from abuse such as billing fraud or phishing. With App Check, devices running your Flutter app use an app identity attestation provider to certify that it is indeed your authentic app, and may also check that it’s running on an authentic, untampered device.

Flutter DevTools updates

There are two memory tracking improvements and a whole new tab just for the provider plugin. The memory tracking improvement provides the ability to track down where an object was allocated.

The second is the ability to inject custom messages into the memory timeline.

There is a new Provider tab to Flutter DevTools built by the author (Remi Roussel) of the provider package himself. This tab shows the data associated with each of your providers including real-time changes. It allows changing the data directly as a way to test the corner cases of your app.

IDE plugins updates

Visual Studio Code extension now supports two additional Dart code refactors: Inline Method and Inline Local Variable.

Android Studio/IntelliJ extension now has the ability to print all the stack traces to the console with an option.

DartPad workshops

There is a new step-by-step UI for DartPad that developers can use to follow along with the instructor-led workshops.

Preview of Flutter 2.2 updates

iOS shader compilation improvements

When the Metal backend was enabled by default on iOS in response to Apple deprecating OpenGL, there was an increase in worst frame time and also an increase in user reports of jank. This was caused by increased shader compilation time.

The only way to avoid this jank on iOS was to simplify scenes and animations. But now the new support in Skia for shader warm-up for Metal is available in preview. Flutter now compiles the bundled shaders before the first frame workload begins. To integrate with your apps, follow the instructions on flutter.dev.

Android deferred components

For Android, this release uses Dart’s split AOT compilation feature to allow Flutter apps to download modules containing ahead-of-time compiled code and assets at runtime. These installable splits are called deferred components. Initial install size can be significantly reduced by deferring the download of code and assets only when needed.

Flutter Gallery implemented with all studies and demos deferred and saw a 46% decrease in initial install size.

Flutter Windows UWP alpha:

Support for UWP has moved to alpha in the dev channel. UWP allows taking Flutter apps to devices where standard Windows apps don’t run, including Xbox. To try it out, set up the UWP prerequisites.

Then switch to the dev channel and enable UWP support:

$ flutter channel dev$ flutter upgrade$ flutter config — enable-windows-uwp-desktop

Once enabled, Flutter app includes a new a winuwp folder, which allows to build and run the app in a UWP container:

$ flutter create uwp_fun$ cd uwp_fun$ flutter pub get$ flutter run -d winuwp

ARM64 Linux host support from Sony

A software engineer at Sony, HidenoriMatsubayashi, has contributed support for targeting ARM64 Linux. This enables to build and run Flutter apps on ARM64 Linux machines.

Community and third party announcements

• XD to Flutter plugin has been updated.
• Release of alpha of Flutter support for UWP apps built for Windows 10.
• FlutterFlow: “low code” app design and development tool.

Conclusion

This article shares the new updates and releases of Flutter 2.2 and Dart 2.13. I hope you find it useful!

Thank you for reading! If there is anything you would like to add, please comment, we love the feedback!

Clap 👏 if this article helped you!

Feel free to contact us at www.somniosoftware.com

If you want to dive even deeper, check out these posts

• https://medium.com/flutter/whats-new-in-flutter-2-2-fd00c65e2039
• https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9