Original address: medium.com/flutter/ann…
Performance improvements, mobile autofill, a new widget and more!
Our ongoing vision for Flutter is to provide a portable toolbox for building amazing experiences that draw pixels on the screen no matter where you are. With each release, we continue to work hard to ensure That Flutter is fast, beautiful, efficient and open for every platform we support. In Flutter 1.20, released today to our Stable channel, Flutter has improvements for each of these four pillars.
In the fast category, we have multiple performance improvements from the bottom of the rendering engine and the Dart language itself.
To enable you to build a more beautiful Flutter application, this release has several UI enhancements, including long-awaited auto-fill support, a new way to layer your components to support panning and zooming, new mouse cursor support, updating old favorite Material components (such as time and date pickers /), And a new responsive licensing page for desktop and mobile form-factor Flutter applications in the about box.
To ensure you continue to be more productive, we’ve updated Visual Studio Code’s Flutter extension, which brings Dart DevTools directly into your IDE, automatically updates your import statements when you move your files, and a new set of metadata for building your own tools.
Because of the openness of Flutter and the amazing community of contributors, this release contains 3,029 merged PR and 5,485 closed issues from 359 contributors around the world, including 270 contributors from the Flutter community. In fact, this marks our largest ever number of contributors to the Flutter version. Special thanks to community contributors CareF for 28 PR’s, Ayushbherwani for 26 PR’s in 1998, including 10 PR’s for Flutter samples as part of his Google Summer of Code project, and A14N for 13 PR’s, Many of these are for the safe landing of the Flutter (more on this topic soon!). . We couldn’t have created Flutter without a broad community of contributors, so thank you /!
Each new version of Flutter brings more usage and power. In fact, in April, we reported that The number of Flutter apps in the Google Play store had reached 50,000, with a peak rate of 10,000 new apps/month. Now, just over three months later, there are more than 90,000 Apps for Flutter on Google Play. We are seeing a lot of this growth in India. India is now the number one region for Flutter developers, doubling in the past six months, which dovetails nicely with Google’s increased investment in the region. Finally, a Flutter wouldn’t be a Flutter without Dart, so it’s nice to see IEEE report that Dart has moved up four places since last year and ranks 12th among the top 50 languages they track.
Improvements to Flutter and Dart performance
At the Flutter team, we are always looking for new ways to reduce the size and latency of your app. As an example of the former, this version fixes tool performance issues with icon font tree shaking and makes font tree shaking the default behavior when building your non-Web applications. Icon font tree shaking will reduce the size of your app by removing ICONS that are not being used. Using this feature with the Flutter Gallery application, we found that it reduced the application size by 100KB. Now, this is the default behavior in your mobile app when you’re doing a release build. It is currently limited to TrueType Fonts, but this restriction will be removed in future versions.
Another performance improvement we made in this release is the use of the warm-up phase to reduce jitter during the initial display of the animation. You can see an example of the improved shaking in this animation (Wolf Down to half speed).
No SkSL warm-up and animation with SkSL warm-up
If a Flutter app has a lag animation on its first run, Skia Shading Language Shader provides pre-compilation as part of your app build, which can increase its speed by more than 2x. If you want to take advantage of this advanced feature, see the SkSL preheat page on flutter. Dev.
Finally, as we optimize for desktop form factors, we continue to refine our mouse support. In this release, we refactored the mouse hit test system to provide many architectural advantages that had been masked due to performance issues. Refactoring improved our performance in web-based microbenchmarks by a factor of 15! What this means for you is that you can get better, more consistent, and more accurate test results without sacrificing performance: win-win!
With this better, faster, stronger mouse click test, we added support for the mouse cursor — one of the most acclaimed desktop features. Some commonly used widgets will display the cursor you want by default, or you can specify another cursor from the list of supported cursors.
Add a new mouse pointer to an existing widget on Android.
This version of Flutter builds on Dart version 2.9. It features a new state-based dual-pass UTF-8 decoder, with decoding primitives optimized in the Dart virtual machine and partially utilizing SIMD instructions. Utf-8 is the most widely used character encoding method on the Internet today, and being able to decode quickly is critical when receiving large network responses. In our UTF-8 decoding benchmark, we found improvements across the board from nearly 200% of English text to 400% of Chinese text on low-end ARM devices.
Move auto-fill of text fields
One of the most requested Flutter features for some time has been the underlying Android and iOS support for auto-fill of text in Flutter applications. With PR 52126, we’re happy to say that the waiting is over — no more asking your users to re-enter the data the operating system has already collected for them.
Fill in the action automatically
You’ll be pleased to hear that we’re already starting to add this functionality to the web.
A new widget for common interaction modes.
This release introduces a new widget, the “InteractiveViewer”. The InteractiveViewer is designed for building common interactions in your application, such as panning, zooming, and dragging and dropping, even when resizing, as demonstrated by this simple Go board example.
Use the Interactive Viewer to zoom, pan, resize, drag and drop, and more.
To see how to integrate InteractiveViewer into your own application, see the API documentation, which you can play with in DartPad. Also, if you want to learn more about how InteractiveViewer was designed and developed, you can see the author’s demo for Chicago Flutter on YouTube.
If you are interested in adding the kind of interactivity that InteractiveViewer enables to your Flutter application, you may also be pleased to hear that we have added more drag-and-drop functionality in this release. Specifically, if you want to know exactly where the drag and drop occurs on the target component (which is always available to the _Draggable_ object itself), you can now get that information through the _DragTarget onAcceptDetails_ method.
The new drag target accepts details of the action
Check out this example for details, and expect future versions to provide this information during a drag so that _DragTarget_ can more easily provide visual updates during a drag operation.
Updated the material slider, range slider, time picker and date picker.
In addition to the new widgets, this release also includes some updated widgets to comply with the latest material guidelines. These included Slider and RangeSlider. For more information, see What’s new with Slider Widgets?
Updated material slider
Updated material range slider
Updated “DatePicker” with a new compact design and support for date ranges.
To update the DatePicker
Finally, TimePicker takes on a whole new look.
Update the TimePicker
If you want to play around with Flutter, here’s a fun web demo of Flutter.
Responsive license page
Another update in this release is a new responsive authorization page in the “AboutDialog “.
New License page
PR 57588, from community contributor TonicArtos, not only updated the Material guide to make it look nicer, but it’s easier to navigate and designed to work on tablets and desktops as well as phones. Thanks, TonicArtos! Because every Flutter app should show the license of the package they use, you just make every Flutter app better!
Publishing plug-ins requires a new pubspec.yaml format.
Of course, Flutter is not just a widget, but also a tool, and there are too many updates to mention in this release. There are some bright spots, though.
First, a public service announcement: if you are the author of the Flutter plugin, the traditional Pubspec. yaml format no longer supports publishing the plugin. If you try, you get the following error message when executing _pub publish_.
Pubspec format error messages left over when the plug-in was published.
The old format did not support specifying which platforms your plugin supported and was deprecated starting with Flutter 1.12. The new Pubspec.yaml format now requires the release of new or updated plug-ins.
For plug-in clients, these tools still understand the old PubSpec format and will do so for the foreseeable future. All existing plug-ins on pub.dev that use the traditional Pubspec.yaml format will continue to work with Flutter applications for the foreseeable future.
Preview embedded Dart DevTools in Visual Studio code.
The biggest tool update in this release comes from the Visual Studio Code extension, which provides a preview of new features that enable you to bring the Dart DevTools screen directly into your coding workspace.
A preview of the Dart DevTools layout browser embedded in Visual Studio code.
Using the new _dart previewEmbeddedDevTools_ Settings to enable this feature. The screenshot above shows that the Flutter Widget Inspector is embedded directly into Visual Studio Code, but with this new setting enabled, you can select your preferred page to embed using the Dart DevTools menu on the status bar.
This menu allows you to select the page to display.
This feature is still in preview, so let us know if you have any questions.
Update network Trace
The latest version of Dart DevTools comes with an updated web page for network socket profiling.
The time, status, and content type of the socket connection on the Dart DevTools web page.
The Network page now adds timing information for your application’s network calls, along with other information such as status and content type. Additional improvements have been made to the Details UI to provide an overview of the data in websocket or HTTP requests. We also made additional plans for the page, including HTTP request/response bodies and monitoring gRPC traffic.
Update file rename import statement
Another new feature in Visual Studio Code is to update imports at renaming, which automatically updates the _import_ statement when a file is moved or renamed.
Update the import statement by moving the Dart file in Visual Studio code.
This feature currently only works with a single file, not multiple files or folders, but support is coming.
Tool metadata for each tool maker.
Another update that needs to be mentioned is for those who build the Flutter tool. We have created a new project on GitHub to capture and publish metadata about the Flutter framework itself. It provides machine-readable data files for the following.
- a catalog of all the current Flutter widgets (395 widgets!)
- A mapping of a Flutter frame color name to color value for the Material and Cupertino color sets.
- Icon metadata for materials and Cupertino ICONS, including icon names and preview ICONS.
This is the same metadata we use ourselves in Android Studio/IntelliJ and VS Code extensions; We think you might find it useful when building your own tools. In fact, this metadata enables features in the IntelliJ series of ides to display the colors used in your Flutter code.
Related to this is a new feature in IntelliJ and Android Studio that displays Color blocks for color.fromargb () and color.fromrgbo ().
Special thanks to Dratushnyy on GitHub for his improvements to color preview in IntelliJ.
Platform interoperable type-safe platform channels
In response to a general request from the plugin author in the user survey, we have recently been trying to make the communication between Flutter and the host platform safer and more convenient for the plugin and Add-to-app. To meet this requirement, we created Pigeon, a command-line tool that uses Dart syntax to generate type-safe message code on top of platform channels without the need to add additional runtime dependencies. With Pigeon, you can call Java/Objective-C/Kotlin/Swift class methods and pass non-native data objects by calling the Dart method directly (and vice versa) rather than manually matching method strings and serialization parameters on the platform channel.
Although still in the pre-release phase, Pigeon has matured enough to use it ourselves in the Video_Player plug-in. If you’re interested in testing Pigeon, take a look at the updated platform channel documentation and this sample project.
There are too many tool updates to list them all
So many great things happened in the time frame of Flutter 1.20 that we can’t list all the tools here. However, you may want to look at the update announcement itself.
- VS Code extensions v3.13
- VS Code extensions v3.12
- VS Code extensions v3.11
- Flutter IntelliJ Plugin M46 Release
- Flutter IntelliJ Plugin M47 Release
- Flutter IntelliJ Plugin M48 Release
- New tool for Flutter developers, built into Flutter
Breaking Changes
As always, we try to keep the interrupt modification count low. The following is a list of Flutter versions 1.20.
- 55336 Added tabSemanticsLabel – Migration Guide PR for CupertinoLocalizations
- 55977Add clipBehavior to the component with clipRect
- 55998 Fixed route waiting when navigator page update crashes
- 56582 Update the Tab semantics in Cupertino to be the same as Material
- 57065 Remove obsolete subparameters of the overlapping management shard of NestedScrollView.
- Ios drag activity indicator in the middle.
Summary
Hope you’re as excited about this version as we are. In many ways, this is the biggest version of Flutter. With improved performance, new and updated widgets, and improved tools, we can only hit the highlights. We would like to thank you, the strong and growing community of contributors, for making each version of Flutter bigger, faster, and stronger than its predecessors. There’s more on the way, support for NULL security, new versions of Ads, Maps and WebView plug-ins, and more tool support in the works. (In fact, you might be interested in Bob Nystrom’s in-depth study of understanding NULL security).
With all this extra power in the Flutter and the tools, what are you going to build?
