Google I/O 2023 - Flutter 3.10 released, come and see what's new

The original link of the core part: https://medium.com/flutter/whats-new-in-flutter-3-10-b21db2c38c73

Although the core keynote of this I/O is mainly AI, a new stable version of Flutter is still released as usual, but it is not 4.0 as everyone guessed, but 3.10. The version number of Flutter is still so unexpected.

Flutter 3.10 mainly includes related improvements to web, mobile, graphics, security, etc. The core is actually:

• iOS uses Impeller by default
• A bunch of new Material 3 controls are coming
• iOS new performance optimization, Android incidentally dispensable update
• Web can be nested into other applications without iframe

Framework

Material 3

It seems that Google is very concerned about the design specification of Material 3. According to the latest Material Design spec specification, Flutter has also followed up with related modifications, including new components and component themes and new visual effects .

At present, developers can MaterialAppstill useMaterial3choose whether to use Material 3 through the flag bit under theme configuration, but starting from the next stable version, useMaterial3the default will be adjusted totrue .

For Material 3, you can preview it through the related Demo on https://flutter.github.io/samples/material_3.html.

ColorScheme.fromImageProvider

All M3 components configure the theme's default color ColorScheme, and the default color scheme uses purple shades, which is different from the previous default blue .

In addition to customizing configuration schemes from a single "seed" color, custom color schemes can also be created from fromImageProviderimages .

NavigationBar

This time also added an M3 version of BottomNavigationBarthe control effect, although M3 uses different colors, highlighting and elevation, its working method is still the same as before.

If you need to NavigationBarsadjust the default appearance of , you can use NavigationBarThemeto override the modification. Although you don't need to migrate your existing App to NavigationBars, the official recommendation is to use it NavigationBarsas .

NavigationDrawer

M3 also provides a new one for Drawer NavigationDrawer , which NavigationDestinationsdisplays a single-selection list, and can also contain other controls in the list.

Sync under M3 The colors and heights have Draweralso been updated, along with some minor changes to the layout.

NavigationDrawerIt can be scrolled when needed, and if you want to override the default appearance NavigationDrawerof the , you can also use NavigationDrawerThemeto override it.

SearchBar 和 SearchAnchor

This is Flutter's new control for searching queries and providing predictions.

When the user enters a search query, a list of matching responses is computed in the "search view", and the user selects a result or adjusts the matching results.

If you want to override the default appearance SearchBarThemeof the , you can also use SearchAnchorThemeto override it.

Secondary Tab Bar

Flutter under M3 now provides support for creating second-level tabbed content by default, which can be used for the second-level Tab TabBar.secondary.

DatePicker and TimePicker updated

Under M3, the calendar of the control, the color, layout and shape of the text field, etc. have been DatePicker updated . The corresponding API has not changed, but a new one will be added DatePickerThemeto adjust the style of the control.

TimePickerAs DatePickerwith , the colors, layout, and shape of the regular and compact versions of the control have been updated.

BottomSheet update

Under M3, BottomSheetin addition to color and shape updates, an optional drag handle has been added, which takes effect whenshowDragHandle set to .true

ListTile update

Under M3, the positioning and spacing are ListTileupdated , including content padding, alignment of leading and trailing controls, minimum leading width, and vertical spacing, etc., but the API remains unchanged.

TextField update

M3 has updated all support TextFieldfor native gestures.

Double-clicking TextFieldor has the same effect as double-clicking or triple-clicking on a touch device, which is available by default for TextFieldboth and .CupertinoTextField

TextFielddouble click/tap gesture

• Double click + drag: Expands the selection in the block.
• Double tap + drag: Expands selection in blocks.

TextFieldtriple click/tap gesture

Triple click

• TextFieldSelect a paragraph block at clicked position in multiple lines (Android/Fuchsia/iOS/macOS/Windows).
• When inside a multiline TextField(Linux), selects a block of lines at the click position.
• Selects all text on a single line TextField.

Triple tap

• TextFieldSelect the paragraph block at the clicked position in the multi-line .
• Select all text TextFieldin

Triple click+drag

• Extend selection in paragraph blocks (Android/Fuchsia/iOS/macOS/Windows).
• Expand selections in row blocks (Linux).

To put it simply, the gesture and the mouse will trigger different selection effects under double-click and triple-click, and Linux will have a little difference under the triple-click effect

Flutter supports SLSA level 1

The Flutter Framework is now compiled using Software Artifact Supply Chain Level ( SLSA ) Level 1, which supports the implementation of many security features, including:

• Scripted build process : Flutter's build scripts now allow automated builds on trusted build platforms, built on a protected architecture to help prevent artifact tampering, improving supply chain security.
• Multi-party approval with audit logs : Flutter release workflows are only executed after approval by multiple engineers, all executions create auditable logs of changes that ensure no one can introduce changes between source code and artifact generation.
• Provenance : Beta and stable releases are now built using provenance , meaning that trusted sources with expected content build framework release artifacts, and links are published with each release to view and verify the provenance of the SDK archive .

This work is also moving towards SLSA L2 and L3 compliance, which focus on artifacts protection during and after the build.

Web

Improved load times

3.10 reduces the file size of icon fonts, which removes unused glyphs from Material and Cupertino, providing faster loading.

CanvasKit smaller

Chromium-based browsers can use smaller custom CanvasKit channels, and CanvasKit hosted on Google gstatic.com can further improve performance.

Element embedded

Now you can load Flutter Web from a specific Element in the page . No iframe, before this version, flutter web needs to fill the entire page body or be displayed in iframethe tag Simply put, it is more convenient to nest flutter web under other web.

Specific Demo can be seen: https://github.com/flutter/samples/tree/main/web_embedding

Shader support

Web applications can use Flutter's fragment shader :

flutter:
  shaders:
    - shaders/myshader.frag

Engine

Impeller

iOS provided Impeller preview support in the 3.7 stable release, and since then Impeller has received and addressed a lot of feedback from users.

In version 3.10 we made over 250 commits to Impeller, and we now make Impeller the default renderer on iOS .

All apps built for iOS using Flutter 3.10 use Impeller by default, so iOS apps can expect less stutter and more consistent performance.

Since version 3.7, Impeller on iOS has improved memory footprint to use fewer render passes and intermediate render targets.

On newer iPhones, enabling lossy texture compression reduces memory usage without compromising fidelity, and these advances also significantly improve performance on iPad .

For example, the "pull quote" page in the Wonderous application, these improvements have reduced the memory usage of the current page by nearly half .

The reduction in memory usage also moderately reduces GPU and CPU load, the Wondrous app probably doesn't register these load drops, its framework was already well optimized before, but this change should improve battery life.

Impeller also frees up the team's ability to more quickly deliver popular feature requests, such as support for a wider P3 color gamut on iOS.

Community contributions accelerated our progress, especially GitHub users ColdPaleLight and luckysmg who wrote several Impeller-related patches that improved fidelity and performance.

While Impeller meets the rendering needs of most Flutter apps, you can choose to turn off Impeller. If you choose to opt out, please consider filing an issue on GitHub to let us know why.

<key>FLTEnableImpeller</key>
<false/>

Users may notice small differences in rendering between Skia and Impeller, these differences may be bugs, so please do not file issues on Github, in a future release we will remove the legacy Skia renderer for iOS to reduce The size of Flutter .

In addition, Impeller's Vulkan backend is still supported, and Impeller on Android is still under active development, but it is not yet ready for preview.

To see progress on Impeller, check out https://github.com/orgs/flutter/projects/21.

Performance

The 3.10 release covers many more performance improvements and fixes beyond Impeller.

Eliminate lag

Thanks to luckysmg , who found out that the time to get the next drawable layer from the Metal driver can be shortened by setting the FlutterViewsbackground color to a non-zero value.

This change eliminated low framerate issues on recent iOS 120Hz displays, and in some cases it tripled framerates , which helped us resolve six GitHub issues.

This change was so significant that we backported a fix to version 3.7 .

In the 3.7 stable release, we moved the loading of local images from the platform thread to the Dart thread to avoid delaying vsync events from the platform thread. But users noticed that this extra work on the Dart thread also caused some jank.

In 3.10 we moved the opening and decoding of local images from the Dart thread to a background thread , this change eliminates potentially long pauses on screens with lots of local images, while avoiding delaying vsync events, in our local tests and In automated benchmarks, this change cut the loading time of multiple simultaneous images in half.

We continue to build optimizations on top of Flutter's new internal DisplayList structure, and in 3.10 we added the R-Tree based culling mechanism.

This mechanism removes the handling of drawing operations earlier in our renderer. For example, optimizations speed up custom painters whose output fails offscreen.

Our microbenchmarks show up to a 50% reduction in DisplayList processing time, and apps with clipped custom painting may see varying improvements depending on the complexity and number of hidden paint operations.

Reduce iOS startup delay

The previous inefficient strategy for identifier lookup in applications increased application startup latency, which increased proportionally to the size of the application.

And in 3.10, we fixed the bundle identifier lookup , which reduces the startup latency of large apps by 100ms or about 30–50%.

Reduced size

Flutter uses SkParagraphas the default library for text, layout, and rendering, and previously we included a flag to support falling back to legacy libtxtand minikin.

Since we SkParagraphhave full confidence in , we removed libtxtand minikinand their flags in 3.10, which reduced Flutter's gzipped size by 30KB.

Looks confident.

stability

In version 3.0, we enabled an Android feature late in the rendering pipeline that uses advanced GPU drivers that redraw less screen content when only a "dirty" region changes.

We had previously added this to an earlier optimization to achieve a similar effect, and while our benchmark results were decent, two problems arose:

• First, the most improved benchmarks may not represent actual use cases.
• Second, it's proving difficult to find a set of devices and Android versions that support this GPU-driven feature

Due to limited progress and support, we've disabled some repaints on Android .

While using the Skia backend, the feature remains enabled on iOS, and we hope to enable it via Impeller in a future release.

API improvements

APNG decoder

Flutter 3.10 solves one of our most concerned problems , it APNGadds the ability to decode images , and now you can use Flutter's existing image loading API to load APNGimages .

Image loading API improvements

3.10 adds a new method instantiateImageCodecWithSize that supports use cases that meet the following three conditions:

• Unknown aspect ratio on load
• bounding box constraints
• Original Aspect Ratio Constraints

Mobile

iOS

wireless debugging

Flutter iOS apps that can now run and hot reload over the air .

Once you've successfully paired your iOS device wirelessly in Xcode, you can use flutter run to deploy your app to the device. If you run into issues, verify that the network icon appears next to the device under Window > Devices and Simulators > Devices .

For more information, you can refer to https://docs.flutter.dev/get-started/install/macos#ios-setup.

Wide color gamut image support

Flutter apps on iOS can now support accurate rendering of wide-gamut images. To use wide-gamut support, apps must use Impeller Info.plistand add FLTEnableWideGamut the flag to the file.

Spell check support

SpellCheckConfiguration()The control now supports Apple 's spell checking service on iOS by default, which can be set using the parameters spellCheckConfigurationin CupertinoTextField.

Adaptive checkboxes and radios

3.10 Added CupertinoCheckBoxand CupertinoRadioto the library Cupertino, they create Apple-style checkbox and radio button components.

Material checkbox and radio controls have added .adaptiveconstructors that use the corresponding Cupertino controls on iOS and macOS, and Material controls on other platforms.

Optimize Cupertino animations, transitions and colors

Flutter 3.10 improves some animations, transitions and colors to match SwiftUI, these improvements include:

• renew CupertinoPageRoute
• Add title zoom animationCupertinoSliverNavigationBar
• Added several new iOS system colorsCupertinoColors

PlatformView Performance

Flutter limits the refresh rate on iOS to reduce stutteringPlatformViews when an app appears on the screen , which users may notice when .PlatformViews

macOS and iOS can use shared code in plugins

Flutter now supports pubspec.yamlthe sharedDarwinSourcekey in the plugin file, which indicates that Flutter should share iOS and macOS code.

ios: 
  pluginClass:  PathProviderPlugin 
  dartPluginClass:  PathProviderFoundation 
  sharedDarwinSource:  true 
macos: 
  pluginClass:  PathProviderPlugin 
  dartPluginClass:  PathProviderFoundation 
  sharedDarwinSource:  true

New resources for app extensions

We've added documentation for Flutter developers using iOS app extensions, including Live Activities, Home Screen Controls, and Share extensions.

To simplify creating home screen controls and sharing data, we path_provider've homescreen_widgetadded new methods to the and plugins.

See: https://docs.flutter.dev/development/platform-integration/ios/app-extensions

New resources for cross-platform design

The documentation now includes cross-platform design considerations for specific UI components , to learn more about these UI components, check out the discussions in the Flutter UX GitHub repository: https://github.com/flutter/uxr/discussions

See: https://docs.flutter.dev/resources/platform-adaptations#ui-components

Android

Android CameraX support

Camera X is a Jetpack library that simplifies adding rich camera functionality to Android applications.

This feature works with a variety of Android camera hardware, and in 3.10 we added preliminary support for CameraX to the Flutter Camera plugin, which covers the following use cases:

• image capture
• video recording
• Show live camera preview

Dependencies: 
  camera:  ^0.10.4  # 最新相机版本
  camera_android_camerax:  ^0.5.0

developer tools

We continued to improve DevTools, a suite of performance and debugging tools for Dart and Flutter, some highlights include:

• The DevTools UI uses Material 3, which modernizes the look and enhances accessibility.
• The DevTools console supports evaluating a running app in debug mode, which prior to 3.10 could only be done while the app was paused.
• The embedded Perfetto trace viewer replaces the previous timeline trace viewer.

Perfetto can handle larger datasets and perform better than traditional trace viewers such as:

• Allow pinning threads of interest
• Click and drag to select multiple timeline events from multiple frames
• Extract specific data from timeline events using SQL queries

Deprecations and Breaking Changes

deprecated API

Breaking changes in 3.10 include deprecated APIs that expired after the v3.7 release.

To see all affected APIs, as well as additional context and migration guidance, see the previous release's deprecation guide .

Dart Fix can fix many of these issues, including quick fixes in the IDE and dart fixbatch applications using commands.

Android Studio Flamingo Upgrade

After upgrading Android Studio to Flamingo, you flutter runmay flutter buildsee errors when trying to build or Flutter Android apps.

This error occurs because Android Studio Flamingo updated its bundled Java SDK from 11 to 17, and the previous 7.3 Gradle version does not work when using Java 17.

We've updatedflutter analyze --suggestions to verify if this error occurs due to an incompatibility between Java SDK and Gradle versions.

To learn about different ways to fix this error, check out our migration guide: https://docs.flutter.dev/go/android-java-gradle-error.

Window singletons are deprecated

The revised version deprecates Window singleton, and applications and libraries that depend on it need to start migrating .

This will prepare your app for multi-window support in advance when your app does support it in a future version of Flutter.

PS: You can also pay attention to the new game based on Flutter released by this I/O: I/O FLIP game