Tech
Flutter 3.7 is out!
Gareth Reese
February 1, 2023
Flutter 3.7 is here, and we can’t wait to get our teeth stuck into it. We’ve seen some really nice new features added to this version of Flutter and our talented development team are really excited to work with it. Flutter 3.7 includes new features like the ability to create custom menu bars and cascading menus. Google have also improved the debugging tools, making it easy for our team to ensure stability.
There are also many more exciting features and new tools that have been added which make apps built with Flutter even more innovative and user friendly - keeping this technology ‘streets ahead’ of the competition!
Some of our developers have been using Flutter since the start and they're all really excited about this latest update.
Let’s share the new features with you so you understand what Flutter 3.7 is all about:
Material 3 support has been greatly enhanced in 3.7 with the migration of the following widgets:
The useMaterial3 flag in ThemeData enables the new features in the latest version of Flutter. To fully utilise the Material3 support, you need to have a complete M3 colour scheme. You can either create your own, use the new theme builder tool, or have Flutter generate one for you using the colorSchemeSeed parameter in the ThemeData constructor with a single seed colour:
For updated information on Material 3 support in Flutter, refer to the umbrella issue on GitHub.
To experiment with the new features, try the interactive demo that showcases all the M3 components.
Flutter now supports creation of menu bars and context menus.
On macOS, use the PlatformMenuBar widget to create a platform native menu bar. For all platforms, Material Design menus can be created using the MenuBar or the MenuAnchor widget.
These menus are customisable and menu items can be custom widgets or use the new menu item widgets like MenuItemButton and SubmenuButton.
The Impeller rendering engine is now available for preview on iOS on the stable channel. Performance is expected to be equal or better than Skia renderer for most apps, and the Impeller engine implements all but a few rarely used corner cases. The team plans to make Impeller the default renderer on iOS in a future stable release, so please provide feedback on GitHub.
Impeller on iOS has near full API coverage for Flutter apps but there are still a few gaps, which can be found on the Flutter Wiki. Minor visual differences in rendering between Skia and Impeller might exist and could be bugs, so it's recommended to file issues if noticed.
Work is ongoing for a Vulkan backend for Impeller with fallback to OpenGL on older devices. Impeller on Android is not yet available for preview but is being actively developed. Updates about its support for desktop and web will be shared in future releases.
The flutter build ipa command now includes a validation check for necessary iOS app settings before submission to the App Store. It informs the user of any changes needed before release.
This release includes improved tooling features, including a complete overhaul of the DevTools Memory debugging tool. The overhaul introduces three new tabs: Profile, Trace, and Diff, which offer all previous memory debugging features and more for easier debugging. The new features allow for analysing app's current memory allocation by class and type, tracing code paths that allocate memory for a set of classes at runtime, and comparing memory snapshots to understand memory management over time.
These new memory features are documented on docs.flutter.dev for more information.
The Frame Analysis tab in the Performance page offers useful information and suggestions on optimizing Flutter frames. It provides insights into how to trace costly parts of the frame and identifies expensive operations that may need attention.
This release also includes many bug fixes and improvements aside from the highlighted features. It addresses important bug fixes for the Inspector, Network profiler, and CPU profiler. For a comprehensive list of updates, refer to the DevTools release notes for Flutter 3.7.
In Flutter, custom context menus can be created with the showMenu method and built-in context menus can be customised.
You can add for example a custom "Send email" button to the default text selection toolbar that appears when a user selects an email address in Flutter by using the contextMenuBuilder parameter. The contextMenuBuilder is a property that has been added to existing widgets, such as the TextField, that display a context menu by default. The contextMenuBuilder allows you to return any widget you want, including modifying the default platform-adaptive context menu.
The new context menu feature in Flutter works outside of text selection. You can create an Image widget that displays a "Save" button when right-clicked or long-pressed by using the ContextMenuController. The ContextMenuController allows you to display the current platform's default context menu or a custom one anywhere in your app.
You can find a full set of examples for context menus in Flutter's sample repository, here.
CupertinoListSection and CupertinoListTile are the Cupertino-style equivalent of ListView and ListTile from the Material library. They can be used to display scrollable lists of widgets in a manner that is consistent with the iOS design language.
The Flutter 3.7 update has vastly improved scrolling functionality in Flutter. The trackpad interactions have been polished and refined, new widgets like Scrollbars and DraggableScrollableSheet have been introduced, and text selection within scrolling contexts is now better handled, providing a better user experience.
With the addition of new scrolling physics, MacOS apps will now have a higher level of consistency with the desktop platform. The AnimatedGrid and SliverAnimatedGrid widgets allow for animated item addition or removal in a grid view, providing a more visually appealing experience.
The update addressed a regression in the builder constructor of several scrolling widgets like ListView that was introduced during the NNBD migration of the Flutter framework. The itemBuilder was migrated to an IndexedWidgetBuilder, but it could no longer return null, which previously indicated the end of the list. With the introduction of NullableIndexedWidgetBuilder, the previous functionality was restored. The fix was contributed by @rrousselGit, who noticed the issue and provided the solution.
The internationalisation support in Flutter has undergone a significant overhaul. The gen-l10n tool has been completely rewritten to provide better support for various features such as descriptive syntax errors and complex messages involving nested/multiple plurals, selects, and placeholders.
The SelectionArea widget now supports keyboard selections, allowing users to extend existing selections using keyboard shortcuts such as shift+right. This enhances the user experience by providing a more convenient and efficient way of selecting text.
Platform Channels can now be invoked from any isolate, not just the main isolate provided by Flutter. This improvement makes working with isolates and host platform code in Plugins or Add-to-app easier and more flexible. For more information, you can check out the official documentation on Writing custom platform-specific code on flutter.dev.
The magnifying glass that appears during text selection is now supported in Flutter, this was on Android and iOS before. This neat little update is really appreciated by our app developers. This feature is enabled by default for all apps with text selection, but if you want to disable or customise it, you can do so by using the magnifierConfiguration property.
Swift migration for plugins
With Apple's emphasis on Swift for its own APIs, the Flutter community has made an effort to help Flutter plugin developers migrate or create new plugins using Swift. As a demonstration of best practices, the quick_actions plugin has been migrated from Objective-C to Swift.
If you are interested in contributing to the migration of other plugins, you can find more information in the Swift migration section of the Flutter wiki.
It's great to hear that there have been some great new resources published for iOS developers.
With the release of Xcode 14, bitcode is no longer a requirement for watchOS and tvOS applications and the App Store will not accept bitcode submissions from Xcode 14. To align with this change, bitcode support has been removed from Flutter.
Bitcode is not required for watchOS and tvOS applications starting with Xcode 14, and the App Store no longer accepts bitcode submissions from Xcode 14. As such, bitcode support has been removed from Flutter. By default, Flutter apps don't have bitcode enabled and disabling it in Xcode (ios/Runner.xcworkspace) or in the host Xcode project (for Add-to-app developers) is recommended if it was previously enabled.
This update enhances the visual effects in Flutter apps, allowing native iOS views to be blurred when displayed under a blurred Flutter widget. Additionally, UiKitView widgets can now be placed inside a BackdropFilter.
Various memory management improvements in Flutter will lead to a better overall performance and user experience for Flutter apps.
New APIs enable developers to manually deallocate native resources backing certain Dart:ui objects like Vertices, Paragraph and ImageShader, reducing jank caused by garbage collection pauses and improving memory management. This helps to reduce CPU utilisation due to allocation velocity and background GC threads, and reduces the overall memory footprint.
This improvement can result in smoother animations and reduced jank for end-users, leading to an improved overall user experience.
This change reduces the amount of memory pressure on the Dart heap and reduces the frequency of ill-timed GCs, which translates to less jank and a more stable memory footprint for Flutter apps.
This has resulted in a reduction of the 90th percentile frame build times by up to 20%. This improvement will lead to smoother animations with less jank for end-users.
In this release, the Flutter engine has improved its ability to dynamically update the Dart VM with information about the application state. The engine now uses the Dart VM's low-latency mode API during route transitions to avoid GC pauses, resulting in a smoother animation experience.
The engine also notifies the Dart VM when it is idle, avoiding GC-related jank, and informs the Dart VM when a Flutter view is no longer visible in add-to-app Flutter apps, reducing the memory footprint. These changes aim to eliminate ill-timed GC pauses in future releases.
Sunsetting macOS 10.11 through 10.13
Additionally, for developers using Xcode to build macOS apps, the minimum version of Xcode required has been increased to Xcode 12.1. With this change, developers will be able to take advantage of the latest features in the Xcode and macOS platforms, while also ensuring that the Flutter codebase remains maintainable.
This change has also streamlined the Flutter graphics stack and reduced the risk of bugs and security vulnerabilities in the long run. The removal of OpenGL is expected to have no significant impact on most users, as all platforms supported by Flutter include Metal support.
toImageSync
This means that Artificial Intelligence algorithms can now be used to generate images from Picture or Scene objects in an asynchronous manner, reducing the amount of time needed for image generation and improving performance. Furthermore, images generated using AI can be kept on the GPU for faster access in the event a GPU context is available.
The Flutter framework now uses the Picture.toImageSync and Scene.toImageSync methods to improve the performance of page transitions on Android, leading to nearly halving of frame rasterization times and reducing jank. This results in smoother animation, reaching up to 90/120fps on devices supporting those refresh rates.
Custom shader support improvements
This new update for custom fragment shaders allows developers to create complex graphics effects and animations in their apps, resulting in improved app graphics and a better user experience. The new shader compiler and hot reloading features make it easier for developers to iterate on their shaders during the development process. The support for custom shaders on both the Skia and Impeller backends on iOS provides more options for developers to optimise their graphics for the target platform.
The documentation for writing and using custom fragment shaders can be found on the official Flutter website, docs.flutter.dev. Additionally, there is a package of utilities for custom shaders called flutter_shaders, which can be found on pub.dev.
Font asset hot reload
This update makes the development cycle for adding and changing fonts much faster and more convenient, as changes can be seen immediately, without the need to rebuild the entire application.
Reduce animation jank on iOS devices
Open source contributions from luckysmg have improved the animation jank on iOS devices by introducing a dummy CADisplayLink on the main thread during gestures and setting the refresh rate of the CADisplayLink to match the refresh rate used by Flutter engine's animator during keyboard animations. These changes help ensure smoother animation responses, particularly on 120Hz iOS devices.
The Flutter community is always striving to make the platform better and more accessible, and we are proud to be a part of it. We really appreciate all the hard work, creativity, and passion that everyone contributes to make Flutter the success it is today.
If you would like to hear how the modern Flutter ecosystem can help your product please get in touch below.
