Official release note: medium.com/flutter/wha…

Winter has arrived in the northern hemisphere, with yellow leaves and temperatures falling, and the last stable version of the year is upon you. Say hello to Flutter 2.8 — this update included the hard work of 207 contributors and 178 reviewers, all of whom produced 2424 PR and closed 2976 issues. Special thanks to one of the most prominent community contributors to this release: Bartosz Selwesiuk, a Flutter development engineer from Very Good Ventures, who has submitted 23 PR’s for the Web-based Camera plugin.

All of the above results in a very significant performance improvement for both Flutter Engine and DevTools, Also included are the stable release of the Google Mobile AD SDK for Flutter, a series of new features and optimizations for Firebase, Flutter WebView 3.0, the new Flutter Favorite Package, and the desktop A big step for Stable and a new version of DartPad that supports more packages. While this is the last stable release of the year, it’s not the least important. Let’s take a look!

performance

The primary goal of Flutter is to maintain its quality as always. We spend a lot of time ensuring that Flutter works smoothly and stably on a variety of devices.

Application startup

This update optimizes application startup latency. We tested on GPay applications with more than a million lines of code to make sure the changes worked on the actual production application. The changes cut the startup time for GPay by about 50% on low-end Android devices and by about 10% on high-end devices.

We have also made some improvements to Flutter’s GC strategy for calling the Dart VM to avoid inappropriate GC during application startup. For example, Flutter notifies the Dart VM of memory pressure only when TRIM_LEVEL_RUNNING_CRITYCAL and signals higher than that are present before rendering the first frame on an Android device. In local testing, the initial frame interval on low-end Android devices was reduced by about 300ms at most.

In previous versions of Flutter, the platform thread was blocked when creating a PlatformView out of caution. After careful reasoning and testing, we removed some of the serialization steps, reducing GPay’s startup time on low-end devices by at least 100ms.

There has long been an artificial delay in initializing the default font manager before initializing the first Dart ISOLATE. Since it was the primary delay bottleneck, delaying the initialization of the default font manager to run at the same time as the first Dart ISOLATE reduced startup latency and made all of the above startup optimizations more noticeable.

The application memory

Because Flutter loads the Dart VM’s service ISOLATE as quickly as possible and loads it into memory along with the AOT code bound to the application, this can make it difficult for Flutter developers to track memory metrics on some devices with limited memory. With Flutter 2.8, the Dart VM service isolate on Android devices has been split into separate bundles that can be loaded separately, reducing memory usage by around 40MB prior to load. The Dart VM’s ability to send notifications to the operating system about the memory usage of an AOT program is now supported by a file that does not require multiple reads, reducing subsequent memory usage by about 10%. Therefore, memory that previously held copies of file data can be reclaimed and used for other purposes.

Performance analysis

In some cases, developers want to see Flutter and Android tracking events at the same time, or in production mode to better understand application performance issues. To meet this requirement, Flutter 2.8 now has the option to send performance tracking events to the Android event logger upon application launch, even in production mode.

In addition, some developers want more performance tracking information about raster caching behavior to reduce lag in animation effects, which allows Flutter to quickly reuse expensive, reusable images rather than redraw them. New stream events in performance tracing allow developers to track the life cycle of raster cached images.

Flutter DevTools

For debugging performance issues, the new version of DevTools adds a new “enhanced trace” feature to help developers diagnose UI bottlenecks caused by costly build, layout, and drawing operations.

With either trace enabled, the timeline shows events for Widget building, RenderObject layout, and RenderObject drawing, as appropriate.

In addition, the new version of DevTools adds analysis support for application startup performance. This configuration file contains CPU samples from Dart VM initialization to the first Flutter frame rendering. After you press the “Profile app Start up” button and load the application startup Profile, you will see the “AppStartUp” user TAB selected for the Profile. You can also load the application launch profile by selecting this user tag filter (if present) from the list of available user tags. Selecting this TAB will display your application launch profile data.

PlatformView for Web Platform

This release also includes performance optimizations for the Flutter Web view, not only for Android and iOS platforms. The platform view is the medium through which a Flutter is embedded into the UI component from the host platform. Flutter Web implements this functionality using the HtmlElementView Widget, which allows you to embed HTML elements in your Flutter Web application. If you are using the web version of the Google_maps_FLUTTER plugin or the Video_Player plugin, or if you are following the Recommendations of the Flutter team on how to optimize the display of images on the web, then you are using platform view.

In previous versions of Flutter, the embedded platform view created a new canvas, adding a new canvas for each embedded platform view. Creating additional Canvases is a very performance-intensive operation, because each canvas is the same size as the entire window. In Flutter 2.8, canvas created for previous platform views will be reused, so instead of 60 times the cost per second over the entire life of the application, you will only have the cost of one creation. This means you can have multiple instances of HtmlElementView in your Web application without compromising performance, while also reducing scroll lag when using platform views.

ecological

Flutter is more than just frameworks, engines and tools — there are over 2W Flutter compatible packages and plugins available on Pub. dev, and more every day. A lot of the daily operations of Flutter developers are also part of the larger ecosystem, so let’s take a look at what has changed in the Flutter ecosystem since the last release.

Google ads for Flutter ads

First and foremost, the Google Mobile SDK for Flutter was released in November. This release supports 5 Ad formats, integrates AdMob and Ad Manager support, and includes a beta version of a new transit feature to help you optimize your Ad presentation. For more information on integrating Google Ads into the Flutter application and other monetization options, check out the page on Flutter. Dev.

3.0 the WebView

Another new version that comes with Flutter this time is version 3.0 of the Webview_FLUTTER plugin. We raised the major release number because of the increase in the number of new features, but also because the way Web views work on Android may have changed significantly. Hybrid Composition was available in previous versions of WebView_FLUTTER, but not by default. It now fixes many of the problems with running in virtual display mode by default. Based on user feedback and our problem tracking, we decided it was time to make Hybrid Composition the default. In addition, webview_flutter adds some much-touted features:

  • POST and GET are supported to load content
  • Load the file or string content as HTML
  • Transparent background support
  • Set Cookies before loading content

Additionally, in version 3.0, Webview_FLUTTER provides preliminary support for a new platform: Flutter Web. There have been many requests to be able to host Web views in the Flutter Web application, which allows developers to build mobile or Web applications using a single source code base. What does it look like to host Web views in a Flutter Web application? From a coding standpoint, it’s the same:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_web/webview_flutter_web.dart';

void main() {
  runApp(const MaterialApp(home: HomePage()));
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  void initState() {
    super.initState();

    // required while web support is in preview
    if (kIsWeb) WebView.platform = WebWebViewPlatform();
  }

  @override
  Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(title: const Text('Flutter WebView example')),
    body: const WebView(initialUrl: 'https://flutter.dev'),; }Copy the code

When run on Flutter Web, it works as you expect:

Note that the current Web implementation of webview_FLUTTER has many limitations because it is built using iframe, which only supports simple URL loading and has no control over what is loaded or interacting with the loaded content. However, due to overwhelming demand, we decided to offer Webview_flutter_web as an unapproved plug-in. If you want to give it a try, add the following to your pubspec.yaml:

dependencies:
  webview_flutter: ^ 3.0.0
  webview_flutter_web: ^ 0.1.0 from # Explicitly rely on unapproved plug-ins
Copy the code

If you have any feedback about webview_FLUTTER V3.0, whether it is about the Web platform, please record the problem in the Flutter repository. Also, if you haven’t used WebView before or if you’d like a refresher, check out the new WebView Codelab, which takes you step by step through the process of hosting Web content in the Flutter application.

Flutter Favorites

The Flutter Ecosystem Committee held another meeting and designated the following package as the Flutter Favorite package:

  • Three custom routing packages for the new routing API (aka Navigator 2) : Beamer, Routemaster, and GO_Router;
  • Drift, a renaming of Flutter and Dart’s already powerful and popular responsive persistence libraries, built on SQLite;
  • Freezed, a Dart “language patch” that provides simple syntax for defining models, cloning objects, pattern matching, and more;
  • Dart_code_metrics;
  • And packages with nice interfaces: FLEX_COLOR_scheme, Flutter_SVG, Feedback, TOGGLE_switch, and auto_size_TEXT.

Congratulations to the authors of these packages and thank you for supporting the Flutter community through your hard work. If you are interested in nominating your Favorite Flutter package for a Flutter Favorite award, follow the guidelines and instructions on the Flutter Favorite Project page.

Platform-specific plugin packages

If you are a plugin author, you must decide which platforms you will support. If you are building a plug-in using platform-specific native code, you can do so using the pluginClass property in the project pubspec.yaml, which specifies the native class name that provides native functionality:

flutter:
  plugin:
    platforms:
      android:
        package: com.example.hello
        pluginClass: HelloPlugin
      ios:
        pluginClass: HelloPlugin
Copy the code

However, as Dart FFI becomes more mature, it is possible to implement platform-specific functionality with 100% Dart, as the Path_PROVIDer_Windows package does. In this case, you don’t have any native classes to use, but you still want to specify your package to support only certain platforms. At this point you can use the dartPluginClass property instead:

flutter:
  plugin:
    implements: hello
    platforms:
      windows:
        dartPluginClass: HelloPluginWindows
Copy the code

With this setup, you can customize plug-ins for a particular platform even if you don’t have any native code. You must also provide the Classes for the Dart plugin, which you can expand on in the Dart platform implementation documentation on flutter. Dev.

Desktop platform

Flutter 2.8 is another big step towards becoming a stable version for Windows, macOS, and Linux. Our target quality standards are high, including internationalization and localization support, such as the new Chinese input method support, Korean input method support, and the recently merged Kanji (Japanese) input method support. Or, as we are tightly building support for Windows accessibility. It is not enough for Flutter to run on a desktop in Stable channels, it must run well on devices of different languages and cultures and abilities around the world. We’re not where we want to be yet, but there’s a future!

One example is that we reconfigured the architecture of Flutter to handle keyboard events to allow synchronous responses. This enables the widget to handle the keystroke and intercept its passing through the rest of the widget tree. We landed on this work with Flutter 2.5 and fixed many issues with Flutter 2.8. This complements the ongoing work of redesigning the way we handle device-specific keyboard input and refactoring the way Flutter handles text editing, all of which are necessary for such input-intensive desktop applications with keyboards.

In addition, we are continuing to extend the definition of visual density to Flutter, exposing the Settings for dialog box alignment so that developers can achieve a more desktop UI friendly.

Finally, the Flutter team is not the only one working hard on the Flutter Desktop. Canonical’s desktop team, for example, is working with Invertase to develop the most popular Plugin for Flutter Firebase on Linux and Windows.

You can read more about the preview on the Invertase blog.

DartPad

The release of this new version of Flutter would not be complete without tool improvements. We will highlight DartPad’s improvements, the biggest of which is support for more packages. In fact, there are currently 23 packages available for import. In addition to several Firebase services, the list includes popular packages such as Bloc, Characters, Collection, Google_Fonts, and Flutter_riverpod. The DartPad team continues to add new packages, and if you want to see which packages are currently supported, you can click the info icon in the lower right corner.

If you want to learn about plans to add new packages to DartPad over time, check out this article on the Dart Wiki. There is another new DartPad feature that is also very handy. Until then, DartPad always ran with the latest stable version. In the new version, you can use the new Channels menu in the status bar to switch between the latest Beta channel version and the previous Stable version (called “old Channels”).

This is useful if you are writing a blog post and the latest stable version is not new enough. (In fact, it is convenient to switch different channels for debugging and BUG verification.)

Removing the Dev channel

The Flutter “channel” determines how quickly the Flutter frame and engine will change on your development machine, with stable representing the fewest changes and master representing the most. Due to team resource constraints, we will stop updating the dev channel in the near future. While we did receive some related issues, we found that less than 3% of Flutter developers use the Dev channel. Therefore, we decided to start the process of formally deactivating the dev channel. Although few developers use the Dev channel, Flutter engineers spend a lot of time and effort maintaining it. If you spend all your time on the Stable channel (as over 90% of Flutter developers do), this change will not affect your daily development. By giving it up, you can make one less decision, and the Flutter team can spend time and energy on other things. You can use the flutter channel command to decide which channel you want. Here’s what the Flutter team had to say about each channel:

  • Stable channels represent the highest quality builds we have. They are released quarterly (roughly) with hot fixes for critical issues in the middle. This is the “slow” channel: safe, mature, long-term service.
  • The Beta channel provides an alternative to quick adjustments for developers used to a faster pace. Currently released monthly, stable before release. This is the “fast” channel. If the Dev channel is meeting needs that the beta channel cannot meet, we may change our view of the beta channel to meet those needs (for example, accelerating the pace of beta release or lowering the level of testing and hot fixes we perform on the beta).
  • The Master channel is our active development channel. We don’t provide support for this channel, but we run a comprehensive set of unit tests against it. This is the right channel for contributors or senior developers who are happy with an unstable build. On this channel, we run fast and break things (and then fix them quickly).

When we deactivate the Dev channel in the coming months, please consider using the Beta or Master channel, depending on your tolerance for change and your balance with the latest and greatest SDKS.

Destructive change

As always, we strive to reduce the number of disruptive changes in each release. In this release, Flutter 2.8 has no major changes other than deprecated apis that have expired and were removed in accordance with our major Change policy.

  • 90292 Remove autovalidate deprecations
  • 90293 Remove FloatingHeaderSnapConfiguration.vsync deprecation
  • 90294 Remove AndroidViewController.id deprecation
  • 90295 Remove BottomNavigationBarItem.title deprecation
  • 90296 Remove deprecated text input formatting classes

If you’re still using these apis and want to learn how to migrate code, you can read the migration guide on flutter. Dev. As always, thank you to the community for contributing test cases to help us identify these significant changes.

conclusion

As we close 2021 and look ahead to 2022, the Flutter team would like to thank the entire Flutter community for their work and support. Sure, we are building Flutter for more and more developers around the world, but we wouldn’t be able to maintain and build Flutter without you and every developer. The Flutter community is different and we thank you for everything you do. Have a great holiday and see you in the New Year!