Flutter 2.2 update details

Flutter version 2.2 has been officially released! To get the new version, you only need to switch to the stable channel and update the currently installed Flutter, or go to flutter.cn/docs/get-started to install from scratch.

Although it is only a few months away from version 2.0, version 2.2 is still full of many improvements. This version included a total of 2,456 PRs in frameworks, engines, and plug-in libraries, and solved 3,105 issues. We would like to thank the entire Flutter community that contributed a lot of PR and PR reviews to this version, including Abhishek01039 xu-baolin most PR reviews (9). Sincerely thank all developers for their contributions to the smooth release of the stable version of Flutter 2.2. Without everyone's support, we will not be able to do it.

Each new stable version of Flutter will bring a series of changes such as performance improvements, new features, bug fixes, etc., and will provide some experimental features that have not yet been tested in the production environment. I hope you can help us verify whether these features work properly. And to meet your needs. In addition, the new version will also include a series of related tool updates and updates from the Flutter community. Frankly speaking, the content of each new version of Flutter today is very rich, and it is impossible to elaborate in detail in an article, so below we will focus on introducing some of the main highlights for you.

Flutter 2.2 stable version update

This version has made many improvements on the basis of Flutter 2, including not only updates for Android, iOS and web platforms, but also new Material icons, improvements in text processing, changes in scroll bar behavior, and the mouse cursor of the TextSpan widget Support, and new guidelines for adapting multiple platforms with one code. These functions have all been released in stable version, which can be used in the official version of the application. At the same time, all these functions are built on the new 160b0b1204d155 version of Dart .

Dart 2.13

Along with Flutter version 2.2, Dart version 2.13 is also released. This version of Dart includes many new features, one of which is the new type aliases, which allows you to create aliases for types, just like creating aliases 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>;

With type aliases, you can give long and complex types short and easy-to-understand names, and rename your classes in a way that does not break the code. Dart 2.13 also contains many other updates, you can learn more Dart 2.13 release

Flutter web update

As the latest platform supported by the stable version of Flutter, the web platform also has many improvements in this version.

First, we optimized the caching behavior with the new service worker loading mechanism, and fixed the repeated download problem main.dart.js In the old version of Flutter web, the service worker will download app updates in the background, and users can use the old version of the app as usual during this period. After the update is downloaded, the user has to refresh the browser page several times before seeing the corresponding update. In Flutter version 2.2, when the new service worker detects an update, users need to wait for the update to be downloaded before they can use the app, but they do not need to manually refresh the page again to see the updated content.

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

We also made improvements to both web renderers. On the HTML renderer, we added support for font feature to enable FontFeature settings and use the canvas API to render the text, so that the text at the mouse hover can be displayed in the appropriate position. In the HTML and CanvasKit renderers, we added support for shader masks and computeLineMetrics to solve the inconsistency between Flutter web apps and mobile apps. For example, developers can now use shader masks to achieve fade-out transitions opacity mask computeLineMetrics as in mobile applications.

Accessibility is not only a major focus of Flutter web, but also a focus of Flutter as a whole. According to the design, the barrier-free function is realized SemanticsNode After the users of the Flutter web application enable accessibility, we will generate a RenderObject DOM tree and convert the semantic attributes to Aira. In this version, we have improved the semantic node position and eliminated the inconsistency between mobile apps and web apps when using transforms. This means that when using transforms to style widgets, the focus frame will be correctly displayed on the element Above. For an intuitive understanding of its actual effect, you can watch the video of Victor Tsaran, the head of Material Design's accessibility project, to learn how he Flutter Gallery App.

We now also provide a command-line flag suitable for profile and release modes for developers to access the semantic node debugging tree and visually view the semantic nodes created by the system for their web applications. Accessibility features for debugging.

To enable this feature for your Flutter web app, run the following command:

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

After activating the flag, you will be able to see your semantic node above each widget, so you can debug and check whether the position of the semantic element meets expectations. If you find this kind of problem, welcome to our submit bug reports .

Although great progress has been made in supporting core accessibility features, we are still making continuous improvements in this area. In 2.2 stable version Master and dev channel build later, we added a new API, for developers to programmatically their application automatically enable accessibility , and we're working on screen reader The problem of using the Tab key

Last but not least, the latest version of Flutter DevTools now also supports the use of layout browsers for your Flutter web applications.

You can now use the layout debugging tools you are familiar with in web applications, just like mobile applications and desktop applications.

iOS page transition and incremental installation

For the iOS platform, this version reduces the rendering time of animation frames by 75%. makes page transitions in the Cupertino theme smoother . The reduction ratio may be even higher on low-end phones. We have not only improved the performance perceivable by end users, but have also been looking for ways to improve development performance.

In this version, we have implemented the incremental iOS installation during the development process. The benchmark test results show that the installation time of the updated version of the iOS app has been shortened by 40%, which also shortens the test cycle of your app changes.

Use Flutter to build platform adaptive applications

As the stable version of Flutter gradually supports more platforms, you need to consider not only compatibility with different device types (such as mobile phones, tablets, and desktop computers) when designing applications, but also support for different input methods (touch and keyboard and mouse). And to adapt to different usage habits on each platform (for example, whether to use the navigation drawer or the system menu when navigating). If the application can make corresponding adjustments according to the details of different target platforms, we call it a platform-adaptive application.

If you want a preliminary understanding of what factors should be considered when building a platform-adaptive application, please watch Kevin Moore's video Building a platform-adaptive application For more information about, you can read guide Flutter document on the adaptive platform applications .

Finally, if you need to refer to the multi-platform application examples written by following these guidelines. We suggest you take a look at the Flokk and Flutter Folio apps created by gSkinner. You can download the source code of Flokk and Folio Flokk and Folio from various app stores, and run them directly in the browser application Another good example is used to create the guide itself.

The UX part of the Flutter platform adaptive application guide is based on the new Material large screen guide . In this newly released guide, the Material team revised a number of major layout articles, adjusted a number of components, and updated the Design Kit based on the characteristics of the large screen.

Flutter's goal has always been to allow applications to go higher and farther, not just to be able to run normally on multiple platforms. If your application is not well adapted to all target platforms, we will not stop. Flutter can provide you with the support you need, so that your application can not only cover multiple target platforms, but also make appropriate adjustments for different screen sizes, input methods, and different usage habits of each platform.

More Material icons

Speaking of the Material Guide, this version also includes two separate PRs, adding more Material icons to Flutter. Our cute mascot Dash now also has its own icon!

With these new icons, the total number of Material icons available for your application has now exceeded the 7,000 mark. If you are having difficulty finding the icon you need in this huge number of icons, you can visit fonts.google.com/icons to search for icons by category and name.

After you find the ideal icon, you can view instructions on how to use the icon in the new "Flutter" tab. You can also download this icon separately and use it as an independent resource in the application. Adding Dash's cute image to your Flutter app has never been easier.

Search Material icon by name

Improved text processing

As we continue to improve Flutter to better adapt to the specific characteristics of each platform, we are gradually entering some new areas that are not prominent on mobile devices but are important on desktop devices, one of which is text processing. In this version, we set out to refactor the text input processing method to achieve the following functions: cancel key events during the process of propagating within the widget hierarchy, and be able to fully customize the text operations associated with them button.

Since key events can now be cancelled, Flutter will no longer trigger scroll events when pressing the space bar and arrow keys, allowing users to enjoy a more intuitive experience. You can also use this feature to process a key event before it is propagated to the parent widget in your app. Another example is that you can use the Tab key to jump between the TextField and the button in your Flutter application, and everything will work 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')),
         ],
       ),
     );
}

Flutter 2.2 can cancel key events as they propagate upwards within the widget hierarchy; for example, you can use the TAB key to switch the focus from TextField to other elements

Custom text operations allow you to implement special handling of the Enter key event in the TextField. For example, the Enter key can trigger the message sending operation in the chat client, and the user can press Ctrl+Enter to wrap the line. This type of text operation allows Flutter itself to provide different key settings , so that the text editing behavior is consistent with the host operating system. For example, use Ctrl+C to copy text on Windows and Linux, and Cmd+C on macOS .

The following is an example of this, which overrides the default left arrow key operation and sets new operations for the backspace key and delete key:

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(covariant ClearIntent intent) {
   controller.clear();
 }
}

A bad TextField example, pressing the left arrow key or ESC key will clear the text

In this regard, we do still have a lot of work to do, but we will spare no effort to give developers complete control over text editing operations. The goal is that when the Flutter desktop version reaches stability, end users will not be able to distinguish the difference between the text editing function in the Flutter application and other applications in the host operating system.

Auto scroll behavior

We have been committed to making the performance of Flutter applications the same as the best applications on each platform. For this reason, we have further optimized the scroll bar in this version. In the display mode of the scroll bar, Android and iOS will be exactly the same, that is, the scroll bar is not displayed by default. But in desktop applications, as long as the content is larger than the container, scroll bars are usually displayed automatically. This requires you to add a parent widget of Scrollbar In order to achieve correct behavior on both mobile and desktop devices, this version will automatically add a Scrollbar when needed.

The following is a piece of code without 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'),
       ),
     );
}

When the above code runs on a desktop platform, a scroll bar will be displayed:

If you don’t like the appearance of the scroll bar or don’t want the scroll bar to display all the time, you can set ScrollBarTheme . If you don’t like the default behavior, you can change it ScrollBehavior To learn more about the new default scroll bar behavior and how to migrate code to follow the new best practices, please refer to Flutter official document .

Mouse pointer on

In previous versions of Flutter, you can add a mouse pointer to any widget (for example, a hand-shaped pointer to indicate that the element is available for clicking). In fact, Flutter will add this type of mouse pointer for you in most cases, such as adding a hand-shaped mouse pointer on all buttons. However, if you use multiple different styles of TextSpan to implement a piece of rich text, and its length may be so long that it needs to be wrapped, there is no way to add a mouse pointer to it. This is because TextSpan does not belong to widget and cannot be used to define The visual range of the mouse pointer. But it's different now! In the new version, if your TextSpan gesture recognizer (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');
                   },
               ),
             ],
           ),
         ),
       ),
     );
}

Now you can freely use any text-wrapped TextSpan, as long as it has a gesture recognizer, the system will set an appropriate mouse pointer for it.

In this release, TextSpan addition to supporting mouseCursor , also supports onEnter and onExit . These improvements seem to be small, but have a large impact on the user experience, allowing Flutter applications to provide a user experience closer to the user's expectations.

New preview features in Flutter 2.2

In addition to new features suitable for production environments, Flutter 2.2 is also equipped with a number of new preview features, including iOS shader compilation performance improvements, Android lazy loading component support, Flutter desktop platform updates, and ARM64 Linux host support contributed by Sony. You are welcome to experience these features, and to us when you encounter problems.

iOS shader compilation improvements

In the field of graphics rendering, "shader" refers to a program that is compiled and run on the GPU available to the end user's device. Flutter has used shaders in the underlying Skia graphics library since its inception to achieve high-quality graphics effects in terms of color, shadow, animation, etc., while achieving superior performance comparable to native code. Thanks to the flexibility of the Flutter API, shaders can be JIT generated and compiled on the fly, 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, it will cause the user to feel stuck.

To avoid this kind of lag, Flutter allows you to cache the shader during the training run, package it into the application, and then compile it before the first frame when the Flutter engine starts. In this way, these pre-compiled shaders do not have to be compiled during the frame workload, and will not cause stuttering. However, Skia only implemented this feature for OpenGL at first.

As a result, after we enabled the Metal backend on iOS by default due to Apple's abandonment of OpenGL, the worst frame time value measured by the benchmark has increased, and the number of user reports of stuttering has also increased. After investigation, we found that such lags are often caused by the following factors: increased shader compilation time, increased number of shaders generated by Skia for the Metal backend, and failure to cache the compiled shaders between multiple runs And thus cause the application to still appear stuck in the subsequent run.

So far, the only way to prevent this kind of lag on iOS is to simplify the scenes and animations, which is not an ideal solution.

To solve this problem, we have released dev channels Skia for Metal new shader preheated support the preview function. Flutter will now use Skia to compile the bundled shaders before the first frame of the workload starts.

Track record of pre-compilation operations during application startup

However, this solution has some shortcomings:

• Compared to the OpenGL backend, Skia will still generate more shaders for the Metal backend.
• The final compilation of the shader into machine code still happens in sync with the frame workload, but it is better than performing all the shader generation and compilation operations during the frame rendering time.
• The final generated machine code will be cached after the application is run for the first time until the device is restarted.

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

We will continue to improve this implementation plan. On Android and iOS, it currently has several disadvantages:

• Because of the bundled shader, the deployment volume of the application is larger.
• Since the bundled shader needs to be pre-compiled, the application startup delay is longer.
• There may be a negative impact on the developer experience.

Among them, we attach the most importance to the last point. We believe that developers should not need to perform training runs, nor should they bear the cost in terms of application size and startup delay. Therefore, we are continuing to explore whether there are other methods that do not rely on this implementation to eliminate shader compilation lag and other types of lag. We are working with the Skia team to reduce the number of shaders requested by Flutter, and to explore the feasibility of bundling a small number of statically defined shaders in the Flutter engine.

You can follow Flutter code base to understand the relevant progress.

Android Lazy Loading Components: Downloadable AOT code and resources

On the Android platform, this version uses Dart's split AOT compilation function to containing pre-compiled codes and resources at runtime. We call this installable split module a "delayed load component". Since the code and resources can be downloaded when needed, the initial installation volume of the application is significantly reduced. For example, we implemented a special version of the Flutter Gallery application, and set all cases and demos to lazy loading, thus reducing the initial installation volume by 46%.

Download the Crane case in the Flutter Gallery app

If you enable lazy-loading components when building an application, Dart will deferred keyword into a separate shared library, and package these libraries together with related resources as lazy-loaded components.

This feature is still in the early preview stage and currently only supports Android. You can learn how to implement such components in the delayed loading component page on the official Flutter documentation. This page also links to a page on the Flutter wiki that details how this feature works. If you find a problem, please let us know Flutter issue tracker

Flutter Windows UWP alpha

Another update of this version of Flutter is for the desktop platform: support for Windows UWP has now entered the alpha version in the dev channel (after the 2.2 stable version). With UWP, your Flutter application will be able to cover Xbox and other devices that cannot run standard Windows applications. To try this feature, please first meet the UWP prerequisite , then switch to the dev channel and enable UWP support.

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

After enabling, the created Flutter application will contain a new winuwp folder so that you can build and run your application in the UWP container:

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

Since you are building a Windows UWP application running in a Windows sandbox environment, you need to set the localhost penetration setting for the application firewall during development to implement functions such as hot reload and debugger breakpoints. To do this, you can checknetisolation according to the instructions on the Flutter desktop documentation page After completing the relevant operations, you can run your favorite Flutter apps as UWP apps on Windows.

Run your favorite Flutter apps in Windows UWP containers

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

Flutter app running on Xbox

We would like to thank clarkezone , who has been dedicated to implementing this feature since I joined the Flutter team. To learn more about Windows UWP alpha version support, please refer to official document .

ARM64 Linux host contributed by Sony supports

This outstanding contribution comes from the Sony software engineer HidenoriMatsubayashi in the Flutter community. ARM64 Linux target he submitted This PR allows you to build and run Flutter applications on ARM64 Linux machines.

Run your favorite Flutter apps on ARM64 Linux machines

We are very happy to see the Flutter community port Flutter to a platform beyond the imagination of the Google team. HidenoriMatsubayashi, thank you so much!

Flutter Ecosystem and Tool Update

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 experience of Flutter developers. We also have several great updates in this area to share with you.

On the ecosystem side, we released multiple Flutter Favorite packages and updated Flutter's Firebase support plug-in set FlutterFire. FlutterFire now also supports the new Firebase App Check preview, allowing Flutter developers to benefit from this product from day one.

On the tool side, Flutter DevTools has made a number of updates to help you optimize the memory usage of your application, and also provides a tab page for the Provider package. There are also major updates to IDE plugins for VS Code and Android Studio/IntelliJ. In addition, if you are a creator of Flutter-related content, we also provide a new way for you to integrate DartPad into your creative process.

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

Flutter Favorite Update

In this version, thanks to the hard work of the Flutter Ecosystem Council (FEC), we have added 24 Flutter Favorite certified packages, which is the largest expansion in history. These newly released Flutter Favorites packages include:

• FlutterFire package (official version) : cloud_firestore , cloud_functions , firebase_auth , firebase_core 0604e0f2, 060b0b1204e0f2, 060b0b1204e0f2, 060b0b1204e0f2, firebase_crashlytics , firebase_messaging , firebase_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_plus share_plus
• googleapis package
• win32 package
• Intl and characters package
• Sentry package : sentry and sentry_flutter
• infinite_scroll_pagination and flutter_native_splash Package Penalty for

All these packages already support the null security feature and support Android, iOS and web platforms as much as possible. There are some exceptions. For example, firebase_crashlytics does not have an underlying SDK for the web platform, while android_alarm_manager_plus is specifically designed for the Android platform.

The Flutter Community "plus" package provides more features on the basis of the official package of the Flutter team. battery package provided by Google's Flutter team dates back to before the release of the first version of Flutter. It now has empty safety features, but only supports Android and iOS platforms. In contrast, Flutter Community battery_plus package supports all 6 Flutter platforms, including web, Windows, macOS and Linux. All 9 "plus" packages built into the kit have been recognized by Flutter Favorite, which is a major step towards maturity for the entire Flutter community. The Flutter project is far more than the Google engineering team working alone. You should migrate your code to the "plus" package as soon as possible. In the next few weeks, Google’s related packages will be updated, and it is recommended that you migrate.

The googleapis plugin Google API for you to use in client-side or server-side Dart applications (including your Flutter application). To learn more about this package, you can watch its author's I/O conference speech on using Google APIs to empower your Flutter application.

The win32 package is a masterpiece of engineering. It uses Dart FFI encapsulate most of the commonly used Win32 API interfaces, so that Dart code can use these APIs without relying on a C compiler or Windows SDK. As Flutter gains more and more attention on the Windows platform, the win32 package has become a key dependency of many popular plugins, including path_provider , one of the most popular Flutter packages. In order to challenge the limit, its author timsneath made some amazing feats, such as using pure Win32 and pure Dart to achieve notepad (notepad), (Russia) and 160b0b1204e3 (notepad)

Tetris game running on the Windows platform using only Dart FFI and Win32 interface

If you have any Dart or Flutter development on Windows, the win32 package is worth checking out.

FlutterFire update and Firebase App Check

As a collection of Flutter's Firebase support plugins, FlutterFire has become one of the most popular Flutter plugins. In order for the official version of the plug-in set to be released together with Flutter 2 and continue to improve it thereafter, its main contributor, the Invertase team, has done a lot of excellent work. Since the release of the first official version of FlutterFire, Invertase has reduced the number of unresolved issues by 79% and the number of pending PRs by 88%. They not only made great achievements in the development of the official version of the plug-in, but also successfully supported the null security mechanism for all the Beta version of the plug-in, and at the same time allowed these plug-ins to be built and run normally on the various cores you may encounter.

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

• Typesafe API for reading and writing data
• Support Firebase Local Emulator Suite
• Optimize your data query with data bundles

FlutterFire now also supports Firebase’s new beta version Firebase App Check . Firebase App Check helps you protect back-end resources such as Cloud Storage from abuse such as payment fraud or phishing attacks. With App Check, the device running your Flutter application will prove the proper identity of the application instance through an application identity certification provider, and can check whether the application is running on a trusted device that has not been tampered with. Once you enable App Check, the corresponding certification information will be attached to every request your app makes to Firebase backend resources. To learn more, see FlutterFire App Check document .

Flutter DevTools update

This version of Flutter DevTools brings a number of major updates, including two improvements in memory tracking and a new tab page dedicated to the Provider plug-in.

The first improvement in memory tracking: tracking the memory allocation location of the object. This helps to find out the code that caused the memory leak.

Flutter DevTools memory tab allocation stack trace

The second improvement: Inject custom information into the memory timeline. This allows you to add annotations based on the specifics of the application, such as marking the start and end points of memory-intensive tasks to verify that cleanup was performed properly.

Flutter DevTools timeline tab custom memory events

As the volume of Flutter applications gradually grows, we will continue to work hard to provide Flutter developers with the tools they need to help them track and fix memory leaks and various other runtime problems.

The issues you need to troubleshoot are not just those runtime issues related to the Flutter framework, but sometimes also issues related to the package you rely on. As the number of Flutter compatible packages on pub.dev breaks through the 15,000 mark, the number of packages used by your app is likely to grow accordingly. In view of this, a new experimental Provider tab has been provider package itself and many other excellent software developers Remi Roussel . Provider tab will be automatically displayed when you debug a Flutter application that includes a provider plug-in.

Practical demonstration: Flutter DevTools Provider tab

The Provider tab will show you the relevant data of each provider, and will reflect the changes you make during the running of the application in real time. Isn't it great? Not only that, it also allows you to directly change these data to test the corner cases of the application. awesome!

In the process of working with Remi to develop this tab, we also learned some valuable experience and how to better serve package authors with similar needs. You can learn how on the Provider tab, and you can also learn about our current improvement ideas Flutter DevTools Welcome to provide us with feedback; at the same time, if you have your own ideas on adding more tabs to Flutter DevTools, we are also looking forward to hearing your insights.

The above improvements are just a few of the many improvements in this version of Flutter DevTools. For a complete list, please see the following announcement:

• Flutter DevTools 2.1 Release Notes
• Flutter DevTools 2.2.1 Release Notes
• Flutter DevTools 2.2.3 release notes

IDE plug-in update

In this version, 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 Dart code refactorings: inline functions and inline local variables.

Practical demonstration: the new "inline function" Dart refactoring

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

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

If the root cause of a problem in the project is in another package, and the previous related traces will not be included in the output, this new feature can come in handy. But a question that follows is how to make the trajectory information easier to comprehend and read? We already have some ideas, welcome to follow up related changes.

For a complete list of changes to the IDE extensions in this version, please see the following announcement:

• VS Code extension v3.21
• VS Code extension v3.22
• Flutter IntelliJ plug-in M55 version
• Flutter IntelliJ plug-in M56 version

DartPad Practice in class

In order to ensure that the Flutter developer community is thriving and related documents can also keep up, Dart and the Flutter team are always looking for ways to improve and expand the production methods of related training content. In this version, we have added a new step-by-step interface to DartPad, allowing developers to easily practice in the classroom when learning lecturer-led courses/lectures.

Practical demonstration: DartPad course/lecture practice in class

By adding practical guidelines directly to DartPad, we achieved guided lecture experience at this year's I/O conference. However, this feature is not specifically developed for our own needs. If you want to use this tool in your own Dart or Flutter course/lecture, you can follow the 160b0b1204e924 DartPad Training Content Creation Guide . Do not use this function with DartPad shared by Gist Code and embedded DartPad on your website these two features confused, the latter two have been launched for some time.

We hope that all Dart and Flutter content authors can bring rich interactive experiences to their audiences. Welcome to try and to provide us with feedback .

Community Spotlight: FlutterFlow

FlutterFlow is a "low code" application design and development tool for building applications in the browser. It provides a "what you see is what you get" environment that allows you to design application layouts that span multiple pages based on actual Firebase data. The goal of this tool is to allow you to easily perform most common operations and minimize the amount of code you need to write yourself. In fact, in a demonstration, the presenter used this tool in less than an hour to build a complete mobile application with multiple pages that can help users navigate the Metropolitan Museum of Art without writing a single line of code. You can watch the video record whole process on YouTube.

Major changes

As always, we will try to avoid major changes that affect compatibility. In this version, such changes are limited to the removal of the following obsolete components:

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

You can find these corresponding changes in the Migration Guide on flutter.cn .

Conclusion

All my colleagues in the Google Flutter team would like to extend my sincere thanks to everyone! We want to thank everyone in the Flutter community. Flutter's achievements are inseparable from everyone's contribution. Today, more than one-eighth of the new apps in the Play Store are built with Flutter, and there are as many as 200,000 Flutter apps in the Play Store alone. Flutter's rapid development momentum is unexpected. Application teams large and small all over the world use Flutter for development to create high-quality experiences for users on many platforms. Thank you for choosing Flutter!

Finally, in case you miss it, don’t forget to experience the I/O Photo Booth web application , which was launched at this I/O conference. It is a web application built by Flutter and Firebase, allowing you to be in sync with Dash. Cute portraits. We also its source code , so that you can learn more about Flutter web best practices, camera plug-in web support, and how to use Cloud Functions to generate custom social content. Don't miss the opportunity, let's take a look!