Flutter

10 min

10 min

Sahaj Rana

Published on Aug 24, 2023

What's new in Flutter 3.13? Unraveling latest Features and Improvements

Flutter, the dynamic open-source framework for crafting natively compiled applications, continues its rapid evolution. With an impressive 724 pull requests merged and an inspiring 55 new community contributors, the Flutter 3.13 release showcases the vibrant engagement of its user base.

This edition delves into diverse advancements, unveiling an array of exciting improvements. Impeller, the cutting-edge graphics renderer, witnesses noteworthy enhancements, guaranteeing enhanced performance and visual fidelity on iOS.

Novel engine APIs catering to foldable devices are introduced, underscoring Flutter's commitment to versatile device experiences. The Material framework is fortified with increased platform adaptability, customization, and new capabilities.

Accessibility updates cater to diverse user needs. Specific platform upgrades include enhanced Android support and refined iOS compatibility. DevTools, an essential part of Flutter's toolkit, experiences performance enhancements. These improvements collectively propel Flutter 3.13 into a new era of versatile and accessible app development.


Engine Enhancements

In Flutter 3.13, engine enhancements take center stage, with the introduction of Impeller, a groundbreaking graphics renderer that is set to redefine the Flutter experience across platforms.


Introducing Impeller: Elevating Graphics Rendering

Impeller emerges as a powerful addition to Flutter's arsenal, offering a modern approach to rendering graphics. Designed to replace the previous renderer, Impeller promises superior performance and visual fidelity, catering to the demands of modern app development.


iOS Performance Boost:

Thanks to user feedback and diligent optimizations, Impeller on iOS now boasts reduced latency, eliminating shader compilation jank.

This results in not only smoother transitions but also higher average throughput. For instance, the flutter/gallery transitions benchmark reveals that average frame rasterization time has halved compared to the previous Skia renderer. Key optimizations include:

  • Implementation of dirty region management and partial repaint.

  • Concurrent render pass encoding.

  • Numerous text rendering improvements.

  • Introduction of a fast path for convex shapes to avoid costly tessellation calls.

  • Adoption of compute shaders for select operations.

  • More aggressive culling of out-of-bounds draw operations.


Fidelity Enhancements:

  • In response to user input, wide gamut colors are now the default on iOS when Impeller is in use, resulting in richer and more vibrant visuals.


Progress on Impeller for Android:

While Impeller's Vulkan backend for Android is a work in progress, it hasn't reached the quality level required for an official preview. The Flutter team prioritizes delivering a high-quality experience for users' first encounters with Impeller on Android and anticipates a preview release in the near future.

The OpenGL and Vulkan backends have already seen significant improvements in average frame rasterization times, thanks to backend-agnostic optimizations. Community contributions, notably from GitHub user ColdPaleLight, have played a vital role in enhancing fidelity and performance, including the addition of support for conical gradients. Developers are encouraged to monitor Impeller's progress through the Impeller project dashboard on GitHub and to continue reporting fidelity and performance issues.


Impeller (and Wonderous) on macOS:

After successfully being turned on by default for iOS, Impeller expands its horizons to macOS with a preview release. Developers can take advantage of Impeller's capabilities by following guidance on the Impeller page. The Flutter team eagerly awaits user feedback to further enhance Impeller for macOS.

To contribute to improvement efforts, developers are urged to establish baseline metrics by running macOS apps without SkSL warmup, using DevTools to identify any shader compilation-related issues, and thoroughly testing their apps with Impeller.

Detailed issue reports on GitHub are highly encouraged, including information about the user's device, video recordings, and performance traces. For those interested in trying Impeller on macOS, Wonderous is available for installation from the Mac App Store.

In summary, Impeller represents a significant leap forward in graphics rendering, with performance improvements, enhanced fidelity, and expanding compatibility across iOS, Android (in progress), and macOS (preview). The Flutter community's feedback and contributions have been instrumental in these advancements.


New Engine APIs

Improved Foldable Support:

  • Introduction of the FlutterView.display API to enhance foldable device compatibility.

  • Facilitates retrieval of various display properties such as physical size, device pixel ratio, and refresh rate.

  • Aimed at providing developers with better tools to optimize their apps for foldable devices.


Framework


Material Enhancements:

  • Enhanced Material Framework for improved platform adaptability, customization, and capabilities.

Character Recognition in TextField:

  • iOS users can now utilize the device camera to recognize characters and insert them into TextField.

  • This feature, driven by the efforts of community members luckysmg (Author) and tgucio (Reviewer), required 1000 lines and 70 commits bridging the engine and framework.


Platform Adaptive Dialog:

iOS (above) and Android (below)

  • Adaptive constructor introduced for AlertDialog, enabling the display of Material or Cupertino dialogs based on the platform.

  • Picking AlertDialog.adaptive() turns to CupertinoAlertDialog for iOS and Material AlertDialog in Android.


CupertinoDatePicker Enhancement:

  • CupertinoDatePicker now features a monthYear mode, enhancing date picking options.


Cupertino Check Styled Radio:

  • Addition of the useCheckmarkStyle property to CupertinoRadio.

  • On iOS, checkmark style adoption can be controlled through widgets with Radio.adaptive and RadioListTile.adaptive.


Customization for Material Widgets:

Improved customization options for Material widgets, including:

  • Using the error property InputDecoration (as opposed to a string) to customize the error widget on text fields.


  • Adding tooltips to ButtonSegment.


  • Adjusting the gap in ExpansionPanelList with the materialGapSize property.


  • Customizing the trackOutlineWidth for Switch.


  • Setting padding using the tilePadding property on NavigationDrawer.


  • Aligning tabs with the alignment property for TabBar.



MaterialState Color Customization for Chips:

  • Enables customization of chip colors in different states.


Elevated Chips:

  • Introduction of elevated variants like FilterChip.elevated, ChoiceChip.elevated, and ActionChip.elevated following Material 3 specifications.


onSubmitted to SearchBar:

  • Facilitates initiating different actions when users complete text entry and press the keyboard's Done button.


BaseTapAndDragGestureRecognizer:

  • Addition of a base class for a family of classes, supporting tap + pan (TapAndPanGestureRecognizer) and tap + horizontal drag (TapAndHorizontalDragGestureRecognizer).

  • These classes serve both native text field gestures and other use cases, like scaling widgets using double tap + vertical drag gestures.


App Lifecycle Changes with AppLifeCycleListener

  • Introduction of the AppLifecycleListener class.

  • Enables listening to changes in the application lifecycle and responding to exit requests.


Scrolling Enhancements

Two-Dimensional Scrolling Foundation:

  • Introduction to the foundation for building two-dimensional scrolling widgets in Flutter 3.13.

  • New classes introduced for this purpose, including:

  • ChildVicinity: Represents the relative position of children in two dimensions.

  • TwoDimensionalChildDelegate: likewise SliverChildDelegate, has the subclasses as in TwoDimensionalChildBuilderDelegate and TwoDimensionalChildListDelegate.

  • TwoDimensionalScrollView, an abstract base class that generates a TwoDimensionalScrollable and a TwoDimensionalViewport based on an identical concept similar to the one-dimensional ScrollView.

  • RenderTwoDimensionalViewport: Responsible for laying out box children in two dimensions.

  • Introduction of diagonal scrolling and its configuration using DiagonalDragBehavior.

  • Mention of user study conducted for robust development.

  • Example of a simple, lazy-loading, two-dimensional grid implemented in DartPad.

  • Upcoming two-dimensional scrolling widgets in the two_dimensional_scrollables package.


New Slivers:

  • Introduction of new slivers in Flutter 3.13 for composing unique scrolling effects.

  • SliverMainAxisGroup and SliverCrossAxisGroup to group several slivers altogether.

  • Sticky header effect creation using SliverMainAxisGroup for pinned headers.

  • Cross-axis grouping for arranging slivers side by side, along with widgets like SliverCrossAxisExpanded and SliverConstrainedCrossAxis for determining space allocation.

  • Introduction of DecoratedSliver for embellishing slivers with decorations.

  • Illustration of these new slivers with an example in DartPad.


Accessibility Enhancements

  • Introduction to accessibility enhancements in Flutter 3.13.

  • Addition of the `onOffSwitchLabels` accessibility property to `CupertinoSwitch` for displaying I/O labels.



FocusSemanticEvent Addition:

  • Inclusion of the `FocusSemanticEvent` in the update.

  • Cautionary note on its usage due to potential impact on users' focus expectations.


Screen Reader Support for IconButton:

  • Availability of `isSelected` property for `IconButton` in screen reader interactions.


Platform-Specific Enhancements

Android New Support Targets:

  • Introduction of enhanced Android support in Flutter 3.13.

  • Targeting of Android 14/API 34 in this release.

  • Emphasis on rigorous testing against the new Android SDK and commitment to issue resolution.


iOS Reduced Rotation Distortion:

  • Description of an issue where Flutter apps experienced distortion during iOS screen rotation.

  • Explanation of modifications made to mitigate the distortion, ensuring better alignment with native iOS behavior.


Renaming Runner iOS:

  • Explanation of the Runner Xcode project and workspace created for Flutter iOS apps.

  • Highlighting the new ability to rename the workspace or project to prevent clutter.


Preparing for iOS 17 and Xcode 15:

  • Notification about the forthcoming release of iOS 17 and Xcode 15.

  • Emphasis on the need for Flutter 3.13 for development using this toolchain.

  • Reminder to download the iOS 17 simulator when acquiring Xcode 15.


Flutter Games Advancements

Flutter Games Toolkit Evolution:

  • Introduction to the Flutter casual games toolkit launched in 2022.

  • Mention of key components, including templates, tutorials, documentation, and community engagement.

  • Highlighting the toolkit's role in facilitating game development for Flutter Developers and its significant adoption in publishing tens of thousands of games.


Responsive Developer Engagement:

  • Reference to ongoing engagement with Flutter game developers to enhance the toolkit.

  • Highlighting the importance of feedback from developers for toolkit improvement.

  • Mentioning the desire expressed by developers for increased resources, sample code, and insights.


Enhancements in Resource Sharing:

  • Introduction of the updated Flutter Games web page.

  • Description of the newly added carousel of video resources and exposure to new games for learning purposes.

  • Teasing forthcoming toolkit updates with additional resources and sample materials for game development.


Strategic Partnership and Workshop:

  • Highlighting a significant partnership with AdMob in July 2023.

  • Mentioning a specialized workshop focused on UX design and Monetization for Flutter game developers.

  • Noting the successful participation of approximately 100 developers in a live interactive webinar format and their high satisfaction rating of the session.


Future Prospects and Interaction:

  • Assurance of ongoing efforts in enhancing the toolkit.

  • Encouraging developers to anticipate more updates.

  • Invitation to share improvement ideas by contacting the Flutter games team via email at flutter-games@google.com.


Enhanced DevTools Functionality

Performance and Usability Refinements:

  • Detailing the enhancements in performance and usability within DevTools.

  • Introduction of a new overflow menu on the navigation bar to address scenarios of tab list overflow.



  • Mention of the newly introduced class types legend on the Memory tab.


  • Highlighting the improved scrolling experience within the CPU profiler's tree table.


Debugger Optimization:

  • Signifying optimization efforts within the debugger component.

  • Noting a substantial acceleration in searching within a file or for a file, achieving up to a 5-fold speed improvement.


Release Notes and Versions:

  • Encouraging further exploration of the latest features and updates in DevTools through the release notes of versions 2.25.0 and 2.24.0.


Breaking Changes and Deprecations

Default Material Design Update:

  • Announcement of a significant change in the default theme for the next Flutter stable release.

  • Transitioning from ThemeData's useMaterial3 default being 'false' to 'true,' making Material 3 colors, text styles, and visual elements the default for applications.

  • Reference to a Material 3 demo for visual comparisons between M2 and M3.


Android Supported Platform Update:

  • Notice of the discontinuation of support for Android Jelly Bean API levels (16, 17, and 18) in Flutter.

  • Assurance that most apps should automatically migrate to the new minSdkVersion.

  • Instructions for manual minSdkVersion adjustment if not migrated automatically, involving locating and modifying the module level build.gradle file.

  • Emphasis that Flutter plugins will not be migrated automatically, necessitating plugin authors to update the minSdkVersion in the top-level build.gradle file.


Changes and Migration Resources:

  • Clarification of breaking changes encompassing deprecated APIs that became obsolete post v3.10 release.

  • Directive to access the deprecation guide for this release, containing a comprehensive list of affected APIs, context, and migration assistance.

  • Acknowledgment of Flutter Fix's support for addressing many of these issues, either through IDE quick fixes or bulk application via the dart fix command.

  • Appreciation for the community's role in contributing tests that aid in identifying these breaking changes.

  • Suggestion to review Flutter's breaking change policy for additional insights.


Contributions, Flutter Repository Priorities, and Triage Updates

New Priority Definitions and Triage Scheme:

  • Description of recent developments in the Flutter project's issue management process.

  • Adoption of revised priority definitions (P0-P3) aligned with common open-source practices, streamlining bug importance evaluations.

  • Transition from 7 priority categories to 4, aiming for improved clarity in bug severity assessment.

  • Envisaged enhancement in effective communication with bug filers about issue resolution timelines.

  • Introduction of an updated triage framework to prevent issues from being overlooked or neglected.

  • Implementation of a bot that interacts with the issue database, facilitating label management, commenting, and Discord integration.

  • Acknowledgment of a potential learning curve as the team adapts to the new system.

  • Confidence in the bot's eventual productivity benefits for issue management.


Conclusion: Flutter 3.13

As we conclude this update, it's essential to recognize that our remarkable community's contributions have been pivotal in shaping Flutter's progress. For an exhaustive list of merged pull requests featured in this release, please refer to the comprehensive release notes and change log dedicated to this version.

Flutter 3.13, accompanied by Dart 3.1, is now accessible in the stable release. To begin leveraging these latest enhancements, a simple 'flutter upgrade' command is all that's required. Looking forward to the next interactions and collaborations!