Tech
Introducing Flutter 3.10: A Game-Changer in App Performance, Graphics, and Security
Gareth Reese
May 15, 2023
The Flutter team has once again outdone themselves with the release of Flutter 3.10, delivering tons of improvements and new features that will undoubtedly revolutionise the app development landscape. From enhanced app performance to updated graphics capabilities and strengthened security measures, this update is set to elevate app performance and developer experience.
Here at Foresight Mobile we’re really excited about this release for our Flutter development projects. In this blog post, we'll dive into the key highlights of Flutter 3.10 and explore the impact it will have on app performance, developer experience and usability.
The new Impeller engine in Flutter 3.10 offers significant performance benefits by precompiling shaders at build time, eliminating early-onset jank and ensuring more predictable performance. By doing so, it allows for smoother and more consistent app experiences, particularly in terms of rendering.
Impeller also leverages modern graphics APIs and concurrency, further optimising overall app performance and paving the way for the Flutter team to deliver more updates in the future.
All of this means that Foresight Mobile’s iOS apps going forward will have smoother graphics and instant feedback to user interactions.
Flutter 3.10 continues to eliminate jank (or for us in the UK ‘glitchy’ or unpredictable behaviour) by moving the image decoding process from the Dart thread to background threads. There are also several other improvements in image processing including a new APNG decoder and improvements to the loading API.
This change reduces the load time for multiple simultaneous images and prevents potential long pauses on screens with numerous local images. Furthermore, the update includes optimisations to the renderer, such as the R-Tree based culling mechanism which accelerates the processing of drawing operations and contributes to a more responsive user interface.
Flutter 3.10 brings significant improvements to startup performance and stability on Android. By fixing an inefficient strategy for identifier lookups in app bundles, the update reduces startup latency by 100ms, or about 30-50%, in large production applications.
It also addresses stability issues by disabling the partial repaint feature on Android, which was found to have limited benefits and support across devices and versions. These enhancements contribute to a smoother and more reliable experience for Android users.
Flutter 3.10 enhances performance for web apps in multiple ways, including improved load times, reduced file size, element embedding, and shader support. The update reduces the file size of icon fonts by pruning unused glyphs, leading to faster load times for web apps.
It also optimises the CanvasKit size for all browsers, with Chromium-based browsers benefiting from a smaller custom CanvasKit "flavour" served from Google's CDN. Element embedding allows Flutter web apps to be served from a specific element in a page instead of only filling the entire page body or being displayed within an iframe tag.
Lastly, the addition of shader support enables web apps to utilise Flutter's fragment shader capabilities, further enriching the graphics performance in web applications. For more information on the Web renderers available and their options please check out the web render documentation here.
Here at Foresight Mobile we often develop our Flutter apps to support the Web platform, and it’s one of the main benefits of Flutter over competition like React Native.
Flutter 3.10 introduces preliminary support for the CameraX Jetpack library, which will greatly improve stability compared to the previously used and outdated Camera API. CameraX simplifies the implementation of camera features across a wide range of Android camera hardware, ensuring a more consistent and reliable experience for users.
By incorporating CameraX support, Flutter developers can rely on a simpler API than the now dated Camera API, ultimately resulting in a notable enhancement in camera-related stability Flutter apps. You’ll need to opt-in to CameraX support by updating your camera package versions in your pubspec.yaml. Here at Foresight Mobile we've had several issues with the old deperecated Camera API and are very much welcoming this move from the Flutter team.
Flutter 3.10 enhances user experience by defaulting to Material 3 components, which align with the latest Material Design specifications, providing modern and visually appealing interfaces. All Material 3 components now configure their default colours through the ColorScheme theme property, allowing for a consistent and customizable appearance across the app.
Several new components and updates have been introduced in Material 3, including some of those below. If you'd like to see the Flutter Material 3 components yourself you can play around with the demo here.
Apart from colour and shape updates, the Material 3 BottomSheet now includes an optional drag handle when the `showDragHandle` property is set to true.
The Material 3 TimePicker has updated colours, layout, and shapes for both the regular and compact versions of the widget.
Similar to TimePicker, the Material 3 DatePicker has updated colours, layout, and shape for both the calendar and textfield versions of the widget, along with a new DatePickerTheme.
This Material 3 version of the BottomNavigationBar widget features updated colours, highlighting, and elevation, with customizable appearance using the NavigationBarTheme widget.
Material 3 introduces the ability to create a second tier of tabbed content using the TabBar.secondary property, distinguishing it from the primary TabBar.
These updates and additions contribute to a more engaging, visually appealing, and consistent user experience across Flutter apps.
Considering Flutter 3.10 is a minor update it contains some great improvements that we can put to immediate use in our current and upcoming cross-platform app development projects.
If you would like a chat to see how Foresight can help for your existing Flutter app, or you’re considering a new project please get in touch using the button below.
