Flutter version 2.2 has been released! To get the new version, simply switch to stable and update your current Flutter installation, or go to flutter.cn/docs/get-st… Install from scratch.

Although only a few months removed from version 2.0, version 2.2 is packed with improvements. This release includes 2,456 PR and solves 3,105 issues in frameworks, engines, and plug-in libraries. We would like to acknowledge the entire Flutter community who contributed a lot of PR and PR Review to this release, including Abhishek01039 who contributed the most PR (17) and Xu-Baolin who contributed the most PR Review (9). Thanks to all the developers who contributed to the smooth release of Flutter 2.2 stable. We can’t do it without your support.

Each new Stable version of Flutter brings changes such as performance improvements, new features, bug fixes, and some experimental features that have not yet been tried in production. We hope you can help us verify that these features work properly and meet your needs. In addition, the new version will include a number of updates to related tools and updates from the Flutter community. To be honest, every new version of Flutter today has too much content to cover in a single article, so here we highlight some of the main highlights.

Update to Flutter 2.2 Stable version

There are many improvements to Flutter 2, including updates for Android, iOS and Web platforms. There are also new Material ICONS, improved text handling, changes in scroll bar behavior, mouse cursor support for TextSpan widgets. And new guidelines for adapting multiple platform aspects with one code. These features have been released in stable versions and are available for use in official applications. All of these features are built on top of the new version of Dart.

The Dart 2.13

Dart 2.13 comes with Flutter 2.2. This Dart release includes a number of new features, one of which is the new type alias feature, which lets you create aliases for types just as you would 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>;
Copy the code

With type aliases, you can give long, complex types short, easy-to-understand names and rename your classes in a way that doesn’t break your code. Dart 2.13 also includes a number of other updates that you can read about in our previous Dart 2.13 release tweets.

Flutter web update

As the latest platform supported by Flutter stable, the Web platform also has several improvements in this release.

First, we optimized the caching behavior with the new service worker loading mechanism and fixed repeated downloads of main.dart.js. In old Flutter Web, the service worker downloads app updates in the background. During this time, users can use the old version of the app as usual. Once the update is downloaded, the user must refresh the browser several times before seeing the update. In Flutter version 2.2, when a new service worker detects an update, users need to wait for the update to download before using the app, but they can see the update without having to manually refresh the page again.

To enable this change, you need to regenerate the index.html of your Flutter application. Specifically, save your modifications, delete the index.html file, and then run flutter Create in your project directory. To regenerate the file.

We also made improvements to both Web renderers. On the HTML renderer, we added support for the FontFeature to enable the FontFeature setting and render text using the canvas API so that the text over the mouse appears in place. We have added support for Shader masks and computeLineMetrics on HTML and CanvasKit renderers to address the mismatch between Flutter Web and mobile applications. For example, developers can now fade-out transitions using shader masks through opacity masks and use computeLineMetrics as in mobile applications.

Accessibility is not only a major focus of Flutter Web, but also a central focus of Flutter as a whole. By design, accessibility is achieved by building a SemanticsNode tree. When the user of the Flutter Web application enables accessibility, a DOM tree is generated parallel to the RenderObject DOM tree and semantic properties are converted to Aira. In this release, we have improved semantic node location, eliminating the inconsistencies between mobile and Web applications when using transforms, which means that when styling widgets using transforms, the focus box is correctly displayed above the element. To see how this works in practice, you can watch a video by Victor Tsaran, Material Design’s accessibility project leader, on how he uses VoiceOver with the Flutter Gallery App.

We also now provide a command line flag for profile and release modes for developers to access the semantic node debug tree and visually view the semantic nodes created by the system for their Web applications to debug the accessibility of their applications.

To enable this feature for your Flutter Web application, run the following command:

$ flutter run -d chrome --profile \
  --dart-define=FLUTTER_WEB_DEBUG_SHOW_SEMANTICS=true
Copy the code

When this flag is activated, you will be able to see your semantic nodes above each widget for debugging and checking that the semantic elements are where you expect them to be. If you find this kind of problem, you are welcome to submit a bug report to us.

While we have made great strides in support of core accessibility features, we are still improving in this area. In the Master and Dev channel build after the 2.2 stable, we added an API for developers to programmatically automatically enable accessibility for their apps, and we are working to address the issue of using the Tab key in screen readers.

Last but not least, the latest version of Flutter DevTools now also supports using the layout browser for your Flutter Web application.

You can now use your familiar layout debugging tools in Web applications, just like in mobile and desktop applications.

IOS page transitions and incremental installs

For iOS, this release reduces the rendering time of animation frames by 75%, making transitions within the Cupertino theme much smoother. The reduction could be even higher on low-end phones. Not only have we improved the performance perceived by the end user, but we are constantly looking for ways to improve development performance.

In this release, we implemented an incremental iOS installation during development. Benchmarking results show that iOS app updates take up to 40% less time to install, which reduces your app change testing cycle.

Build platform adaptive applications using Flutter

As Flutter stable supports more platforms, you will need to consider not only different device types (e.g. phone, tablet and desktop), but also different input methods (touch vs. mouse). It also ADAPTS to different usage habits on different platforms (for example, whether to use a drawer navigation bar or a system menu for navigation). If an application can be adapted to the details of the target platform, it is called platform adaptation.

If you want a primer on what to consider when building platform adaptive applications, watch Kevin Moore’s video on “Building Platform Adaptive Applications.” For more information, you can read the guide to the adaptive application of the platform in the Flutter documentation.

Finally, refer to examples of multi-platform applications written to follow these guidelines. We recommend that you check out the Flokk and Flutter Folio apps built by gSkinner. You can download the source code for Flokk and Folio, download Flokk and Folio apps from various app stores, and run them directly in your browser. Another good example is the application for creating the guide itself.

The UX section of the Adaptive Application Guide for the Flutter platform is based on the new Material Large screen guide. In this new release, the Material team revised several major layout articles, tweaked several components, and updated the Design Kit for the larger screen.

The goal of Flutter has always been to enable applications to go far and high, not just to run on multiple platforms. We won’t stop until we make sure your app works well for all of our target platforms. Flutter provides you with the support you need to enable your application to cover multiple target platforms and adapt to different screen sizes, input methods, and usage habits on each platform.

More Material ICONS

Speaking of Material guides, this release also includes two separate PR’s, adding more Material ICONS to Flutter. Dash, our adorable mascot, now has his own icon!

With these new ICONS, the total number of Material ICONS available for your application now crosses the 7,000 mark. If you have trouble finding the ICONS you want in this sea of ICONS, you can go to fonts.google.com/icons and search for ICONS by category and name.

Once you have found the ideal icon, you can view instructions on how to use the icon in the new “Flutter” TAB. You can also download the icon separately and use it as a stand-alone resource in your application. Adding Dash’s cute image to your Flutter app has never been easier.

Search for Material ICONS by name

Improved text processing

As we continue to improve Flutter to better adapt it to the specific characteristics of each platform, we are stepping into some new areas that are not prominent on mobile devices but are important on the desktop. One of these is text processing. In this release, we set about refactoring the way text input is handled to enable the ability to cancel key events as they propagate through the widget hierarchy and to fully customize the keys associated with text actions.

Because the key events can now be cancelled, Flutter will no longer trigger scroll events when the spacebar and arrow keys are pressed, making the user experience more intuitive. You can also use this feature to process a key event before it is propagated to the parent widget in your application. As another example, you can Tab between text fields and buttons in your Flutter application, and everything works as expected:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Flutter Text Editing Fun',
       home: HomePage(),
     );
}

class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) => Scaffold(
       body: Column(
         children: [
           TextField(),
           OutlinedButton(onPressed: () {}, child: const Text('Press Me')),,),); }Copy the code

Flutter 2.2 can cancel keystroke events as they propagate up the widget hierarchy. For example, you can use the TAB key to switch focus from a TextField to another element

Custom text actions allow you to perform special processing on the Enter key event in the TextField, for example, by having the Enter key trigger a message in the chat client, while allowing the user to press Ctrl+Enter to wrap a line. This type of text manipulation allows Flutter itself to also provide different key Settings so that the text editing behavior is consistent with the host operating system, such as using Ctrl+C to copy text on Windows and Linux and Cmd+C on macOS.

Here’s an example that overrides the default left arrow key action and sets up new actions for backspace and delete keys:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Flutter TextField Key Binding Demo',
       home: Scaffold(body: UnforgivingTextField()),
     );
}

/// A text field that clears itself if the user tries to back up or correct
/// something.
class UnforgivingTextField extends StatefulWidget {
 @override
 State<UnforgivingTextField> createState() => _UnforgivingTextFieldState();
}

class _UnforgivingTextFieldState extends State<UnforgivingTextField> {
 // The text editing controller used to clear the text field.
 late TextEditingController controller;

 @override
 void initState() {
   super.initState();
   controller = TextEditingController();
 }

 @override
 Widget build(BuildContext context) => Shortcuts(
       shortcuts: <LogicalKeySet, Intent>{
         // This overrides the left arrow key binding that the text field normally
         // has in order to move the cursor back by a character. The default is
         // created by the MaterialApp, which has a DefaultTextEditingShortcuts
         // widget in it.
         LogicalKeySet(LogicalKeyboardKey.arrowLeft): const ClearIntent(),

         // This binds the delete and backspace keys to also clear the text field.
         // You can bind any key, not just those already bound in
         // DefaultTextEditingShortcuts.
         LogicalKeySet(LogicalKeyboardKey.delete): const ClearIntent(),
         LogicalKeySet(LogicalKeyboardKey.backspace): const ClearIntent(),
       },
       child: Actions(
         actions: <Type, Action<Intent>>{
           // This binds the intent that indicates clearing a text field to the
           // action that does the clearing.
           ClearIntent: ClearAction(controller: controller),
         },
         child: Center(child: TextField(controller: controller)),
       ),
     );
}

/// An intent that is bound to ClearAction.
class ClearIntent extends Intent {
 const ClearIntent();
}

/// An action that is bound to ClearIntent that clears the TextEditingController
/// passed to it.
class ClearAction extends Action<ClearIntent> {
 ClearAction({required this.controller});

 final TextEditingController controller;

 @override
 Object? invoke(covariantClearIntent intent) { controller.clear(); }}Copy the code

A bad example of a TextField where pressing the left arrow or ESC key clears the text

We do have a lot of work to do in this area, but we will spare no effort to give developers full control over their text editing operations. The goal is that when Flutter desktop is stable, end users will not be able to tell the difference between the text editing capabilities of Flutter applications and other applications on the host operating system.

Automatic rolling behavior

We have been working hard to make Flutter behave like the best apps on all platforms. In this release, we have optimized the scroll bar further. In terms of scroll bar display, Android and iOS will be exactly the same, that is, by default, no scroll bar display. In desktop applications, however, scroll bars are usually displayed automatically whenever the content is larger than the container. This requires you to add a parent widget of type Scrollbar. To achieve the correct behavior on both mobile and desktop devices, this release automatically adds a Scrollbar when needed.

Here is the code without the Scrollbar:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: 'Automatic Scrollbars',
       home: HomePage(),
     );
}

class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) => Scaffold(
       body: ListView.builder(
         itemCount: 100,
         itemBuilder: (context, index) => Text('Item $index'),),); }Copy the code

When the code above runs on a desktop platform, it displays a scroll bar:

If you don’t like the look of the scrollbar or don’t want the scrollbar to be displayed all the time, you can set the ScrollBarTheme. If you don’t like the default behavior, you can change it at the application level or specific instance level by setting ScrollBehavior. For more details on the new default scroll bar behavior and how to migrate code to conform to the new best practices, see the Flutter official documentation.

The mouse pointer on TextSpan

In previous Versions of Flutter, you could add a mouse pointer (such as a hand pointer to indicate that an element was clickable) to any widget. In fact, Flutter adds this kind of mouse pointer for you in most situations, such as adding a hand mouse pointer to all buttons. However, if you implement a piece of rich text with multiple different styles of TextSpan that may be long enough to require a newline, there is no way to add a mouse pointer to it, because TextSpan is not a widget and cannot be used to define the visual range of the mouse pointer. But now it’s different! In the new version, if your TextSpan has a GestureRecognizer, the system will automatically set the mouse pointer for it:

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart' as urlLauncher;

void main() => runApp(App());

class App extends StatelessWidget {
 static const title = 'Flutter App';
 @override
 Widget build(BuildContext context) => MaterialApp(
       title: title,
       home: HomePage(),
     );
}

class HomePage extends StatelessWidget {
 @override
 Widget build(BuildContext context) => Scaffold(
       appBar: AppBar(title: Text(App.title)),
       body: Center(
         child: RichText(
           text: TextSpan(
             style: TextStyle(fontSize: 48),
             children: [
               TextSpan(
                 text: 'This is not a link, ',
                 style: TextStyle(color: Colors.black),
               ),
               TextSpan(
                 text: 'but this is', style: TextStyle(color: Colors.blue), recognizer: TapGestureRecognizer() .. onTap = () { urlLauncher.launch('https://flutter.dev'); }, [, [, (), (), (), (); }Copy the code

You are now free to use any newline TextSpan, as long as it has a gesture recognizer, and the system will set the appropriate mouse pointer for it.

In this version, TextSpan supports onEnter and onExit in addition to mouseCursor. These improvements may seem small, but they will have a big impact on the user experience. They will make Flutter more similar to what users expect.

New preview features in Flutter 2.2

In addition to the new features for production, Flutter 2.2 also comes with a number of new preview features, including improved compilation performance for iOS shaders, lazy loading component support for Android, an update to the Flutter desktop platform, and support for the ARM64 Linux host from Sony. You are welcome to experiment with these features and report to us if you encounter problems.

IOS shader compilation improvements

In graphics rendering, the term “shader” refers to a program that is compiled and run on a GPU available to the end-user device. Since its birth, Flutter has used shaders in the underlying Skia graphics library to achieve high-quality graphics effects in colors, shadows, animations, and more, while achieving performance comparable to native code. Thanks to the flexibility of the Flutter API, shaders can be generated and compiled just-in-time in a JIT manner and synchronized with the frame workload that requires them. However, when the compilation time of the shader exceeds the time budget of the corresponding frame, the user will experience lag.

To avoid this kind of lag, Flutter allows you to cache shaders during training runs, package them into your application, and then compile them before the first frame when the Flutter engine starts. This way, these precompiled shaders do not have to be compiled during the frame workload and do not cause stacken. However, Skia initially implemented this functionality only for OpenGL.

As a result, we saw an increase in benchmark worst-frame times and user reports of stalling after Apple scrapped OpenGL and enabled the Metal backend on iOS by default. After investigation, we found that this kind of lag is often caused by increased shader compilation time, an increase in the number of shaders Skia generates for the Metal back end, and a failure to cache the compiled shader between multiple runs, resulting in the application still being stuck during subsequent runs.

Until now, the only way to eliminate this kind of lag on iOS was to simplify scenes and animations, and that wasn’t an ideal solution.

To address this issue, we have released a preview of Skia’s new shader preheating support for Metal in the Dev channel. Flutter now compiles the bundled shaders via Skia before the first frame workload starts.

A trace of precompilation operations during application startup

However, there are some drawbacks to this solution:

  • Skia still generates more shaders for the Metal back end than for the OpenGL back end.
  • The final compilation of the shader to machine code still occurs simultaneously with the frame workload, but it is better than performing all shader generation and compilation operations during the frame rendering time.
  • The resulting machine code is cached after the application is first run until the device is restarted.

If you want to use this new feature in your own application, refer to the instructions on the official Flutter documentation.

We will continue to improve this implementation. It currently has several downsides on Android and iOS:

  • The deployment volume of the application is larger due to the bundled shader.
  • Applications take longer to start due to the need to precompile bundled shaders.
  • There can be a negative impact on the developer experience.

Of these, we attach the greatest importance to the last. We believe that developers should not have to perform training runs, nor should they incur costs in terms of application size and startup latency. Therefore, we continue to explore whether there are other ways to eliminate shader compilation lag and other types of lag that do not rely on this implementation. We are working with the Skia team to reduce the number of shaders generated by Flutter requests and to explore the feasibility of bundling a small number of statically defined shaders into the Flutter engine.

You can follow the related projects in the Flutter codebase to learn about the progress.

Android Lazy loading Components: Downloadable AOT code and resources

On Android, this version utilizes the split AOT compilation feature of Dart to enable Flutter applications to download modules containing pre-compiled code and resources at runtime. We refer to this installable detachable module as a “lazy-loaded component.” The initial installation size of an application is significantly reduced by the ability to download code and resources as needed. For example, we implemented a special version of the Flutter Gallery application that reduced the initial installation size by 46% by setting all cases and demos to lazy loading.

Download the Crane case in the Flutter Gallery app

If lazy-loaded components are enabled when you build your application, Dart compiles the code imported separately with the Deferred keyword into separate shared libraries and packages those libraries as lazy-loaded components along with related resources.

The feature is in the early preview stage and is currently only available on Android. You can learn how to implement this kind of component in the new Lazy loading Component page on the Flutter official documentation. This page also links to a page on the Flutter Wiki that details how this feature works. If you find a problem, please inform us via the Flutter problem tracker.

Flutter Windows UWP Alpha

Another update to This version of Flutter is for desktop platforms: Support for Windows UWP is now in alpha (after 2.2 stable) in the Dev channel. With UWP, your Flutter application will be able to cover devices such as Xbox that cannot run standard Windows applications. To try out this feature, meet the UWP prerequisites, then switch to the Dev channel and enable UWP support.

$flutter channel dev $flutter upgrade $flutter config - enable-windows-uwp-desktopCopy the code

When enabled, the created Flutter application contains a new WinuWP folder so that you can build and run your application in a UWP container:

$ flutter create uwp_fun
$ cd uwp_fun
$ flutter pub get
$ flutter run -d winuwp
Copy the code

Since you are building a Windows UWP application running in a Windows sandbox environment, you need to set localhost penetration to the application’s firewall during development to enable features such as hot overloading and debugger breakpoints. To do this, you can follow the instructions on the Flutter desktop documentation page using Checknetisolation. After you have done this, you can run your favorite Flutter application on Windows as a UWP application.

Run your favorite Flutter application in a Windows UWP container

Of course, you can also run some of the more interesting UWP applications, such as the Flutter application running on Xbox in the video below.

Flutter app running on Xbox

We would like to thank Clarkezone, who has been working on this feature since I joined the Flutter team. For more details on Windows UWP Alpha support, please refer to the official documentation.

Sony contributed ARM64 Linux host support

This great contribution comes from HidenoriMatsubayashi, a Sony software engineer who works with the Flutter community. This PR allows you to build and run Flutter applications on ARM64 Linux machines.

Run your favorite Flutter application on an ARM64 Linux machine

We are pleased to see that the Flutter community has ported Flutter to a platform beyond what the Google team could have imagined. HidenoriMatsubayashi, thank you very much!

Update the Flutter ecosystem and tools

The Flutter engine and framework are only part of the overall experience, and updates to the Package ecosystem and tools are equally important to the Flutter developer experience. We also have a few great updates to share with you in this area.

On the ecosystem side, we have released multiple Flutter Favorite packages and updated FlutterFire, the Firebase plugin for Flutter. FlutterFire also now supports the new Firebase App Check preview, allowing Flutter developers to benefit from the product from day one.

On the tool side, Flutter DevTools has made several updates to make it easier for you to optimize the memory usage of your application. It also provides a TAB for your Provider package. IDE plug-ins for VS Code and Android Studio/IntelliJ have also been significantly updated. In addition, if you are a creator of Flutter content, we provide a new way for you to integrate DartPad into your creation process.

Finally, Flutter now has a new low-code application design and build tool called FlutterFlow. The tool runs on the Web and is itself built using Flutter.

Flutter Favorite update

In this release, thanks to the hard work of the Flutter Ecosystem Council (FEC), we have added 24 Flutter Favorite certified packages, one of the biggest expansions in our history. These new Flutter Favorites packages include:

  • FlutterFire package (Official version) : cloud_firestore,cloud_functions,firebase_auth,firebase_core,firebase_crashlytics,firebase_messagingfirebase_storage
  • Flutter Community “plus” package: android_alarm_manager_plus,android_intent_plus,battery_plus,connectivity_plus,device_info_plus,network_info_plus,package_info_plus,sensors_plusshare_plus
  • googleapis package
  • win32 package
  • The Intl and characters of package
  • Sentry package: Sentry and sentry_flutter
  • Infinite_scroll_pagination and flutter_native_splash package

All of these packages already support null security and support Android, iOS, and Web platforms where possible. There are some exceptions, such as Firebase_Crashlytics without an underlying SDK for the Web platform, while Android_alarm_Manager_Plus is designed for the Android platform.

The Flutter Community “plus” Package provides more features on top of the official Flutter team package. For example, The Battery package provided by Google’s Flutter team dates back to before the release of the original Flutter. It now has air-safety features, but only for Android and iOS. In contrast, the Flutter Community Battery_plus package supports all six Flutter platforms, including Web, Windows, macOS and Linux. All nine of the built-in “plus” packages have gained Flutter Favorite approval, marking a significant step towards the maturity of the whole Flutter community. The Flutter project has gone far beyond Google’s engineering team. You should migrate your code to the “plus” package as soon as possible. In the coming weeks, Google’s relevant package will be updated and you are advised to migrate.

The Google apis plug-in provides automatically generated Dart packages for 185 Google apis that you can use in Dart applications on the client or server side, including your Flutter application. To learn more about this package, you can watch the author’s I/O conference talk on empowering your Flutter application using the Google API.

The Win32 Package is an engineering masterpiece that encapsulates most of the commonly used Win32 APIS using the Dart FFI, allowing Dart code to use these apis without relying on a C compiler or Windows SDK. As Flutter has gained traction on the Windows platform, Win32 Package has become a key dependency for many popular plug-ins, including one of the most popular Flutter packages, Path_provider. To push the envelope, author timsneath has pulled off some amazing feats, such as notepad, snake, and tetris using pure Win32 and pure Dart.

Tetris on Windows using only the Dart FFI and Win32 interface

If you’re doing any Dart or Flutter development on Windows, the Win32 Package is worth checking out.

FlutterFire update and Firebase App Check

As the Firebase plugin for Flutter, FlutterFire is one of the most popular Flutter plug-ins. The Invertase team, the main contributor, did a great job of getting the official version of the plugin set released with Flutter 2 and continued to improve it later. Since the first official release of FlutterFire, Invertase has reduced the number of unresolved issues by 79% and the number of PR pending by 88%. Not only did they do a great job with the official plug-ins, but they also managed to get all the Beta plug-ins to support empty security, while getting them built and running on every core you might encounter.

Invertase continues to add more features to the FlutterFire plugin, including several updates to the Cloud Firebase integration in the new Version of Flutter:

  • The Typesafe API for reading and writing data
  • Support for Firebase Local Emulator Suite
  • Optimize your data queries with data Bundles

FlutterFire also now supports Firebase’s new beta product, Firebase App Check. Firebase App Check helps you protect backend resources such as Cloud Storage from abuse such as payment fraud or phishing attacks. With App Check, the device running your Flutter application can verify the proper identity of the application instance through an application authentication provider and Check that the application is running on a trusted device that has not been tampered with. Once you enable App Check, certification information is appended to every request your application makes to a Firebase backend resource. For details, see the FlutterFire App Check documentation.

Flutter DevTools update

This version of Flutter DevTools brings several major updates, including two improvements to memory tracking and a new TAB dedicated to the Provider plugin.

The first improvement in memory tracing is to track where objects are allocated memory. This helps identify the code that is causing the memory leak.

The Memory TAB of Flutter DevTools allocates stack traces

Second improvement: Injecting custom information into the in-memory timeline. This allows you to add annotations on an application-specific basis, such as marking the start and end points of memory-intensive work to verify that cleanup has been properly performed.

The Flutter DevTools timeline TAB customizes memory events

As the size of Flutter applications continues to grow, we will continue our efforts to provide Flutter developers with the tools they need to track and fix memory leaks and various other runtime issues.

The problems you need to troubleshoot are not only those runtime problems related to the Flutter framework, but sometimes also those related to the package on which the Flutter depends. As the number of Flutter compatible packages on pub.dev crosses the 15,000 mark, the number of packages used by your application is likely to grow as well. To this end, Flutter DevTools has added an experimental Provider TAB, created by Remi Roussel, developer of the Provider Package itself and many other wonderful software. If you are running the latest version of Flutter, the Provider TAB is automatically displayed when you debug a Flutter application that includes the Provider plugin.

Practical demo: the Flutter DevTools Provider TAB

The Provider TAB shows you the data for each Provider and shows you the changes you make as your application runs in real time. Great, isn’t it? Not only that, it also lets you directly change this data to test your application’s corner cases. Too great!

In working with Remi to develop this TAB, we also learned some valuable lessons about how to best serve package authors with similar needs. You can see how Remi builds the Provider TAB and see our current ideas for improvements through the Flutter DevTools plugin proposal. Feedback is welcome; Also, if you have any ideas on how to add more tabs to Flutter DevTools, we’d love to hear from you.

These improvements are just a few of the many improvements made to this version of Flutter DevTools. For a complete list, see the following announcements:

  • Description of Flutter DevTools version 2.1
  • Description of Flutter DevTools version 2.2.1
  • Description of Flutter DevTools version 2.2.3

IDE Plug-in Update

In this release, the Visual Studio Code and IntelliJ/Android Studio IDE extensions for Flutter have also been updated. For example, the Visual Studio Code extension now supports two additional REfactorings of Dart Code: inline functions and inline local variables.

Field demo: New “inline function” Dart refactoring

In the Android Studio/IntelliJ extension, we added an option to output all stack traces in the console.

You can now output all stack traces, not just the first one

This new feature can come in handy if the root cause of a problem in a project is in another package, where previously the relevant trace was not included in the output. But then the question is, how do you make the trajectory information easier to parse? We already have some ideas, welcome to pay attention to the subsequent changes.

For a complete list of changes to IDE extensions in this release, see the following announcements:

  • VS Code extension V3.21
  • VS Code extension V3.22
  • The Plugin for Flutter IntelliJ is M55
  • The Plugin for Flutter IntelliJ is M56

DartPad classroom practice

To ensure that the Flutter developer community thrives and documentation keeps pace, Dart and the Flutter team are constantly looking for ways to improve and expand the way Flutter training content is produced. In this release, we have added a new, step-by-step interface to DartPad to make it easy for developers to do hands-on work while taking lecturer-led courses/lectures.

Field demo: DartPad course/lecture hands-on

By incorporating practical guidance directly into DartPad, we achieved a guided lecture experience at THIS year’s I/O. However, this feature was not developed specifically for our own needs. If you want to use the tool in your Dart or Flutter courses/lectures, you can follow the instructions in the DartPad Training Content Creation Guide. This feature is not to be confused with the ability to share code through DartPad in Gist and embed DartPad on your site, both of which have been around for a while.

We want all Dart and Flutter content writers to deliver a rich interactive experience to their audiences. Please try it out and give us feedback.

Community Focus: FlutterFlow

FlutterFlow is a “low code” application design and development tool for building applications in a browser. It provides a “WYSIWYG” environment that allows you to design application layouts across multiple pages based on actual Firebase data. The goal of this tool is to make it easy for you to perform most common operations while minimizing the amount of code you need to write yourself. In fact, in one demo, the presenter used the tool to build an entire mobile app with multiple pages to help users navigate the Metropolitan Museum of Art in less than an hour, without writing a line of code. You can watch a video recording of the whole process on YouTube.

Major changes that affect compatibility

As always, we try to avoid major changes that affect compatibility. In this release, such changes are limited to removing the following obsolete components:

  • 73750 Remove obsolete BinaryMessages
  • 73751 Remove the deprecated TypeMatcher class

You can find migration guidelines for these changes in flutter.cn.

conclusion

The Entire Google Flutter team would like to extend our sincere thanks to you all! We would like to thank everyone in the Flutter community for their contribution to Flutter’s success. Today, more than one in eight new Apps on the Play Store are built with Flutter, and there are over 200,000 Flutter apps on the Play Store alone. Flutter has grown unexpectedly fast. App teams large and small around the world are developing Flutter to create a great experience for users across many platforms. Thank you for choosing Flutter!

Finally, in case you missed it, don’t forget to check out the I/O Photo Booth Web app launched at I/O. The Web app built with Flutter and Firebase allows you to take cute headshots with Dash. We have also opened up the source code to learn more about Flutter Web best practices, camera plugin Web support, and how to use Cloud Functions to generate custom social content. See it now or never!