Flutter, News and Events

Google Unveiled Flutter 2.2 – Here Are All the New Features

Google announced Flutter 2.2 (a latest version of their cross-platform app development framework) in Google I/O event. And, it has exciting improvements...

Avatar Written by Ghanshyam Bhesaniya · 4 min read >
Flutter 2.2

Google announced Flutter 2.2 (a latest version of their cross-platform app development framework) in Google I/O event. And, it has exciting improvements like Android deferred components, iOS performance improvements, Null safety by default, improvements to Desktop and Dev tools, and many more.

There is lot to know about the latest updates of Flutter. So, let’s take a deep look at Flutter 2.2 with all the newly added features.

Dart 2.13

Dart 2.13

Flutter 2.2 comes up with a range of improvements and Dart 2.13. It includes the second most requested feature type aliases, Dart FFI, update on the null safety feature, etc.

Type Alias

You can create a new name for any existing type and then this name can be used instead of an existing type. Before Dart 2.13 users can create a type alias for the function now it’s extended to the variable type.

Example:

typedef  Length = double;

fina Length x = 4;

The best thing about the type alias is that it passes the type equality test as well. And it’s legal to call the constructor on a type alias that names a class.

Example:

Void main() {
   debugPrint(double == Length); // True
}

The advantage of using a type alias is you can make it easier to read your code to the others.

Dart FFI (Foreign Function Interface)

FFI is a mechanism for calling C code. And FFI has a new feature in which user can wrap the inline array in dart directly.

Example:

class StructInlineArray extends Struct {
   @Array(8)
   external Array<Unit8> arr;
}

Instead of

struct MyStruct {
   Unit8_t arr[8];
}

Another improvement in FFI is now it supports packed structs. This helps omitting padding to lower overall memory consumption.

Example:

@Packed(4)
class TASKDIALOGCONFIG extends Struct {
  @Uint32()
  external int cbSize;
  @IntPtr()
  external int hwndParent;
  @IntPtr()
  external int hInstance;
  @Uint32()
  external int dwFlags;
}

Dart 2.13 includes other changes as well related to performance improvement and reduce space occupied by the program.

Null Safety Update

Now if you create a project using Flutter 2.2, it will generate a project with null safety by default. Most of the plugins are mitigated to the null safety it is safe to migrate the Flutter app to sound null safety.

Flutter Desktop Updates

Custom Text Actions

Flutter extended its support to a number of platforms with different input types (touch, Mouse+Keyboard). In this release, users can fully customize the keystrokes associated with the text actions.

This feature open-up endless possibilities for the Flutter app developers. For example, it is allowing users to send a message with the ENTER Key while still allowing a new line to be inserted via Ctrl + ENTER.

Automatic Scrolling Behaviour

In this release, whenever content exceeds the screen height scrollbar will be added automatically. Before this release on Android and iOS, there is no scrollbar added automatically developer has to add it manually.

With this update flutter introduced customization for the scrollbar UI. Using ScrollBarTheme you can change it app-wide and for specific screen ScrollBehavior.

Mouse Cursor Over Text Spans

As we know, TextSpan is not a widget and we can change the mouse cursor when hovering over a clickable widget except TextSpan. Now it’s a past with Flutter 2.2 when you are using TestSpan with GestureDetector user will get the corresponding mouse cursor. It also supports onEnter and onExit events.

Payments and Monetization

Flutter 2.2 includes a new plugin to add Google Pay on Android and iOS and new ad format via google mobile Ads SDK.

With the official Pay plugin from the Google dev team becomes easy to implement the payment process on both platforms. It’s easier than before to monetize the app through in-app purchases, payments, and Ads.

Supports Deferred Component for Android

The deferred components are not new for the Android developer but now it’s officially introduced in Flutter 2.2. But the sad thing is that it’s limited to only Android for now it’s not supported for iOS yet.

For those who don’t know, what is deferred component? The deferred component is the piece of code that can be downloaded OnDemand run time. For more detail you can visit the official page for the deferred components.

The Resolved First-jank Issue for iOS

If you have noticed when you run the app for the first time it seems to be janky. After a subsequent start, it feels normal. It’s because of shader compilation jank. In simple term; the shader is a piece of code which needs to be compiled on the device.

To resolve this issue, you can visit this page it has all the details. It’s not fully resolved but the Dev team tried to resolve it to some extent.

Windows UWP Apps

Universal Windows Platform Apps now moved to alpha in the dev channel. UWP apps can be run on a wide range of devices where standard windows apps don’t run including Xbox. To enable UWP support in the project you need to switch to the Dev channel and have to set up the pre-requisites. For more setup detail you can visit its official website.

Dev Tools

The development tool is important as the end product which helps developers to build more memory efficient and error-free apps and the Flutter team knows it very well. In the context of that in this release, they have introduced two new memory tracking improvements and a whole new tab for the ‘provider’ plugin.

Memory tracking improvement gives the developer the ability to track down where objects as allocated. It’s really helpful to find a memory leak in code. And another charming feature in the dev tool is a developer can inject custom messages into the memory timeline. Using this feature developer can check that he is cleaning up things properly or not.

Sometimes you need to track down in package Dev tools got you covered. In the dev tool, a new extra tab added which is dedicated to the provider package. You will automatically see a new provider tab whenever using the provider package with the latest flutter version.

Flutter Web Updates

With this release flutter introduced lots of improvements for the web platform. One of the main improvements is they have fixed double-downloading of main.dart.js prior to this version the service worker downloads the update, and to see those changes the user has to refresh the page couple of times.

But with a new service, users just have to wait until downloading an update after that user will get changes without refreshing the page manually.

Here accessibility is also a useful thing that gets improvements. Flutter team has improved semantic node position to close the gap between mobile and desktop web apps when using transforms. This means that the focus box should appear properly over elements when widgets are styled with transforms.

And at the last, now Flutter DevTools supports the layout explorer for Flutter Web Apps.

Wrapping Up

Dart 2.13 with all the updated features is available now. It is open-source and available at no cost. I would be happy to hear your feedback about the new features and changes in the comments section.

Written by Ghanshyam Bhesaniya
Ghanshyam Bhesaniya is a Sr. Mobile App developer at MindInventory with more than 6 years of experience. Building Large & Scalable Applications using Swift and Dart. Responsible for designing and building advanced applications for both iOS and Android platforms using Flutter. He has excellent knowledge in core concepts like Object Oriented Programming (OOP), Memory Management (Memory profiling and performance tuning). Profile