Promptless AI is here soon - Production-ready contextual code. Don't just take our word for it. Know more
Know More

Exploring the Latest Updates in Flutter 3.13 for Seamless App Development

No items found.

Nidhi Sorathiya

August 19, 2023

Nidhi Sorathiya

August 19, 2023

A New Landscape in App Development

Holla Flutter devs! 💙 Recently Flutter 3.13 release has been rolled out with an amazing array of features, bug corrections, and performance improvements, thanks to the collective efforts of our brilliant Flutter community. Ride along with me to discover the fresh updates in this latest release. 🚀

As developers, we're always on the lookout for stable releases that fix syntax errors, address leak tracker breaking, or improve the hit-testing code flow, aren't we? That’s why the excitement for the new Flutter 3.13 update is running high in the developers' community. In this update, our beloved open-source UI software development kit, Flutter, comes bearing gifts in the form of fresh features and enhancements. Let’s unwrap and explore what it has to offer.

Powered Impeller Engine

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

A prime focus in this update is the introduction of Impeller, a new and efficient graphics renderer. The intention behind Impeller was to fix paint offset issues in complex UI models, leading to solutions such as using the RenderObject.paintBounds property. A crucial change in how the Flutter engine renders graphical data, Impeller's primary goal is to amplify performance while minimizing resource use.

Since the past stable releases, numerous improvements have been made to enhance the performance and working of Impeller, most of which are transparent to developers. For instance, dirty region management and partial repaint have been enabled to optimize performance.

Impeller's Enhanced iOS Performance

Among the flurry of changes in this new update, a noteworthy fix has been made to enhance the performance of Impeller on iOS. The Flutter team has been working tirelessly to better the Impeller renderer's performance on iOS. The Impeller renderer on iOS has gained a lower latency and higher throughput, earning a significant improvement on the flutter/gallery transitions performance benchmark by addressing minor inaccuracies such as super tiny fixes in iOS performance.

Probing the Progress of Impeller on Android

Flutter Team has been striving to improve the Vulkan backend for Impeller on Android. Although it is yet to reach the stage where they want to launch an official preview, for that they're making steady progress. Recently, some significant fixes have been made in this direction, such as to update misc tests and refactor tests to make them more practical, which means release mode developers of Flutter apps may soon be delighted with quality Impeller support on Android.

Support of New Engine API for Better Foldable Support

This new API can be used to get various properties related to the display. The new getter FlutterView.display returns a Display object. The Display object reports the physical size, the device pixel ratio, and the refresh rate of the display. An example is also provided at setPreferredOrientations property with the use of this new API.

Material Updates: The New Facets of Flutter's UI Toolkit

One significant area where Flutter 3.13 turns the spotlight is Material Design. Adhering to the vow to apply updates to Material that fix tooltip crashes, dive into the changes that came with Flutter 3.13.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

Charmed by Character Recognition in TextField

Who would not love the idea of injecting more intelligence into TextField? It means less typing and more fun, doesn't it? The TextField just got substantially smarter with character recognition. When TextField is employed on an iOS platform, users will now see an option that allows them to utilize the device camera. The camera will recognize characters which can then be inserted into the TextField. Quite shiny for us developers - and more importantly, for the users of the apps we develop!

Navigation Reinvented with Adaptive Dialogs

We know how essential it is to make our apps feel at home on the platform they're running on. To that end, Flutter has introduced an adaptive constructor to the AlertDialog along with the adaptive function showAdaptiveDialog. Using AlertDialog.adaptive(), it displays a Material or Cupertino dialog depending upon the platform. It makes dialogues not only user-friendly but also platform-friendly.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

DatePicker with Month and Year

This adds a monthYear mode to the CupertinoDatePicker widget.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

Cupertino-styled check radio

CupertinoRadio now has a useCheckmarkStyle property, which allows the Radio.adaptive and RadioListTile.adaptive widgets to control whether they use the checkmark style on iOS.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

Additional customization options for Material widgets

Several improvements have now made it easier to customize the design of the Material widgets, you can now:

  • Error property for InputDecoration to customize the error widget that is shown on text fields
  • Tooltips for ButtonSegment
  • Customize the gap in ExpansionPanelList using the materialGapSize property
  • Customize Switch's trackOutlineWidth
  • Customize NavigationDrawer's padding with the tilePadding property
  • Choose how to align the tabs using the alignment property for TabBar

MaterialState color for chips

Now it's possible to customize the color of the chips in all of the different states.

Raised Elegance with Elevated Chips

Since the last stable release, Material 3 guidelines have introduced elevated variants of chips, and voila - they're now in Flutter as well. These new chips (FilterChip,ChoiceChip, and ActionChip) have an "elevated" variant that is visually distinguishable, providing visual feedback of interaction and elevation. They adapt beautifully with dark and light themes – giving your apps a whole new level of sophistication.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

onSubmitted for SearchBar

This allows different actions to be triggered when a user finishes the entry and presses the Submit/Done button on the keyboard.

Uplifted App Lifecycle and Gesture Recognitions

Taking a leap forward, Flutter 3.13 introduces thoughtful enhancements for managing application lifecycles and gesture recognitions.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

Be In The Know with AppLifecycleListener

Understanding the state of your application and being able to track lifecycle events accurately is crucial. It helps you maintain excellent performance and ensures you don’t lose valuable user data. To this end, Flutter present AppLifecycleListener. This new class allows you to listen for changes in application lifecycle and respond to system-initiated requests to exit the app.

The use of AppLifecycleListener allows apps to be more responsive and intuitive. With it, you can make sure your app behaves just the way you intend, at any stage of its lifecycle.

Control Your App with BaseTapAndDragGestureRecognizer

In the realm of gestures, a family of classes centered around the tap and drag gesture has been added. You can now support complex gestures, including tap + pan (TapAndPanGestureRecognizer), and tap + horizontal drag (TapAndHorizontalDragGestureRecognizer), with this update. With more precise controls, you can design a more robust user interaction that's both intuitive and fluid.

These enhancements inject new levels of intuitiveness into Flutter apps, powering a smoother and more responsive user experience.

Innovations in Scrolling: A Smoother Experience

Join me as we navigate through the latest enhancements in the realm of scrolling in Flutter 3.13.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

Embrace Freedom in Navigation with Two-Dimensional Scrolling

Everybody loves new ways to enjoy browsing their favourite apps, right? Well, Flutter 3.13 is making browsing through your app more dynamic and enjoyable with the introduction of two-dimensional scrolling.

Flutter worked on a new foundation that enables the creation of widgets that scroll in two dimensions. This update unlocks several new classes for you to wield, like ChildVicinity, TwoDimensionalChildDelegate, TwoDimensionalScrollView, and RenderTwoDimensionalViewport.

Now, imagine entering an app where you're not confined to scrolling up and down or side to side. You are free to scroll diagonally, explore deeper, and experience content like never before. Exciting, isn’t it?

An Array of New Slivers for Unique Scrolling Effects

In this Flutter 3.13 release, a new set of slivers has been introduced. You might ask, what is a sliver? Technically, it's a portion of a scrollable area that you can define to act uniquely based on user inputs. In practice, slivers offer you the power to create unparalleled scrolling effects that add a touch of uniqueness to your Flutter applications' browsing experience.

New slivers such as SliverMainAxisGroup, and SliverCrossAxisGroup, when properly implemented, can create fantastic scrolling effects. Imagine sticky headers being gently pushed out of view as new headers slide in or group elements gracefully following the collector’s movement. Aren't you excited to try your hand at this?

The new ways to interact with two-dimensional scrolling space and the added new slivers are a game-changer. With these solid foundational capabilities, you can now warp scrolling to a new horizon and bring unparalleled user experiences to life.

Accessibility Upgrades: Bridging the Gap

In this interconnected world, we aim to make Flutter a friendly tool for everyone. Flutter 3.13 takes a leap towards inclusive design by incorporating several notable accessibility updates.

Enhanced Screen Reader Support for CupertinoSwitch and More

The CupertinoSwitch widget now provides the onOffSwitchLabels property to display I/O labels. This accessibility property enhances the user experience for those using screen readers by making it easier to understand the switch's current state.

Focus Attention with FocusSemanticEvent

Flutter is also adding the FocusSemanticEvent. It can be used to draw attention to specific widgets, but use this tool cautiously, as it could disrupt the usual flow of how a user would expect focus to work.

Reach out Better with IconButton's isSelected

Additionally, Flutter has made isSelected in IconButton available to screen readers, enhancing the depth of information for visually impaired users. With these upgrades, your Flutter applications become more accessible. Catering to a wider audience, they will deliver a seamless and equal user experience for everyone.

Platform Updates: Going the Extra Mile

With each release, Flutter becomes more inclusive and adaptable, catering to a broader range of devices and platforms. Flutter 3.13 brings a host of platform-specific enhancements that can't wait to be explored.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

New Support Targets for Android in Flutter 3.13

Ever experienced the frustration of an app not being compatible with your device? We all hate that. This is why, with this release, Flutter now supports targeting Android 14/ API 34. The Flutter team is diligently working to introduce and update features in Android 14 (like predictive back navigation). They want to ensure the highest standard of compatibility and usability across devices.

Improving Screen Rotation Experience on iOS

We all love our viewing experiences to be seamless, don't we? That’s why, in this release, improvements have been made to reduce distortion during iOS screen rotation. Now, your Flutter apps will feel more native and fluid on all iOS devices.

While these platform updates in Flutter 3.13 release enhance user experience, they also grant you as developers more flexibility and control over your Flutter apps on various platforms.

A Breakthrough in Gaming with Flutter

With Flutter 3.13, gaming isn't left behind. There's more to Flutter than just applications - it's time to celebrate the gamers and game developers in our community! Let's plunge into the exciting updates Flutter's bringing to the gaming world.

An In-Depth Dive Into Flutter Gestures: Amplifying your UI/UX Game!

An Intuitive Gaming Experience with Flutter's Enhanced Games Toolkit

The Flutter journey ventured into the gaming sphere back in 2022 with the casual games toolkit launch. It debuted with game templates, tutorials, documentation, and other resources to kickstart game development for Flutter developers.

In this release, Flutter has revitalized the Flutter Games web page, adding new video resources and game samples. The new toolkit updates are scheduled to roll out in a few months with more resources and samples to accelerate your game development journey.

They have taken strides to create an ecosystem that allows developers to design, develop and monetize their games more effectively. Expect some enriching insights from past workshops and collaborations as well.

As you can see, the Flutter 3.13 release invites game developers to showcase their creativity better. It enables you to deliver an enjoyable gaming experience.

DevTool Enhancements: Debugging Made Easy

Continuing our journey, let's dive into the tool that has been a trusted companion for us, the developers - the DevTools. The Flutter 3.13 release brings in new features and improvements to DevTools, simplifying debugging and enhancing performance.

A Sleek Overflow Menu for Better Navigation

In the previous stable release, there were some navigation issues when all tabs could not fit on the screen simultaneously. Acknowledging this, they have introduced an overflow menu on the navigation bar. It provides a list view for developers to effortlessly navigate through the tabs, especially when there are too many to fit on the screen at once.

Legend for Class Types

To further enhance readability and understanding, DevTools now includes a legend for class types on the Memory tab. This small but meaningful improvement enriches developer experience, allowing for quicker diagnostics and understanding.

Boosted Speed in Debugger

We understand the importance of efficiency in debugging. Hence, we've supercharged the debugging process too! Whether it's searching within a file or looking for a particular file, the process is now up to five times faster. Less loading and waiting means more productive debugging sessions!

There we go - accessible tools and UI and a massive speed boost. Flutter 3.13 has indeed tuned up DevTools to your comfort and convenience.

Looking Ahead: Breaking Changes and the Onset of Material 3

As we venture further into the future with Flutter 3.13, let's examine what's brewing for us ahead and grasp the breaking changes that this update brings.

Change is in the Air: Upcoming Material 3 Default

Big news! Flutter is planning to embrace Material 3 as the default in the next stable release. This implies that applications will get Material 3 color schemes, text styles, and visuals by default. The Flutter team has also provided a Material 3 demo for anyone looking to preview the differences between Material 2 and Material 3.

Leaving Behind Android Jelly Bean

With advancements, some older components need to be left behind. Flutter 3.13 discontinues the support for Android Jelly Bean API levels (16, 17, and 18). However, do not worry! Most apps should be migrated to this new minSdkVersion by default.

But if not, changes in the module-level build.gradle might be necessary. Flutter plugins also won't be migrated by default, so keep an eye out for manual changes in API levels if you're a Flutter plugin author.

Prioritizing and Organizing with a New Triage Scheme

Responding swiftly and effectively to issues reported by the community is crucial for any open-source project. In this respect, the Flutter team brings forward a new triaging scheme.

Over the past few months, they have tested an improved set of definitions for their priorities. By reducing their categories from seven to four, they are aiming to simplify the decision-making process regarding the importance of bugs and, hopefully, better communicate the state of the issues community reports.

As part of the new triage system, you may notice a bot commenting, adding, or removing labels on Flutter's issue database. It's their new helper, aiming to ensure no issue falls through the cracks

That's it with 3.13!

And here we are, reaching the end of our exploration of the latest Flutter updates. From engine improvements, material updates, app lifecycle changes, scrolling enhancements, and platform-specific upgrades, to improved accessibility, gaming, and DevTools updates, it’s clear that Flutter 3.13 brings a whole host of exciting improvements to the table. These enhancements, driven by a fantastic community, strive to transform the app development landscape and secure Flutter's standing as a preferred tool for countless developers worldwide.

For a complete list of PRs included in this release, the release notes, test contributions, and more, you can refer to the official Flutter 3.13 release documentation. For those passionate about keeping up with Flutter's latest features, fixes, and improvements, simply hit flutter upgrade in your terminal or command prompt and get your hands on the exciting new features of Flutter 3.13.

Thank you for joining me on this guided tour of Flutter 3.13 updates. Let's build beautiful things together with Flutter! ✨

Frequently asked questions

Frequently asked questions

No items found.