Latest Flutter updates | Flutter 3.10 is here

Flutter, the cross-platform app development framework, continues to evolve at a rapid pace, empowering developers to create stunning applications for multiple platforms. The latest release, Flutter 3.10, introduces a range of exciting features and enhancements that improve performance, user interface capabilities, and developer tools.

In this blog, we will dive into the details of Flutter 3.10, exploring its new widgets, improved performance optimizations, and refined developer tools. Join us on this tech-focused journey as we unravel the advancements that Flutter 3.10 brings to the table, helping developers build efficient and visually impressive applications that cater to diverse platforms.

So, without any delays, let us break down all the changes in new Flutter 3.10.

TextField Updates

In Flutter 3.10, the M3 update brings significant improvements to the TextField widgets, providing enhanced support for native gestures. Now, the TextField widgets respond to double-click and triple-click gestures, just as they would on touch devices. These updates are automatically applied to both the TextField and CupertinoTextField widgets by default.

TextField double click/tap gestures

By leveraging the M3 update, double-clicking or double-tapping on a TextField now extends the selection in word blocks. Similarly, double-clicking and dragging or double-tapping and dragging allows for an extended selection in word blocks.

TextField triple click/tap gestures

The M3 update also introduces a range of triple-click and triple-tap gestures for TextFields.

• Triple click: In a multiline TextField on Android, Fuchsia, iOS, macOS, and Windows, triple clicking selects a paragraph block at the clicked position. However, on Linux, it selects a line block instead. In a single-line TextField, triple clicking selects the entire text.

• Triple tap: In a multi-line TextField, triple tapping selects a paragraph block at the clicked position. In a single-line TextField, it selects the entire text.

• Triple click + drag: When using a multi-line TextField on Android, Fuchsia, iOS, macOS, and Windows, dragging after a triple click extends the selection in paragraph blocks. On Linux, it extends the selection in line blocks.

These improvements enhance the user experience by providing intuitive and consistent selection behavior across different platforms and input methods.

Material 3 updates in Flutter 3.10

Flutter 3.10 introduces an upgraded Material library that aligns with the latest Material Design specification. This update brings new components, component themes, and refreshed visuals. Developers can opt in to these changes using the useMaterial3 theme flag, which will soon become the default setting in the next stable release.

To utilize the M3 version of the Material library, simply set useMaterial3: true in your MaterialApp theme. This configuration is automatically added when creating a new app using the flutter create command.

For a glimpse of these exciting changes, you can explore the demo app, which allows you to toggle the useMaterial3 flag on and off.

ColorScheme.fromImageProvider()

All M3 components now come with default colors defined by the theme's ColorScheme. The default color scheme embraces various shades of purple. Additionally, developers can generate custom color schemes using either a single "seed" color or an image. The generated color schemes not only look visually appealing but also ensure accessibility.

NavigationBar

Flutter 3.10 introduces the M3 version of the BottomNavigationBar widget. While M3 introduces different colors, highlighting, and elevation, the widget retains its familiar functionality. To override the default appearance of the NavigationBar widget, developers can utilize the NavigationBarTheme widget. Although migrating existing apps to this component is not necessary, it is recommended for new app development.

NavigationDrawer

The M3 NavigationDrawer widget serves as an M3 destination selection widget based on the Drawer widget. It displays a list of NavigationDestinations widgets with a single option and permits the addition of additional widgets to the list. The NavigationDrawer can handle scrolling when required. To customize the default appearance of the NavigationDrawer widget, developers can leverage the NavigationDrawerTheme widget.

SearchBar and SearchAnchor

Flutter 3.10 introduces the SearchBar and SearchAnchor components, which provide predictive text for search queries. These components compute a list of matching responses in a "search view" when a user enters a search query.

The user can then select a response or adjust the query accordingly. The SearchBarTheme and SearchAnchorTheme widgets allow developers to alter these components' M3 designs.

Secondary Tab Bar

Using TabBar.secondary in M3, Flutter enables the development of a second tier of tabbed information. This secondary TabBar helps to differentiate and organize tabbed content effectively.

DatePicker changes

In Flutter 3.10, the calendar and textfield variants of the M3 DatePicker receive color, design, and shape improvements. These changes do not impact the API but introduce a new DatePickerTheme.

TimePicker updates

The M3 TimePicker receives modifications to colors, layout, and shapes for both the conventional and compact versions of the widget, similar to the DatePicker.

BottomSheet updates

Along with M3 color and form improvements, the BottomSheet component now has an optional drag handle that surfaces when showDragHandle has been configured to true.

ListTile changes

The M3 ListTile widget in Flutter 3.10 brings updates to positioning and spacing. These updates encompass content padding, alignment of leading and trailing widgets, minimum leading width, and vertical spacing. The API remains unchanged.

Drawer updated for M3

The M3 Drawer widget introduces color and elevation updates while incorporating minor layout changes for improved user experience.

Flutter embraces SLSA Level 1 Security

Exciting news for Flutter developers! The most recent version of the Flutter Framework happily declares that it complies with SLSA Level 1 of the Supply Chain Levels for Software Artifacts.

This achievement signifies the implementation of robust security measures, ensuring the integrity and trustworthiness of the framework. Let's delve into the notable security features that have been integrated:

• Scripted build process: Flutter's build scripts have been meticulously crafted to support automated builds on trusted platforms. By leveraging protected architectures, the risk of artifact tampering is significantly mitigated. This enhancement bolsters the overall security of the supply chain.

• Multi-party approval with audit logging: The release workflows of Flutter now require multiple engineers to approve before execution. This multi-party approval process is accompanied by comprehensive audit logging, leaving behind a traceable record of every action. These measures effectively prevent unauthorized changes from being introduced between source code and artifact generation.

• Provenance: With the latest update, beta and stable releases of Flutter are built with provenance. This means that the framework's release artifacts are constructed from trusted sources with verifiable contents. To further enhance transparency, each release provides links for users to easily view and verify the provenance on the SDK archive.

These remarkable advancements not only strengthen the security posture of Flutter but also pave the way for future compliance with SLSA Level 2 and Level 3. These higher levels of compliance will focus on safeguarding artifacts throughout the entire build process and beyond.

By adhering to SLSA Level 1, Flutter demonstrates its unwavering commitment to ensuring the security and trustworthiness of its software artifacts. Developers can confidently leverage Flutter's robust security features to build and deploy their applications with enhanced peace of mind.

Enhanced Flutter Web Capabilities in Flutter 3.10

Flutter's web development capabilities have been further enhanced in this release, introducing several noteworthy improvements. Let's explore the exciting features:

Improved Load Times for Flutter Web Apps

With this release, the file size of icon fonts has been significantly reduced. Unused glyphs from both Material and Cupertino have been pruned, resulting in faster load times for Flutter web applications. This optimization ensures a streamlined user experience right from the moment the app is loaded.

CanvasKit Size Reduction for All Browsers

For Chromium-based browsers, an even smaller custom CanvasKit "flavor" is now available. Leveraging Google's industry-leading CDN, the hosted CanvasKit delivers improved performance by further reducing its size. This enhancement benefits the rendering capabilities of Flutter web apps, enabling smoother and more efficient visual experiences.

Element Embedding

Introducing a highly requested feature, Flutter now allows you to serve web apps from a specific element within a page. Previously, apps could only occupy the entire page body or be displayed within an iframe tag. With this update, you have greater flexibility in integrating Flutter web apps into existing web pages. Sample code showcasing this element embedding functionality can be found on GitHub, facilitating seamless integration with your desired web layout.

Shader Support

Flutter's powerful fragment shader support is now available for web apps. This means that web applications developed with Flutter can leverage shaders to create stunning visual effects and enhance the overall graphics quality. This opens up new possibilities for creating immersive and visually captivating user interfaces on the web.

With these advancements, Flutter continues to empower developers in building high-performance and visually appealing web applications. The reduced file sizes, improved rendering capabilities, element embedding, and shader support contribute to a more efficient and flexible web development experience with Flutter.

Enhanced Flutter Engine

The Flutter Engine has undergone significant improvements in this release, introducing exciting enhancements that enhance performance and user experience. Let's delve into the key updates:

Introducing Impeller

In the previous stable release (3.7), flutter devs provided a preview of Impeller on iOS and gathered valuable feedback from users. Building upon that feedback, they have made substantial progress with over 250 commits to Impeller in this release. As a result, Impeller is now set as the default renderer on iOS in Flutter 3.10. All iOS apps built with Flutter will benefit from Impeller's improved performance, delivering smoother experiences with reduced jank.

Since the 3.7 release, Impeller has made significant advancements in reducing memory footprint. By utilizing fewer render passes and intermediate render targets, Impeller has optimized memory usage on iOS devices. Additionally, enabling lossy texture compression on newer iPhones has further reduced memory requirements without compromising visual fidelity. These optimizations have also yielded noticeable performance improvements on iPads.

To illustrate the impact of these improvements, let's take the "pull quote" screen in the Wonderous app as an example. These enhancements have nearly halved the memory footprint of such complex screens. The reduction in memory usage also translates into a modest decrease in GPU and CPU load, extending battery life for end users.

Furthermore, Impeller empowers our team to deliver popular feature requests more rapidly. For instance, Impeller enables support for the wider P3 color gamut on iOS, enhancing the visual richness of Flutter apps. Flutter thanks the contributions from the Flutter community, particularly ColdPaleLight and luckysmg on GitHub, who authored multiple patches that improved both fidelity and performance within Impeller.

While Impeller fulfills the rendering requirements of most Flutter apps, you have the option to opt-out if necessary. If you choose to do so, file an issue on GitHub to provide feedback on your specific use case. It's worth noting that Skia and Impeller may exhibit minor differences in rendering, which could be potential bugs. In future releases, they plan to remove the legacy Skia renderer for iOS to optimize Flutter's overall size.

Flutter devs are also actively progressing towards developing a Vulkan backend for Impeller, and although Impeller on Android is not yet ready for preview, they are looking forward to sharing more about its development in the near future.

To stay up-to-date with this progress, they have invited you to explore our GitHub project board, where you can track the latest advancements and contribute to the Flutter Engine's evolution.

These improvements in the Flutter Engine, especially the Impeller renderer, demonstrate their commitment to delivering enhanced performance and seamless experiences for Flutter apps on iOS.

Improved Performance

In addition to the Impeller renderer, this release introduces various performance enhancements and fixes, aimed at delivering even smoother experiences. Let's explore these improvements in detail:

Eliminating Jank

luckysmg, an open-source contributor has made a significant discovery regarding the time required to obtain the next drawable layer from the Metal driver. The amount of time it takes to get the next drawable layer is significantly decreased by changing the background color of the FlutterView to a non-nil value.

On newer iOS 120Hz panels, this adjustment substantially removes low frame rates and, in some circumstances, triples the frame rate. Over half a dozen GitHub issues have been resolved with this improvement, which was so significant that they backported a hotfix into the 3.7 release.

To avoid delays in vsync events, Flutter moved the process of loading of local pictures from the platform thread over to the Dart thread in the 3.7 stable release. However, this change introduced some jank due to additional work on the Dart thread.

By shifting the initial loading and decoding of local images from the main Dart thread to a background thread with this release, they’ve fixed the problem. This modification eliminates potential long pauses on screens with numerous local images while maintaining vsync event synchronization. In our testing, this change reduced the load time for simultaneous images by half.

Continuing the efforts to optimize Flutter's internal DisplayList structure, R-Tree based culling mechanism is added in this release. This mechanism eliminates unnecessary drawing operations at an earlier stage in the rendering process, resulting in accelerated performance.

For example, a custom painter that produces offscreen output experiences improved processing time, with our microbenchmarks showing a decreased DisplayList processing time of up to 50%. The degree of improvement may vary for apps with clipped custom paints, depending on the complexity and number of hidden draw operations.

Reducing iOS Startup Latency

There was an inefficient strategy for identifier lookups in app bundles that contributed to increased startup latency, particularly in larger applications. In this release, they addressed this issue by fixing the bundle identifier lookup process. As a result, startup latency has been reduced by approximately 100ms or 30-50% in large production applications.

Reducing Size

To optimize the size of the Flutter framework, enhancements related to text shaping, layout, and rendering. Previously, Flutter used SkParagraph as the default library for these operations, alongside the option to fall back on the legacy libtxt and minikin libraries. With confidence in SkParagraph's capabilities, they’ve removed libtxt and minikin, resulting in a compressed size reduction of 30KB for Flutter.

Stability

Android capability is added to the rendering pipeline in the 3.0 release, making use of more sophisticated GPU driver capabilities. This feature aimed to repaint only the "dirty" region when changes occurred, leading to improved performance. While initial benchmark results showed promise, practical use cases did not always yield the same benefits. Furthermore, it was difficult to discover a group of devices and versions of Android that included this GPU driver capability. Considering the limited advancements and support, they’ve disabled the partial repaint feature on Android.

When utilizing the Skia backend, the feature is still available on iOS, and want to make it available with Impeller in a subsequent update.

These performance enhancements and fixes, alongside the Impeller renderer, solidify their commitment to providing a smoother, faster, and more stable Flutter experience for developers and users alike.

Enhanced API Functionality

In this release, we introduce several API improvements to enhance the capabilities of Flutter. Let's explore these enhancements in detail:

APNG Decoder

Responding to a highly requested feature, Flutter 3.10 now includes an APNG (Animated Portable Network Graphics) image decoder. With this addition, you can easily load and decode APNG images using Flutter's existing image loading APIs. This improvement expands the range of supported image formats, allowing developers to create richer and more dynamic visual experiences.

Image Loading API Enhancements

Under the guidance of Flutter’s Director of Engineering, tvolkert, significant improvements to dart:ui's image loading APIs are made. One notable addition is the new method instantiateImageCodecWithSize. This method enables the loading of images that meet specific conditions:

• The aspect ratio of the image is unknown at load time.

• The image needs to adhere to a bounding box constraint.

• The original aspect ratio of the image needs to be maintained.

This enhancement proves useful in scenarios where an app needs to display a single image from a pool of possibilities obtained from a network source. By leveraging the instantiateImageCodecWithSize method, developers can efficiently handle dynamic image loading with varying aspect ratios, while ensuring the images adhere to predefined constraints.

These API improvements empower Flutter developers to leverage a wider range of image formats and offer greater flexibility in loading and displaying images in their applications.

Android updates Flutter 3.10 | CameraX Support

Flutter 3.10 introduces preliminary support for CameraX, a Jetpack library, in the Flutter Camera plugin. CameraX simplifies the process of integrating advanced camera functionality into your Android app, offering compatibility across a wide range of Android camera hardware. The support for CameraX in the Flutter Camera plugin includes the following key use cases:

• Image Capture: Capture high-quality still images using the CameraX implementation.

• Video Recording: Record videos with various settings and configurations using CameraX.

• Live Camera Preview: Display a real-time preview of the camera feed in your Flutter app.

To get started with CameraX support in your Flutter project, you need to opt in by adding the following line to your pubspec.yaml file:

Dependencies:

camera: ^0.10.4 # Latest camera version

camera_android_camerax: ^0.5.0

By adding these dependencies, you enable the usage of the CameraX implementation in the Flutter Camera plugin.

Integrating CameraX into your Flutter app empowers you to leverage the extensive capabilities offered by the Android camera ecosystem, providing users with a rich and seamless camera experience.

iOS Enhancements in Flutter 3.10

Flutter 3.10 introduces several exciting enhancements specifically targeted towards iOS development. Let's dive deep into each of these improvements:

Wireless Debugging

With this release, developers can now run and hot reload their Flutter iOS apps wirelessly, eliminating the need for a physical cable connection. Once you have successfully paired your iOS device wirelessly in Xcode, deploying your app to the device is as simple as using the flutter run command.

Check that the network icon displays alongside your device in Window > Devices and Simulators > Devices to guarantee a seamless debugging process. More detailed information can be seen in Flutter documentation.

Wide Gamut Image Support

Flutter now provides comprehensive support for accurate rendering of wide gamut images in iOS apps. The application you are developing must use the Impeller renderer and set the FLTEnableWideGamut flag in the Info.plist file in order to benefit from wide gamut support.

Spellcheck Support

The SpellCheckConfiguration() widget now seamlessly integrates with Apple's spell check service by default on iOS. To enable spell check functionality in your app, simply set the spellCheckConfiguration parameter in CupertinoTextField with the appropriate configuration.

Adaptive Checkbox and Radio

The Cupertino library's new CupertinoCheckBox and CupertinoRadio widgets are included in this version. These widgets provide checkbox and radio button components that adhere to Apple's native styling guidelines. Additionally, the Material checkbox and radio widgets now include .adaptive constructors, which dynamically utilize the corresponding Cupertino widgets on iOS and macOS platforms, and Material widgets on other platforms.

Refined Cupertino Animations, Transitions, and Colors

To align with the design principles of SwiftUI, Flutter 3.10 enhances animations, transitions, and colors in Cupertino widgets. Notable improvements include updates to the CupertinoPageRoute transition, the addition of a title magnification animation to CupertinoSliverNavigationBar, and the inclusion of several new iOS system colors in CupertinoColors.

PlatformView Performance

To enhance performance and reduce jank, Flutter now optimizes the refresh rate of PlatformViews on iOS when they appear on the screen. Users will observe improved smoothness and responsiveness when working with animated or scrollable PlatformViews.

Shared Code for macOS and iOS Plugins

The sharedDarwinSource key found in the pubspec.yaml file for plugins is now supported by Flutter, making it possible to exchange code across the iOS and macOS platforms. By setting this key to true, developers can improve code reuse and streamline the development process.

ios:

pluginClass: PathProviderPlugin

dartPluginClass: PathProviderFoundation

sharedDarwinSource: true

macos:

pluginClass: PathProviderPlugin

dartPluginClass: PathProviderFoundation

sharedDarwinSource: true

New Resources for App Extensions

In this release, comprehensive documentation has been added to guide Flutter developers in utilizing iOS app extensions. These extensions encompass live activities, home screen widgets, and share extensions. Additionally, new methods have been introduced in the path_provider and homescreen_widget plugins, simplifying the creation of home screen widgets and sharing data.

New Resources for Cross-Platform Design

The Flutter documentation now includes dedicated sections focusing on cross-platform design considerations for specific UI components. To gain further insights and contribute feedback, explore the discussions in the Flutter UX GitHub repository.

These iOS enhancements empower developers to create high-performance, visually appealing Flutter applications while leveraging the native capabilities of the iOS platform.

DevTools

In efforts to enhance the suite of performance and debugging tools for Dart and Flutter, significant improvements have been made to DevTools. Here are the key highlights:

• Modernized UI: The DevTools UI now utilizes Material 3, offering a more contemporary look and improved accessibility for users.

• Enhanced Console: The DevTools console now supports evaluations for a running app in debug mode. Previously, this capability was only available when the app was paused, but now you can perform evaluations even while the app is running.

• Perfetto Trace Viewer: They have introduced an embedded Perfetto trace viewer, replacing the previous timeline trace viewer. The new Perfetto viewer offers several advantages, including better performance and the ability to handle larger datasets. Additional features include:

  • Thread Pinning: You can now pin threads of interest, allowing for focused analysis and troubleshooting.

  • Multi-Event Selection: Click and drag to select multiple timeline events from multiple frames, enabling more comprehensive analysis and correlation.

  • SQL Queries: Perfetto supports SQL queries to extract specific data from the timeline events, offering more flexibility and customization in analyzing performance data.

These improvements in DevTools empower developers with a more streamlined and efficient debugging experience, enabling them to identify and resolve performance issues more effectively.

Deprecations & Breaking Changes in Flutter 3.10

In this release, Flutter has introduced some deprecations and breaking changes that developers should be aware of. Here are the key points:

Deprecated APIs

Several APIs have been deprecated in this release, as they expired after the v3.7 release. To understand the full list of affected APIs and obtain additional context and migration guidance, please refer to the deprecation guide specific to this release. The Dart Fix tool can assist in addressing many of these issues by providing quick fixes within the IDE and allowing bulk application of fixes using the dart fix command.

Android Studio Flamingo upgrade

If you upgrade to Android Studio Flamingo, you may encounter an error when running flutter run or flutter build for your Flutter Android apps. This error arises due to the updated bundled Java SDK in Android Studio Flamingo, which moves from version 11 to 17.

Note that Gradle versions prior to 7.3 are incompatible with Java 17. To identify and address this error, we have enhanced flutter analyze --suggestions to validate the compatibility between your Java SDK and Gradle version. For detailed instructions on resolving this issue, please consult the migration guide.

Window singleton deprecation

The window singleton is deprecated in this release. If your apps or libraries rely on it, it is recommended to migrate away from it. This deprecation is in preparation for multi-window support, which will be introduced in a future version of Flutter. Ensuring your app is compatible with this upcoming feature will require migrating away from the window singleton.

It is important to review and address these deprecations and breaking changes in your codebase to ensure compatibility and maintain the smooth functioning of your Flutter applications.

Summing it up, Flutter 3.10 release

Flutter 3.10 introduces a range of exciting features and enhancements that enhance the development experience and empower Flutter developers to build high-performance, visually appealing applications. This release brings notable improvements in performance, with optimizations such as eliminating jank and reducing iOS startup latency. The addition of support for APNG images and wide gamut rendering on iOS enables developers to create visually stunning apps with accurate color representation.

The introduction of spellcheck support, adaptive checkboxes and radios, refined Cupertino animations and colors, and CameraX support for Android further expands the capabilities of Flutter applications. DevTools also receives significant updates, offering a modernized UI, enhanced accessibility, and an embedded Perfetto trace viewer for better performance analysis and debugging.

Additionally, the deprecation of certain APIs and the migration guidance provided ensure a smoother transition and future-proofing of Flutter apps. Flutter 3.10 continues to demonstrate its commitment to empowering developers and delivering a robust framework for cross-platform app development.

At Blup, we strive to give you all updates and advancements in the world of Flutter, mobile app development, and more. Also, a big shoutout to Kevin at Medium for detailed pointers on Flutter 3.10. Hope you enjoyed the article.

See ya later folks!