头图

The official version of Flutter 2.5 was officially released last week! This is an important version update, and it is also the second-ranked version in various statistics in Flutter's release history. We closed 4600 Issues and merged 3932 PRs from 252 contributors and 216 reviewers. Looking back at last year - we received 21072 PR submissions from 1,337 contributors, of which 15,172 were merged. Before detailing the content of this update, we want to emphasize that Flutter's first priority is always to deliver high-quality features that developers need.

Flutter 2.5 brings some important performance and tool improvements to help developers track performance issues in applications. At the same time, some new features have been added, including full-screen support for Android, more support for Material You (also known as v3), updates to text editing to support switching keyboard shortcuts, viewing widget details in the Widget Inspector, and New support for adding dependencies in Visual Studio Code projects, new support for obtaining test coverage information from IntelliJ / Android Studio test runs, and an application template that is closer to Flutter applications in real usage scenarios, etc. This version is full of exciting new updates, let's get started!

This version has some performance improvements: the first is a PR ( #25644 ) that is used to connect Metal shader precompiled from offline training runs, which reduces the worst-case rasterization time by 2/ 3 (as shown in our benchmark), halved the 99th percentile frame time. We have made continuous progress in reducing iOS lag, which is another step on this road. However, shader warm-up is only one source of lag. Before this version, processing asynchronous events from the network, file system, plug-ins, or other isolates may cause the animation to be interrupted, which is another source of lag. In this version, we have improved the UI Isolate's event loop scheduling strategy ( #25789 ). Now the frame processing takes precedence over the processing of other asynchronous events. In our test, the stall caused by it has been eliminated.

调整前后处理异步事件造成的帧构建滞后时间

Another reason is that garbage collection (GC) suspends the UI thread to reclaim memory. Before this version, the memory of some images can only be reclaimed at a slower rate when Dart VM executes GC. In the early version, the common practice is that the Flutter engine will prompt the Dart VM that the image memory can be recycled by GC, which can theoretically make the memory recycling more timely. Unfortunately, in practice this caused too much recycling, and sometimes the memory still cannot be quickly recycled, resulting in unavoidable low-memory situations on devices with limited memory. In the current version, the unused image memory will be recycled as quickly as possible ( #26219 , #82883 , #84740 ), which greatly reduces the number of GCs.

修复前和修复后的 GC 次数,以尽快回收未使用的大图像内存

For example, in one of our tests, a 20-second GIF animation was played, and the number of GCs dropped from 400 times to only 4 times. Fewer major GCs means less animation lags involving the appearance and disappearance of images, and less CPU and power consumption.

Another performance improvement of Flutter 2.5 is to optimize the communication delay between Dart and Objective-C/Swift on iOS, and Dart and Java/Kotlin on Android. As part of adjustment of the message channel , we removed unnecessary copies from the message codec and reduced latency by up to 50% on different content sizes and devices (see #25988 , #26331 ).

调整前后的 iOS 消息延迟

For more details, please refer to Aaron Clarke's article: improve platform channel performance in Flutter .

If you want to build iOS apps, we have one last performance update: In this version, Flutter apps built with Apple Silicon M1 Mac can be run directly on the ARM-based iOS simulator ( #pull/85642 ). This means that there is no need to use Rosetta to convert between Intel x86_64 instructions and ARM, which improves the performance of iOS application testing and avoids some subtle Rosetta problems ( #74970 , #79641 ). This is another step taken by Flutter on its journey to fully support Apple Silicon, so stay tuned.

Of course, without the Dart language and its runtime environment, there would be no current Flutter, which is based on the Dart language and runtime. Flutter 2.5 also brought Dart 2.14. newly released Dart version not only brings new formatting to make cascade clearer, but also brings a new pub command tool that supports ignoring files, as well as new language features (including the legendary unsigned right The return of the shift operator). In addition, this version brings a new set of standard code specification tips shared between Dart and Flutter projects, out of the box, which is also the most exciting part of Dart 2.14.

flutter create has an analysis_options.yaml file right out of the box, using the recommended Flutter lint in advance.

When you create a new Dart or Flutter project, not only can you use these specifications, but only takes a few steps and can add this same analysis to your existing applications. For details of these specifications, new language features and more, please refer to: Dart 2.14 released .

Flutter 2.5 version has made some fixes and improvements to the framework. We fixed a series of related issues regarding the Android full-screen mode . The Issue has received hundreds of likes. The full-screen options include tilt backward, immersive mode, sticky immersive mode, and edge-to-edge. This change also adds a method to monitor full-screen changes in other modes. For example, if the user changes the full-screen mode of the system interface while using the application, the developer can now use the code to make the application full-screen again, or perform other operations.

新的 Android 边到边模式:正常模式 (左),边到边模式 (中),带有自定义 SystemUIOverlayStyle 的边到边 (右)

In this version, we continue to build support for the new Material You (also known as v3) specification, including updates to the floating button size and theme ( #86441 ), and a new MaterialState.scrolledUnder status, you can pass PR ( #79999 ) in the sample code to see its effect.

Material You 中新的 FAB 尺寸

新的 MaterialState.scrolledUnder 状态

When we were discussing scrolling, another improvement was the addition of additional scroll indicator notifications ( #85221 , #85499 ), even if the user is not scrolling, notifications of scrollable areas will be provided. For example, the following example shows the effect of the scroll bar appearing or disappearing at the right time according to the actual size of the ListView.

新的滚动指标通知,使滚动条自动出现和消失。

In this case, you do not need to write any code to capture the changes of ScrollMetricNotification Special thanks to the community contributor xu-baolin , he has done a lot of work in this area and proposed a good solution.

Another outstanding contribution of the community is the addition of Material banner support ScaffoldMessenger In Flutter 2.0 new in ScaffoldMessenger , it provides a powerful way, displayed at the bottom of the screen SnackBars to provide notification to the user. In Flutter 2.5, you can now add a banner to the top of Scaffold and it will stay in place until the user closes it.

你可以通过调用 ScaffoldMessenger 的 showMaterialBanner 方法触发这种行为

The Material Guide for stipulates that your application can only display one banner at a time, so if your application calls showMaterialBanner multiple times, ScaffoldMessenger will hold a queue and display the next new banner when the previous banner is closed. Thanks to Calamity210 for providing a powerful supplement to Flutter's Material support.

Based on Flutter 2.0 and its new text editing features, we have added the ability to this version such as text selectors, intercepting and overwriting any keyboard events, and overwriting keyboard shortcuts for text editing ( #85381 ). If you want Ctrl-A to do some custom operations instead of selecting all the text, you can define it yourself. DefaultTextEditingShortcuts The class contains a list of each keyboard shortcut supported by Flutter on each platform. If you want to overwrite the association, please use Flutter's existing Shortcuts widget to remap any shortcut key to an existing or custom intent. You can place the widget where you want to overwrite . For examples, please refer to: API document .

Another plug-in that has received a lot of improvements is the camera plug-in :

  • 3795 [camera] android-rework Part 1: Basic classes that support Android camera functions
  • 3796 [camera] android-rework Part 2: Android auto focus function
  • 3797 [camera] android-rework Part 3: Android exposure related functions
  • 3798 [camera] android-rework Part 4: Android flash and zoom function
  • 3799 [camera] android-rework Part 5: Android FPS range, resolution and sensor orientation function
  • 4039 [camera] android-rework Part 6: Android exposure and focus function
  • 4052 [camera] android-rework Part 7: Android noise reduction function
  • 4054 [camera] android-rework Part 8: The final implementation of the support module
  • 4010 [camera] Does not trigger the device orientation when placed horizontally on iOS
  • 4158 [camera] Fix the coordinate rotation of setting focus and exposure point on iOS
  • 4197 [camera] Fix the problem that the camera preview is not always rebuilt when the device orientation is changed
  • 3992 [camera] Prevent crash when setting unsupported FocusMode
  • 4151 [camera] Introduce camera_web package

A lot of work has also been done on plug-in , focusing on the end-to-end camera experience.

  • 3898 [image_picker] The image collector repairs the camera equipment
  • 3956 [image_picker] Change the storage location captured by the camera to the internal cache in Android to meet the new Google Play storage requirements
  • 4001 [image_picker] Removed redundant camera permission request
  • 4019 [image_picker] Fix the rotation problem when the camera is used as the source

These efforts have improved the functionality and robustness of image_picker In addition, you may notice that the camera plug-in 's Web function is already in preview ( #4151 ). This preview version provides basic support for viewing camera previews, taking photos, using flash and zoom controls, all of which can be performed on the Web. It currently is not a recognized joint plug , so the configuration, you need to clear this plug-in can only Web applications added using .

The original Android camera reconstruction work was contributed acoutts The work of camera and image_picker Baseflow , a consulting company specializing in Flutter, famous for its package . camera_web is mainly completed by Very Good Ventures , a Flutter consulting company located in the United States. Thank you very much for your contributions to the Flutter community!

Another valuable community contribution is made by the fluttercommunity.dev organization. Their representative work is []( https://plus.fluttercommunity.dev/_3yzKulu_dTTYflhO "") plus series plug-in . With the release of the new Flutter version, the plug-ins previously maintained by the official Flutter team are now "handed over" to the fluttercommunity.dev organization, and the following similar prompts will appear under each plug-in:

In addition, since these plugins are no longer actively maintained, we have removed their Flutter Favorite mark. If you have not migrated to the plus series plug-ins, we recommend that you follow the table below for comparison migration.

Flutter 2.5 makes a lot of improvements to Flutter DevTools. The first is to increase support for engine updates (in DevTools in # 26205 , # 26233 , # 26237 , # 26970 , # 27 074 , # 26617 ). One set of updates allows Flutter to better associate tracking events with specific frames, which helps developers determine why a frame may be out of budget. You can see this in the DevTools frame diagram, which has been refactored to support real-time display; when your application is rendering, their data will be filled in the diagram. Select a construction frame from this chart and you can jump to the timeline event of that frame.

The Flutter engine now also recognizes shader compilation events in the timeline. Flutter DevTools uses these events to help you diagnose shader compilation defects in your application.

DevTools 检测到因着色器编译而丢失的构建帧

With this new feature, DevTools can detect your lost construction frames due to shader compilation to help you fix this problem. If you want to run the application for the first time, use the flutter run command and add the mark --purge-persistent-cache This will clear the cache of the shader to ensure that you reproduce the effect the user saw when the app was "first run" or "reopened" (iOS). This feature is still under development, so please problems or improvement suggestions to us to help discover and improve the shader compilation tools.

In addition, when you track CPU performance issues in your application, you may have been submerged in the profiling data of native code from Dart and Flutter libraries or engines. If you want to close this data to focus on your own code, then you can use the new CPU Profiler feature ( #3236 ), which enables you to hide Profiler information from any of these sources.

For the categories you did not filter out, they are now classified by color ( #3310 , #3324 ), so you can clearly see the corresponding part of the CPU flame graph content.

彩色的火焰图,识别应用中的应用 vs. 原生 vs. Dart vs. Flutter 代码活动

Performance may not be the only thing you want to debug. The new version of DevTools comes with an update to the Widget Inspector. When you hover over the widget, you can evaluate objects, view properties, widget status, and more.

And when you select a widget, it will automatically pop up in the new Widget Inspector Console, where you can freely explore the attributes of the widget.

You can also execute expressions in the console when you pause at a breakpoint.

In addition to new features, Widget Inspector has also undergone a facelift. In order to make DevTools the best tool for understanding and debugging Flutter applications, we cooperated with the Finnish creative technology agency Codemate and made some updates.

DevTools 调整后提供了更易于使用的用户体验

As shown in the picture above, you can see the following changes:

  • Better communicate the role of the debug toggle buttons-these buttons have new icons, task-oriented labels, and rich tool tips (used to describe their functions and when to use them). Each tool tip is further linked to the detailed documentation of the function.
  • It is easier to find and locate the widgets of interest-widgets frequently used in the Flutter framework are now resident as icons in the widget tree view on the left side of the Inspector. They have been categorized using colors according to their category. For example, the layout widget is displayed in blue, and the content widget is displayed in green. In addition, each text widget will now display a preview of its content.
  • More consistent color scheme for Layout Explorer and widget tree-It is now easier to identify the same widget from Layout Explorer and widget tree. For example, the "Column" widget shown in the figure above has a blue background in the Layout Explorer, and a blue icon in the widget tree view.

We would be happy to hear about any issues and suggestions for improvement that you have for these updates to ensure that DevTools runs efficiently. These highlights are only the beginning. For all the new content of DevTools in this version of Flutter, please refer to the following release notes:

IntelliJ / Android Studio's Flutter plugin also has some improvements in this version. The first improvement is the ability to run integration tests ( #5459 ). The integration test is the entire application test that runs on the device, runs under the integration_test directory, and uses the same testWidgets() function as the widget unit test.

在 IntelliJ / Android Studio 中对 Flutter 应用进行集成测试

To add integration tests in your project, please follow the instructions on the flutter.dev . To connect the test with IntelliJ or Android Studio, add a run configuration, start the integration test, and connect a device for testing. Run configuration allows you to set breakpoints, stepping, etc. while running the test.

In addition, Flutter's latest IntelliJ / Android Studio series plug-ins allow you to view coverage information of unit tests and integration test runs. You can access this information via the toolbar button next to the "debug" button:

The coverage information will be displayed as red and green rectangles in the gap on the left side of the editing window. In this example, lines 9-13 are covered by the test, but lines 3 and 4 are not tested.

The latest version also includes new features to preview icons used in packages from pub.dev. These packages are built around TrueType font files ( #5504 , #5595 , #5677 , #5704 ) Just as Material and Cupertino icons support preview.

IntelliJ / Android Studio 中的图标预览

To enable icon preview, you need to tell the plugin which package you are using. There is a new text field in the settings/preferences page of the plugin.

Note that this is valid for icons defined as static constants in the class, as shown in the sample code in the screenshot. It will not work on expressions, such as LineIcons.addressBook() or LineIcons.values['code'] . If you are the author of an icon package, and this icon package is not suitable for this function, please create an Issue for feedback.

For more information about the update of Flutter's IntelliJ / Android Studio plug-in, please refer to the following release notes:

Flutter's Visual Studio Code plug-in has also been improved in this version. First, there are two new commands "Dart: Add Dependency" and "Dart: Add Dev Dependency" ( #3306 , #3474 ).

在 Visual Studio Code 中添加 Dart 依赖

The functions provided by these commands are similar to Jeroen Meijer's Pubspec Assist plug-in These new commands are available out of the box and provide a filtered list of package types obtained regularly from pub.dev.

You may also be interested in the "Fix All" command ( #3445 , #3469 ), which is available for Dart files and can fix all the same issues as dart fix

使用 Flutter Fix 规则来修复您代码中的所有已知问题

You can also, by the VS Code in editor.codeActionsOnSave added in source.fixAll be set to run when you save.

Or if you want to try the preview feature, you can enable the dart.previewVsCodeTestRunner setting and see Dart and Flutter tests run through the new Visual Studio Code test runner.

使用新的 Visual Studio Code 测试运行器测试你的 Dart 和 Flutter 代码

The Visual Studio Code test runner looks a bit different from the current Dart and Flutter test runners, and it displays the results in different sessions. The Visual Studio Code test runner also adds a new Gutter icon on the left side of the editing interface, which displays the execution result status of the test. You can click it to run the test (or right-click the context menu).

In future versions, the existing Dart and Flutter test runners will be removed and the new Visual Studio Code test runner will be adopted.

And this is just the tip of the iceberg of the new features and corrections of the Visual Studio Code plug-in. For all details, please refer to the following release notes:

  • v3.26 VS Code Test Runner integration, Flutter creation settings,...
  • v3.25 additional dependency management improvements, repair all in file/save,...
  • v3.24 dependency tree improvement, easier to start configuration, editor improvement
  • v3.23 configuration file mode improvements, improved dependency tree, improved LSP

In previous versions of Flutter, you may be troubled by exceptions that you do not want to handle. You may want them to trigger the debugger and find out their source, but you find that the Flutter framework does not let the exception pass to trigger the debugger. "Unhandled exception" handler. In this version, the debugger can now correctly interrupt unhandled exceptions that were previously only caught by the framework ( #17007 ). This improves the debugging experience. The debugger can now point directly to the line where the exception was thrown in the code, instead of pointing to a random location deep in the frame. A related new feature is that you can decide whether FutureBuilder should rethrow or hide errors ( #84308 ). This should provide you with more exceptions to help you track down issues in your Flutter application.

Since the birth of Flutter, there has been a Counter application template. It has many advantages: it showcases many features of the Dart language, demonstrates several key Flutter concepts, and it is small enough that even with a lot of explanatory comments, it can Load a file. However, it does not provide a particularly good display of the actual usage scenarios of the Flutter application. In this version, you can create a new template ( #83530 ) with the following command.

$ flutter create -t skeleton my_app

新的 Flutter Skeleton 模板演示

The new Skeleton template can generate a two-page list view Flutter application (with detailed view) and follow the best practices of the community. Its development has undergone a large number of internal and external reviews to provide a better foundation to build an application that achieves product-level quality. It supports the following functions:

  • Use ChangeNotifier to coordinate multiple gadgets
  • By default, the arb file is used to generate localization.
  • A sample image is included, and 1x, 2x, and 3x folders are created for image resources.
  • Use the "function first" folder organization
  • Support shared_preference
  • Support light and dark theme design
  • Support navigation between multiple pages

With the passage of time and the development of Flutter best practices, I hope this new template will evolve with it.

If you are developing a plug-in rather than an application, you may be interested in Pigeon 1.0 version. Pigeon is a code generation tool used to generate type-safe interactive code between Flutter and its host platform. You can define the API description of the plug-in and generate template code for Dart and Java / Objective-C / Kotlin / Swift.

Pigeon 生成的示例代码

Pigeon has been used in some plugins of the Flutter team. This version provides more useful error messages, adds support for generics, primitive data types as parameters and return types, and multiple parameters. It will be used more widely in the future. If you want to use Pigeon in your own plug-in or add-to-app project, please refer to pigeon plug-in page for more information.

The following are the breaking changes in Flutter 2.5:

For a complete list of breaking changes since version 1.17, please refer to: Flutter documentation website .

As we continue to update the Flutter Fix (which can be used in the IDE or through the dart fix command), we have applied a total of 157 rules to migrate code affected by breaking changes and any deprecations. As always, we are very grateful to the community test provided , help us identify these disruptive changes. For more information, please refer to: Flutter Breaking Change Policy .

In addition, with the release Flutter 2.5, we will drop support for iOS 8, the As announced in September 2020 like that. Giving up support for iOS 8, which has a market share of less than 1%, allows the Flutter team to focus on a new platform with a wider range of use. Deprecation means that these platforms may be able to use Flutter normally, but we will not test new versions of Flutter or plugins on these platforms. You can Flutter documentation Web site see on currently Flutter supported platforms list .

Finally, as always, I would like to thank the Flutter community organizations and community members all over the world. It is the community that makes this possible. Hundreds of developers who contributed and reviewed more than 1,000 PRs in this update have achieved this result because of the efforts of each of you. Let us work together to transform the application development process for developers all over the world, so that developers can deliver more applications, develop faster, and deploy to more platforms you care about from one code base.

Stay tuned for more updates from the Flutter team, this year is not over yet, wait and see!

Thanks to flutter.cn community members (@AlexV525, @Vadaski, @MeandNi) and Yuan and Lynn for reviewing and contributing to this article.


Flutter
350 声望2.5k 粉丝

Flutter 为应用开发带来了革新: 只要一套代码库,即可构建、测试和发布适用于移动、Web、桌面和嵌入式平台的精美应用。Flutter 中文开发者网站 flutter.cn