What’s New in Flutter 3.10: Know About the Latest Flutter Updates and Features



May 22, 2023


May 22, 2023

Flutter is a dynamic framework known for its unwavering commitment to improvement and thrives within its strong and vibrant community. With an ever-evolving set of features, bug fixes, and performance enhancements, Flutter always ensures developers have the latest tools at their disposal.

And its latest improvement in the Flutter 3.10 version just proves that. 

As a developer-centric platform, DhiWise presents a quick guide to the latest updates in Flutter 3.10, to empower developers and fuel their innovative journeys. Find out more about Flutter's new version and what improvements it offers.

So, get ready to know about the impressive Flutter 3.10 updates and features to stay ahead with curated insights into the realm of limitless possibilities.

What is the latest version of Flutter?

Flutter has just released its new version Flutter 3.10 which includes many improvements for web and mobile application development. It has brought new widgets, security, framework advancements, updates to existing widgets, performance improvements, and much more. 

One of the most significant Flutter updates is the improved Material Design Widgets that come with Material 3 and Navigation updates. Additionally, we will also see the introduction of Impeller for better graphics processing and stability improvements and updated Pickers and Bottom Sheet Widgets that have been improved for better functionality. There are also enhancements for web and mobile apps, APIs, and more. 

Flutter 3.10 Framework Advancements

Flutter 3.10 has introduced a few advancements to the Flutter Framework that improves your UI interface designing capabilities. 

Material 3 Library

Flutter Material Library now matches the latest Material Design specification. It has added new components and themes that help you to create more impactful visuals. To opt for the Material 3 version, you need to set useMaterial 3: true in the MaterialApp theme. 

Add ColorScheme.fromImageProvider() constructor to Material's color scheme:

This allows users to pass an ImageProvider and receives a Material-based color scheme from the dominant color of the Image. The Image Provides makes it highly accessible, as developers can use local assets, network, or memory images. 

Add Material 3 support for ListTitle:

This adds titleTextStyle,  subtitleTextStyle, and trailingAndLeadingTextStyle, and adds M2 and M3 templates. Also, refactor ListTile properties logic.

Add CupertinoSliverNavigationBar large title magnification on over scroll:

This adds magnification for CupertinoSliverNavigationBar large title on over scroll.

Fix NavigationBar ripple for non-default NavigationDestinationLabelBehavior:

The new version ink ripple regression caused by Fix NavigationBar ripple, which also expands the test coverage for non-default NavigationDestinationLabelBehavior.

Add indicatorColor & indicatorShape to NavigationRail, NavigationDrawer and move these properties from destination to NavigationBar :

This adds indicatorColor & indicatorShape to NavigationRail & NavigationDrawer. Move indicatorColor & indicatorShape. Also,  _indicator is renamed to _getIndicatorDecoration in test classes.

NavigationDrawer fixes and improvements:

The scrolling issue (unexpected scrolledUnderElevation) which triggers while scrolling the NavigationDrawer  and Drawer is now fixed.

Moreover, NavigationDrawer indicator overlay does not use shape is resolved. That means if the NavigationDrawer shape is modified via indicatorShape by widget or theme, from its default M3 StadiumBorder shape, the indicator correctly gets the new shape, but InkWell used by overlay color for focus, hover, and pressed state does not use the specified shape.

Create SearchBar and SearchBarTheme, SearchAnchor, and SearchViewTheme:

Now you can create a SearchBar widget which is a default trigger for a SearchView. In the SearchAnchor widget, we can use an anchor to trigger a search view. Here an anchor is a SearchBar or IconButton.

To use the SearchAnchor with the new Material 3 colors, you need to turn on the useMaterial3 flag in the ThemeData by setting up “theme: ThemeData(useMaterial3: true)”.

To make sure the search view position with respect to the window edge to avoid its overflow, it has been moved to the opposite direction so that it will not be clipped by the screen edges. If the screen size is smaller than the search view size then the search view should be resized to fit the screen.

Fix TabBar, TabBarIndicator,  and TabBarTheme issues and added support to TabBar.labelColor:

The issue with the wrong position of TabBarIndicator when setting indicatorSize to TabBarIndicatorSize.label is fixed. Also, the new advancement brings MaterialStateColor support to TabBar.labelColor and documents why TabBar.labelStyle.color and TabBarTheme.labelStyle.color cannot influence the tab's label color. The issue with Material3 TabBarTheme.dividerColor is not working and is resolved. 

The enhancement makes it possible to interrupt an ongoing TabBarView animation, which was not possible before. 

DatePicker and TimePicker update:

The new updates add a semantic announcement suffix that distinguishes the current date from the rest of the dates in DatePicker and DateRangePicker. Also, it adds Material 3 design support to the DatePicker and TimePickerAnd the TimePicker iPod mode width is fixed for the 12-hour format. 

The ShowDatePicker- Exposed callback when the user switches between entry mode from calendar to input, this way one can store the preferred input method in the application state and open the next date picker with the preferred entry mode already set (using the existing initialEntryMode parameter).  



Fixes and updates in the BottomSheet:

The BootomSheet now adds the default max-width as 640 and drag handle with the color and size to the bottom sheet theme. To set the drag handle you need to set ShowDragHandle to True.

Fix BottomAppBar and BottomSheet M3 shadow:

The ShadowColor property is hard-coded in the M3, which does not exist in the M2/ M3 for the widget, and is noticeable only when the widget is taken out of its usual context i.e not anchored to the bottom of the screen. 

Updates in the TextField:

The new updates allow users of CupertinoSearchTextField to choose to disable keyboard autocorrect learning. Also, it adds the M3 support for IconButtonTheme for input decorators and the TextField cursor color matches the M2 and M3 specifications. TextField now supports disabled input text style. 

M3 introduces native gesture support to TextField widgets, enabling users to perform actions like double-clicking or triple-clicking with a mouse, which is equivalent to double-tapping or triple-tapping on a touch device. This feature is integrated by default into TextField and CupertinoTextField widgets. Added support for - Triple tap/ click gesture, and Double tap and drag for text selection.

Dart 3 programming language support in Flutter 3.10

The new version introduces Dart 3, a major release of the programming language powering Flutter. This update brings significant enhancements by eliminating non-null-safe code, ensuring a protected and seamless experience in this fully safe language, free from the usual pitfalls of nullable languages.

Dart 3 also introduces language improvements, including the introduction of Patterns. This feature simplifies working with structured data, allowing functions to conveniently return multiple values simultaneously, eliminating the need for collections or dedicated classes.

Furthermore, the updated switch statement enables orderly deconstruction of structured patterns, while new class modifiers like interface class and sealed class offer expanded capabilities.

Framework support for SLSA and Security 

Protecting software from threats, and malicious attacks is critical for every developer. The Flutter framework security enhancement provides the top-notched security experience with SLSA Level 1. This acknowledges the implementation of many security features that include: 

1. Flutter Build Script:

The build script allows automated builds on trusted build platforms. This helps to prevent artifact tampering improving supply chain security.

2. Multy party approval

Flutter release workflows have been strengthened with multi-engineer approvals and auditable log records to prevent unauthorized changes between source code and artifact generation. These updates ensure code integrity and enhance transparency in the release process.

3. Provenance

Flutter beta and stable releases now include provenance information, ensuring that the framework release artifacts are built from trusted sources with the expected contents. Provenance links are provided for verification on the SDK archive, adding transparency and confidence to the release process.

Impeller Engine

In Flutter 3.10, the introduction of Impeller as the primary rendering engine on iOS. This brings significant enhancements to performance and visual experience. Impeller replaces Skia and addresses shader compilation issues that caused janky animations. 

By utilizing a tessellation algorithm, Impeller bypasses the need for shader compilation during graphics rendering, resulting in smoother animations and seamless rendering of shapes and colors. In this release, Impeller becomes the default rendering engine for all iOS apps in Flutter. 

The latest update includes a preview version of Impeller for Android, expanding its remarkable rendering capabilities to Flutter apps on Android devices. With this powerful engine, Flutter apps are set to deliver exceptional performance across both Android and iOS platforms. Regardless of the device, users can expect consistent and outstanding performance when interacting with Flutter apps powered by Impeller.

Benefits of using Impeller:

  1. It uses fewer rendering passes, which helps to improve the rendering speed. 
  2. Reduces memory uses and thus improves bandwidth uses and enhances app loading.
  3. Ensures that the size of the application is kept low. 

Web Integration in Flutter

The enhancement in Flutter for the web is mainly focused on a few key factors that include load time, accessibility, and interoperability. Flutter 3.10 release offers reduced size CanvasKit and other improvements as follows:

1. Lowered size of CanvasKit: 

The size of CanvasKit has been reduced, so the chromium-based browser can now use the smaller custom-based CanvasKit “flavor”. This lowers the load time for the framework, improving app performance.

2. Lowered size of icons and fonts

The reduced size of fonts and icons positively impacts the speed of the Flutter web application. 

3. Extends support for embedding Flutter content

You can embed Flutter content into the HTML web page just using the iframe tag. This allows devs to use the Flutter content using CSS content.

4. Custom Shaders 

The release introduces custom shaders that enhance the graphics effect in the app. 

Mobile apps: Android and iOS

The new release brings a list of new cool features for mobile app developers. And here is the list:

1. Wireless debugging for iOS app:

You can now perform wireless debugging in your Flutter iOS apps after pairing an iOS device in the Xcode. Also, there is support for variable refresh rates that will improve the quality of animations and pictures while scrolling the page on the iPhone and iPad. 

2. Spellcheck support in iOS 

The SpellCheckConfiguration() widget supports Apple’s spell-check service on iOS. You can use it with the spellCheckConfiguration Parameter in the CupertinoTextField.

3. Widgets, animations, and others for iOS

The new release add new Cupertino widgets to create checkboxes and radio buttons in the Cupertino library. On the other hand, the Material checkbox and radio widgets add .adaptive constructor that uses corresponding Cupertino widgets on the iOS and macOS platforms. And Material widgets on other platforms. The release also enhances a few animations,  transitions, and color to iOS system colors. 

4. Android camera support

Android camera supports add rich functionality for Android applications. This release adds primary support for the CameraX Jetpack library and covers image capturing, video recording, and displaying live camera previews.  

5. Foldable mobile device support

New release empowers developers to deliver users a smoother experience with responsive design, incorporating captivating visuals, cool widgets, and a host of exciting features that seamlessly adapt to foldable devices.

API improvements 

Flutter's new version has worked around the API improvements in the framework. 

Decoding APNG images: 

The current image loading API is enhanced to improve the APNG image loading. This helps to increase the rendering speed of images in the mobile application by improving aspect ratios, bounding box constraints, and other things. 

Enhanced developer experience

Flutter 3.10 emerges as a powerful catalyst for developers, presenting a bouquet of enhancements to elevate productivity and expedite app delivery. It showcases an admirable commitment to stability and security, alleviating the developer's burden and instilling confidence in building reliable and resilient mobile applications.

Each meticulously crafted feature and refinement in Flutter 3.10 reverberates with the pulse of developer needs and challenges. From swift rendering prowess to meticulous performance optimizations and fortified security practices, it empowers developers to unleash aesthetically pleasing app solutions upon the world.

Moreover, Flutter 3.10 embraces seamless API integrations, unlocking the potential for swift loading and silky-smooth rendering, and amplifying usability and accessibility for end users. It stands as a testament to the harmonious marriage of creativity and diplomacy, ensuring developers can gracefully deliver app experiences that captivate and delight.

Upgrade to Flutter 3.10: Keep your app development skills up to date 

Google's Flutter 3.10 update revolutionizes the app development landscape, unlocking a realm of possibilities for developers.

It brings a delightful fusion of enhanced features, turbocharged performance, and refreshed widgets, empowering developers to craft visually captivating, lightning-fast, and rock-solid apps. Whether it's the alluring Material Design Widgets or the seamless Navigation updates, Flutter 3.10 simplifies the journey of building top-notch apps. 

Embracing stability improvements and leveraging the graphics prowess of Impeller, developers can create apps that boast unprecedented reliability and blazing speed. With updated Pickers and Bottom Sheet Widgets in their arsenal, developers wield even more creative ammunition to fashion immersive user experiences.

Start getting the benefits of Flutter 3.10's groundbreaking updates and elevate your app development prowess with our comprehensive guide.

Well, if you are building a mobile application with Flutter try using DhiWise Flutter Builder to bring your app faster to the market!