nav font loadernav font loader
Go BackGo Back
Flutter

Flutter 2.2: everything you need to know

Flutter 2.2 was released on Google I/O 2021 event and stood out due to its numerous improvements and updates.

We share our knowledge and experience in our blog | Somnio Software

by Akshar Patel

8 min read · Aug 16, 2021

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

Change your app to Flutter

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.

Google Fonts Icons
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.

Text Handling Improvements
Text editing

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

Memory tracking improvement

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

Custom messages in 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.

New provider tab

IDE plugins updates

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

Dart code refactors

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

Print stack traces

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.

Android deferred components

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.

Linux host support from Sony

Community and third party announcements

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


by Akshar Patel

8 min read · Aug 16, 2021

Akshar Patel is a Mobile Software Developer at Somnio Software. He is focused on improving and implementing the development processes that improve the quality of the project.

Software development
Mobile app development
App
Web

Let’s create successful apps together!

ˑ
Select...