Years ago, when we talked about mobile cross-platform development, the stereotype of slow cross-platform applications was raised. Flutter’s rendering engine now allows us to create a user experience comparable to that of native apps. The same code can run on multiple platforms, including iOS, Android, and browsers, making application development more efficient.

As one of the most popular mobile cross-platform technology solutions, Flutter has seen significant growth in mobile cross-platform development over the past two years. Google has officially released a new version of Flutter for 2020. Two days ago, The first stable version of Flutter was updated with version 1.17.

According to official statements, Flutter 1.17 closed 6,339 issues from Flutter 1.12, incorporated 3,164 PR from 231 contributors, and fixed many bugs. In addition to quality improvements, Flutter1.17 also adds some new features, including Metal support for iOS, a new Material component, a new Network tracking tool, and more!

Let’s take a closer look at some of the new features of Flutter 1.17.

Mobility and size improvements

The most important aspects of this release are the performance and memory improvements, so just upgrade your application to this release and you’ll see faster animations, smaller applications, and lower memory utilization. Default navigation cases (opaque opaque paths) are estimated to be 20%-37% faster in this release. For simple iOS animations, you’ll also see up to a 40% reduction in CPU/GPU utilization, depending on the hardware. Detailed reference data:

  • Improved navigation speed
  • PR 14104
  • PR 13976

In addition, using this version of the package significantly reduces the size of the application. For example, Android’s Flutter Gallery example was 9.6MB at the end of 2019 and is now 8.1MB, a decrease of 18.5%. For memory usage, this version reduces memory usage for quickly scrolling through large images by 70%, depending on the amount of memory on the device, improving performance and optimizing memory footprint. Here’s a comparison.

Metal improves iOS performance by 50%

Apple’s Metal API, which gives developers direct access to the underlying GPU, is Apple’s recommended graphics API. On iOS devices that support Metal, Flutter will use Metal by default, making the application run faster in most cases, with an average rendering speed improvement of around 50% (depending on the device’s workload)

For devices that do not fully support Metal, such as processors prior to A7 or devices prior to iOS 10, Flutter will use OpenGL rendering just like previous versions, enabling native rendering speed on these devices. For Metal, see the iOS Metal FAQs.

New Material control

Based on feedback from multiple users, The Material design system for Flutter is also being implemented in Flutter development. In the new release, we added the NavigationRail component, a new widget that provides a responsive application navigation model. It was designed and implemented by the Google Material Design team. NavigationRail is great for apps that switch between mobile and desktop devices, and you can easily switch from BottomNavigator to NavigationRail when the screen size of your app increases.

You can actually experience NavigationRail in the Web_Dashboard sample or DartPad. In addition to the new widgets, the new version also updates the Material DatePicker and fixes the overflow display of text selection menu widgets.

Material DatePicker changes the document

Also added to Flutter 1.17 is the new Animations package, which provides pre-built Animations that implement the new Material Motion specification.

New Flutter text theme

In this new version, the Flutter team has implemented the Type Scale of the 2018 Material Design specification without breaking existing Flutter applications. In October 2018, we added optional support for new configurations (rather than new names) in PR 22330. The existing text style names are not changed because this is a major API change that could affect most applications. Flutter 1.17 updates the TextTheme API to follow the current Material specification, but retains the old name so that it doesn’t affect your code. Since the old name has been deprecated, you will receive a warning suggesting a new name. The name and configuration of Material TextStyle in 2018 are summarized in the following table.

Google font

Text and Fonts always go hand in hand. If the new Material text scaling implementation makes you feel better, you might also be interested in the new Google Fonts for Flutter V1.0.

Accessibility and internationalization

Finally, the topic we continue to focus on – accessibility. We believe that making Flutter available to the widest possible audience is one of our priorities. In the new version, we’ve done a more comprehensive job of fixing the accessibility of scrolling, text boxes, and other input widgets. GitHub has a full list of accessibility features we’ve fixed in this release. We encourage developers to test their apps for accessibility as much as possible, and with this release we’ve released some recommended best practices for you to consider.

On the internationalization side, we have been studying some of the issues affecting Samsung keyboard input methods, which affect text input in various East Asian languages. We’re happy to report that we’ve done this work, and Korean developers in particular should find a lot to celebrate in this release.

Dart DevTools supports Flutter

To support Flutter, replace the current version of Dart DevTools with the new Flutter version and click on the Beaker icon in the upper right corner after DevTools is started.

pub global activate devtools
Copy the code

Then, after pressing the Record button, the Network TAB displays the Network traffic for your Flutter application. If you want to start monitoring network traffic as soon as your application starts, you can add the following code to your main() method.


void main() {
    // enable network traffic logging
    HttpClient.enableTimelineLogging = true;
    runApp(MyApp());
}
Copy the code

In addition to the Update to Dart DevTools, this release also includes an experimental fast startup option that can increase the startup speed of Flutter by up to 70% when you debug the Android app. You can run the following command to enable the function.

flutter run --fast-start -d< Your Android device >Copy the code

This option installs a generic Android application that only relies on your plug-in code, without any Dart code or resources. This allows repeated flutter run commands to start more quickly because modifying Dart code or resources does not require rebuilding APK. Unlike normal startup options, the Quick startup option binds your app to a generic Android “container” and doesn’t actually install on your device. In some cases, such as when you are using a plug-in that accesses content executed in the background, the quick launch option will not work. If you find the startup time of Android debugging painfully long, try this new option.

If your target platform is Android, you will notice that the AndroidX option is now available only when creating new Flutter projects. The AndroidX library provides advanced Android features called Android Jetpack. In the last release, we dropped the original Android Support Library and made AndroidX the default option for all new projects. In Flutter 1.17, the Flutter create command has only one option –androidx. Although existing Flutter applications that do not use AndroidX can still compile, it is time to migrate to AndroidX.

If you use Android Studio or IntelliJ, you’ll find that the Hot Reload feature is much more fault tolerant. Before this update, Hot Reload will not Reload your code if your application has any analysis errors. Parsing errors that don’t involve code you’re currently running (as in unit tests) can be frustrating. With this update, Hot Reload is no longer affected by analysis errors, but by compilation errors in the VM.

If you would like to experience similar improvements in Android Studio or IntelliJ’s Flutter plugin earlier, we now have a Dev channel for the IntelliJ plugin that you can opt in to get faster access to these updates. The goal of this Dev channel is to gather feedback from Flutter developers before publicly releasing new IDE integration features. If you want to try something new and provide early feedback to the Flutter tools team, please join us now!

If you are using Visual Studio Code development tools, we recommend using the new Dart: List Outdated Packages command to run the new Pub Outdedated command, as shown below.

Other important changes

As with previous releases, we try to minimize significant changes with each new release of Flutter, and make sure that Flutter provides an intuitive and flexible API that supports new development habits on new platforms. Important changes in Flutter 1.17 include:

  • #42100 runs subsequent animations using the previous path when using pushReplacement
  • # 45940 abandoned UpdateLiveRegionEvent
  • Delay image decoding while scrolling at high speed
  • #49391 Text selection overflow (Android)
  • #49771 Assertion cache hint not set for empty drawing objects
  • #50318 Real-time image cache
  • Use the height of the building block to calculate the range of the selection, ensuring that it remains visible
  • Generate a message query in gen_l10n
  • #51435 Remove isinitialRoute from RouteSettings
  • #52781 Move mouse_tracking.dart to rendering

Links:

Flutter Chinese is a platform for mobile development