Subtitle: Performance improvements, Move autofill, a new Widget and much more

Original address: medium.com/flutter/ann…

The author: Medium.com/@csells_180…

Published time: August 5, 2020 -11 minutes reading

Our continuing vision for Flutter is to provide a portable toolkit for building amazing experiences that draw pixels on the screen wherever 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, posted today on our stable channel, The Flutter has improved on each of these four pillars.

On the fast side, we have several performance improvements, from the lowest levels of the rendering engine to the Dart language itself.

In order for you to build a Flutter application of more and more beautiful, the version has several UI enhancements, including a long-awaited support for automatic filling, a new way of layering your components to support the translation and scaling, new mouse cursor support, Material parts of old favorites, such as the time and date selector to update, And a new responsive license page for the about box in your desktop and mobile form factor Flutter application.

To make sure you continue to improve your productivity, we’ve updated the Visual Studio Code Flutter extension to bring Dart DevTools directly into your IDE, automatically update your import statements as you move files, and provide a new set of metadata for building your own tools.

And because of the openness of Flutter and the amazing community of contributors, this edition contains 3,029 merged PR and 5,485 closed questions from 359 contributors around the world, including 270 contributors from the wider Flutter community. In fact, this marks the largest number of contributors to our version of Flutter ever. Special recognition to community contributors CareF for 28 PR’s, Ayushbherwani for 26 PR’s 1998, including 10 who contributed to the Flutter sample as part of his Google Summer of Code project, and A14N for 13 PR’s, Many of these are for Flutter landing safety (more on that soon!). . We wouldn’t have been able to create Flutter without a large team of community contributors, so thank you!

Each new version of the Flutter brings an increase in usage and momentum. In fact, in April, we reported that the number of Flutter apps on the Google Play Store had reached 50,000, with a peak rate of 10,000 new apps per month. Now, just over three months later, there are more than 90,000 Flutter apps on Google Play. We’ve seen a lot of this growth in India, which is now the number one region for Flutter developers, doubling in the last six months, which is very much in line with Google’s increased investment in the region. Finally, a Flutter is not a Flutter without Dart, so it’s good to see that the IEEE reports that Dart has moved up four places since last year to 12th place out of the top 50 languages they track.

Improved performance of the Flutter and Dart

At the Flutter team, we are always looking for new ways to reduce the size and latency of your application. As an example of the former, this release fixes performance issues with the tool for icon font pruning and makes font pruning the default behavior when building your non-web applications. Icon font pruning reduces the size of ICONS you don’t use in your app. Using this feature for the Flutter Gallery application, we found that it reduced the application size by 100KB. Now, this behavior is the default in your mobile app when you do a release build. Currently it is limited to TrueType Fonts, but this limitation will be removed in future releases. Another performance improvement we made in this release is the use of the warm-up phase to reduce the initial wobble of the animation. You can see an example of the improved shake (slowed to half speed) in this animation.

No SkSL warm-up and SkSL warm-up animation

If a Flutter app freezes animation the first time it’s run, the Skia Shading Language shader provides precompilation as part of your app build, which can be more than twice as fast. If you’d like to take advantage of this advanced feature, check out the SkSL warm-up page on Flutter. Dev.

Finally, as we optimize for desktop form factors, we continue to improve our mouse support. In this release, we refactored the mouse hit test system to provide a number of architectural advantages that were hampered by performance issues. Refactoring has improved our performance in Web-based microbenchmarks by as much as 15 times! What this means for you is that you can get better, more consistent, and more accurate test results without giving up performance: win-win!

With this better, faster, and stronger mouse hit test, we added mouse cursor support — one of the most acclaimed desktop features. Some common widgets will display the desired cursor by default, or you can specify another from the list of supported cursors.

Add a new mouse pointer to an existing widget on Android.

This version of the Flutter builds on the 2.9 version of the Dart. It features a new state-based two-pass UTF-8 decoder, the decoder primitives optimized in the Dart virtual machine, partially utilizing SIMD instructions. Utf-8 is currently the most widely used character encoding method on the Internet, and being able to decode it quickly is critical when receiving large network responses. In our UTF-8 decoding benchmark, we saw improvements across the board on low-end ARM devices, ranging from nearly 200% of English text to 400% of Chinese text.

Move the autofill of the text field

One of the most requested features of Flutter for some time has been support for text autofill in the underlying Android and iOS Flutter applications. With PR 52126, we’re happy to say that the wait is over — no more asking your users to re-enter the data that the operating system has already collected for them.

Auto fill in action

You’ll be happy to hear that we’ve started to add this functionality to the web.

A new widget for common interaction patterns

This release introduces a new widget, The InteractiveViewer, designed to build common interactivity in your application, such as panning, zooming, and drag-and-drop, even when resizing. InteractiveViewer is designed to build common interactivity in your application, such as panning, zooming, and dragging and dropping, even while resizing, as demonstrated by this simple go board example.

Use the interactive viewer to zoom, pan, resize, drag and drop, and more.

To find out how to integrate InteractiveViewer into your own applications, check out the API documentation where you can play it on DartPad. Also, if you want to see how the InteractiveViewer was designed and developed, you can see the author’s presentation of The Chicago Flutter on YouTube. If you’re interested in adding the kind of interactivity that InteractiveViewer does to your Flutter app, you might also be pleased to hear that we’ve added more drag and drop functionality in this version. Specifically, if you want to know exactly where the fall occurred on the target Widget (which is always available to the Draggable object itself), you can now get that information via the DragTarget onAcceptDetails method.

New drag target accepts action details

Check out this example for details, and look forward to future versions providing this information during the drag process so that the DragTarget can more easily provide visual updates during the drag operation.

Updated the material slider, range slider, time selector and date selector.

In addition to the new widgets, this release also includes some updated widgets to conform to the latest Material guidelines. These include Slider and RangeSlider. For more information, see the new features of the Slider Widget.

Updated material slider

Update the material range slider

DatePicker has been updated with a new compact design and support for date ranges.

To update the DatePicker

Finally, the TimePicker has a whole new style.

Update the TimePicker

If you want to play around with it, here’s an interesting web demo built with Flutter.

Responsive license page

Another update to this release is a new responsive license page in the AboutDialog.

New License Page

PR 57588, from community contributor TonicArtos, is not only updated to conform to Material guidelines to make it look nice, 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’re using, you’re just making every Flutter app better!

Publishing plug-ins requires the new Pubspec.yaml format.

Of course, Flutter is not just a widget, but also a tool, and there are too many updates in this version to mention them all. There are, however, some bright spots. The first is a public service declaration: if you are the author of the Flutter plugin, the traditional Pubspec. yaml format no longer supports publishing plug-ins. If you try, you will get the following error message when performing pub Publish:

Pubspec format error message left over from plug-in release.

The old format did not support specifying the platform your plugin supports and has been deprecated since Flutter 1.12. New or updated plug-ins are now released using the new Pubspec.yaml format.

For the client side of the plug-in, the tool still understands the old PubSpec format and will for the foreseeable future. All existing plug-ins on pub.dev using the traditional Pubspec.yaml format will continue to work with the Flutter application 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 allow 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 favorite page to embed using the Dart DevTools menu on the status bar.

This menu allows you to select which page to display.

This feature is still in preview, please let us know if you have any questions.

Updates to network tracking

The latest version of Dart DevTools comes with an updated version of the web page for network socket profiling.

The time, status, and content type of the socket connection on the Dart DevTools network page.

The Web page now adds timing information for your application’s network calls, as well as additional information such as status and content type. We have also made additional improvements to the details UI to provide an overview of the data in a WebSocket or HTTP request. We also have additional plans for this page, including HTTP request/response bodies and monitoring gRPC traffic.

Update the import statement for file renaming

Another new feature of Visual Studio Code is to update imports when renaming, which automatically updates import statements when files are moved or renamed.

Move the Dart file in the Visual Studio code and update the import statement.

The feature currently only works with a single file, not multiple files or folders, but support is coming.

Provide tool metadata for each toolmaker.

Another update that needs to be mentioned is for people who build the Flutter tool. We 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.

  • Directory of all current Flutter Widgets (395 widgets!) .
  • The Flutter framework maps color names to color values for the Material and Cupertino color sets.
  • Material and Cupertino icon metadata, 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 functionality 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 ().

A special thanks to Dratushnyy on GitHub for contributing to the improvement of the color preview in IntelliJ!

Platform interoperable Typesafe platform channel

In response to the widespread demand from the plugin authors in user surveys, we have recently been looking at ways to make communication between Flutter and the host platform more secure and easier for plugins 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 the platform channel without adding additional runtime dependencies. With Pigeon, instead of manually matching method strings and serializing parameters on the platform channel, you can call Java/Objective-C/Kotlin/Swift class methods and pass nonnative data objects by calling Dart methods directly (and vice versa).

Although still in the pre-release stage, Pigeon is mature enough that we use it ourselves in the Video_Player plug-in. If you’re interested in testing Pigeon for your own use, check out the updated Platform Channel documentation and this sample project.

There are too many new tools to list

So many great things have happened in the time frame of Flutter 1.20 that we can’t list all the tools here. However, you might want to look at the update announcement itself:

  • VS Code extensions v3.13
  • VS Code extensions v3.12
  • VS Code extensions v3.11
  • The Flutter IntelliJ Plugin M46 was released
  • The Flutter IntelliJ Plugin M47 was released
  • The Flutter IntelliJ Plugin M48 has been released
  • New tool from the Flutter developer, built using Flutter

Breakthrough change

As always, we try to keep the number of outages as low as possible. Here is a list of the version of the Flutter 1.20:

  • 55336 Add tabSemanticsLabel – Migration Guide PR to Cupertino Migration Guide.
  • 55977 Add the clipBehavior for the widget using clipRect.
  • Fix for navigation page update crash with route waiting.
  • 56582 Update Tab semantics in Cupertino to make it the same as Material.
  • 57065 deletes infrequently used subparameters for NestedScrollView’s overlapping management sharding.
  • Drag an activity indicator in iOS

The profile

I hope you’re as excited about this release as we are. In many ways, this is the largest version of the Flutter. With performance improvements, new and updated widgets, and tool improvements, we can only hit the bright spots. We would like to thank you, the strong and growing community of contributors, for making each version of Flutter bigger, faster and stronger than the previous one. There’s much more, with null security support, 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 work on understanding NULL security).

With the Flutter and all this extra power in the tool, what are you going to build?

Translate through (www.DeepL.com/Translator) (free version)