Flutter at Google IO 2023: What's New in Flutter 3.10?

Wireless deployment for iOS

Flutter iOS apps can now be deployed and hot reloaded wirelessly after successful pairing in Xcode. This eliminates the need for a cable connection and offers greater flexibility in app development.

Wide gamut images support

Flutter apps on iOS can now render wide gamut images accurately. By utilizing Impeller and adding the FLTEnableWideGamut flag in the Info.plist file, developers can enable this functionality.

Improved spell check

The SpellCheckConfiguration() widget now supports Apple's spell check service by default on iOS. Developers can easily incorporate spell check functionality in CupertinoTextField using this widget.

Cupertino widgets expansion

Flutter 3.10 introduces the addition of CupertinoCheckBox and CupertinoRadio widgets to the Cupertino library. These widgets match Apple's styling guidelines for checkboxes and radio buttons. Additionally, Material checkbox and radio widgets now have .adaptive constructors, dynamically switching between Cupertino and Material widgets based on the platform.

SwiftUI-inspired improvements

Flutter 3.10 enhances animations, transitions, and colors to align with SwiftUI. Notable improvements include updates to the CupertinoPageRoute transition, a title magnification animation for CupertinoSliverNavigationBar, and the introduction of new iOS system colors in CupertinoColors.

Refresh rate optimization

Flutter optimizes the refresh rate on iOS when displaying animated or scrollable PlatformViews. This ensures a smoother user experience by reducing jank.

Simplified code sharing

Flutter now supports the sharedDarwinSource key in the pubspec.yaml file, allowing code sharing between iOS and macOS platforms.

Docs for iOS app extensions

Flutter developers now have comprehensive documentation on utilizing iOS app extensions, including live activities, home screen widgets, and share extensions. The path_provider and homescreen_widget plugins have also been updated to simplify the creation of home screen widgets and data sharing.

Cross-platform design

The Flutter documentation now includes valuable insights and guidelines for cross-platform design considerations. Developers can find detailed discussions in the Flutter UX GitHub repository.

Android CameraX support

Flutter 3.10 introduces preliminary support for CameraX in the Flutter Camera plugin. This integration simplifies the addition of camera functionality to Android apps, including image capture, video recording, and live camera preview.

Reduced file size of icon fonts

To improve load times, this release optimizes the file size of icon fonts by removing unused glyphs from both Material and Cupertino sets. This optimization reduces the overall size of the app, resulting in faster loading and improved user experience.

CanvasKit size reduction

Flutter now offers a smaller custom CanvasKit "flavor" specifically designed for Chromium-based browsers. Leveraging Google's industry-leading CDN, the hosted CanvasKit delivers improved performance by further reducing the size of the required assets. This enhancement enables smoother rendering and faster interactions across a wide range of browsers.

Flutter web embedding

Flutter web apps can now be served from a specific element within a web page, offering greater flexibility in application layout. Prior to this release, apps were limited to either occupying the entire page body or being displayed within an iframe tag. With the new update, developers can embed their Flutter web apps seamlessly into existing web pages by targeting specific elements.

Fragment shader support

Flutter web apps now have the ability to utilize Flutter's fragment shader support. This empowers developers to create visually stunning effects and customizations by leveraging shaders directly within their web applications. The addition of shader support extends the creative possibilities for Flutter web developers, enabling the creation of unique and visually compelling user experiences.

ColorScheme.fromImageProvider()

All Material3 components now configure the default colors of the theme's ColorScheme. The default color scheme employs shades of purple. Developers can create custom color schemes from a single "seed" color or an image, ensuring visually appealing and accessible color schemes.

NavigationBar

This provides an M3 version of BottomNavigationBar widget. While M3 uses different colors, highlighting, and elevation, it works as it did before. To override the default appearance of the NavigationBars widget, use the NavigationBarTheme widget. Though you don’t need to migrate existing apps to this component, you should use it for new apps.

NavigationDrawer

Material3 offers the NavigationDrawer widget as an enhanced version of the Drawer widget for destination selection. NavigationDrawer displays a single-selection list of NavigationDestinations, and developers can include additional widgets in the list. The NavigationDrawer can also scroll when necessary, providing flexibility in design. Customization of the NavigationDrawer's appearance can be achieved using the NavigationDrawerTheme widget.

SearchBar and SearchAnchor

These components introduce predictive text support for search queries. When a user enters a search query, the app generates a list of matching responses in a dedicated "search view." The user can then select a response or refine the query. To modify the appearance of these components, developers can utilize the SearchBarTheme and SearchAnchorTheme widgets.

Secondary TabBar

Material3 enables the creation of a second tier of tabbed content with the TabBar.secondary widget. This feature allows for better organization and navigation within the app.

DatePicker and TimePicker

The M3 version of DatePicker and TimePicker updates their colors, layout, and shapes, enhancing the visual experience without changing the API. Both widgets now include their respective theme widgets, DatePickerTheme and TimePickerTheme.

BottomSheet, ListTile and Drawer

Material3 updates these components with various improvements. BottomSheet gains an optional drag handle, controlled by the showDragHandle property. ListTile receives updates to positioning, spacing, and alignment, while the Drawer undergoes color and elevation changes, accompanied by minor layout adjustments.

TextField updates

Material3 enhances all TextField widgets to support native gestures, ensuring consistent behavior across different input methods. Double-clicking or triple-clicking with a mouse now mimics double-tapping or triple-tapping on touch devices. TextField and CupertinoTextField widgets utilize these features by default.

New graphics engine

With over 250 commits in this release, Impeller becomes the default renderer on iOS. It offers better performance and reduces jank, resulting in improved consistency and responsiveness for iOS apps. Impeller has also made significant advancements in reducing memory footprint and improving performance on newer iPhones and iPads.

Eliminating jank

Several optimizations have been implemented to eliminate jank and improve overall app performance. Notably, setting the FlutterViews background color to a non-nil value slashes the time to obtain the next drawable layer from the Metal driver, resulting in higher frame rates, especially on recent iOS 120Hz displays. Additionally, loading of local images has been shifted to a background thread, reducing potential pauses and improving load times.

iOS startup latency

Inefficient strategies for identifier lookups in app bundles were addressed, significantly reducing startup latency. Large production applications may experience a startup latency reduction of approximately 30-50%.

Text rendering

Flutter now utilizes SkParagraph as the default library for text shaping, layout, and rendering, resulting in improved performance and consistency. As a result, the legacy libtxt and minikin libraries, along with their associated flag, have been removed, reducing Flutter's compressed size by 30KB.

Partial repaint feature

In the 3.0 release, an Android feature was enabled in the rendering pipeline, utilizing advanced GPU driver features to repaint only the necessary screen regions. However, due to practical limitations and limited device support, this feature has been disabled on Android. It remains enabled on iOS with the Skia backend, and plans are in place to enable it with Impeller in future releases.

DevTools UI and new features

The DevTools UI has been modernized with Material 3, providing a fresh look and improved accessibility. The DevTools console now supports evaluations for a running app in debug mode, allowing developers to interact with the app even when it's not paused. Additionally, a new embedded Perfetto trace viewer replaces the previous timeline trace viewer, offering better performance and handling larger datasets. Perfetto introduces new features such as thread pinning, selecting multiple timeline events across frames, and using SQL queries to extract specific data from timeline events.

SLSA level 1 support

The Flutter Framework now complies with SLSA Level 1, implementing various security features. These include a scripted build process that enables automated builds on trusted platforms, multi-party approval workflows with audit logging, and provenance to ensure the integrity of framework release artifacts. These security enhancements not only improve the supply chain security of Flutter but also pave the way for future compliance with SLSA Level 2 and Level 3.

Android Studio Flamingo

Upgrading to Android Studio Flamingo may introduce an error when running or building Flutter Android apps. This error arises due to the bundled Java SDK update from version 11 to 17 in Android Studio Flamingo, which causes incompatibility with Gradle versions earlier than 7.3. To assist developers in resolving this issue, the Flutter team has updated the flutter analyze --suggestions command to validate if the error is caused by the Java SDK and Gradle version mismatch.

Conclusion

Flutter 3.10 introduces significant updates and enhancements that elevate the development experience. From improved performance and stability to refreshed Material Design components, enhanced DevTools, and a migration guide for Android Studio Flamingo, Flutter 3.10 empowers developers to create exceptional cross-platform applications.

If you found this article informative and valuable, we encourage you to share it with fellow developers and enthusiasts who may benefit from the latest insights and advancements in Flutter. Let's spread the word about Flutter 3.10 and continue building amazing apps together.