What's New in Flutter 3.24: GPU Enhancements, Multi-View Embedding, and More
Introduction
Hey there, Flutter enthusiasts! 🌟
Welcome to the latest Flutter update! In this exciting post, we’re diving into the latest and greatest from the Flutter team: Flutter 3.24! Get ready for some fantastic new features that will supercharge your app development experience.
Flutter 3.24 Highlights
GPU Enhancements: Experience advanced graphics and 3D scenes directly in Flutter with the new Flutter GPU. This low-level graphics API lets you create custom renderers using Dart code and GLSL shaders.
Multi-View Embedding for Web: Now, Flutter web applications can render content into multiple HTML elements simultaneously. This feature offers flexibility for integrating Flutter views into existing web applications.
Video Ad Monetization: Maximize revenue with the new Interactive Media Ads (IMA) plugin, which supports instream video ads for your mobile apps.
Framework Updates: Enjoy new slivers for dynamic app bar behaviors and improvements in the Cupertino library. The new TreeView and CarouselView widgets enhance scrolling and presentation in your apps.
DevTools and IDE Enhancements: Track widget builds with the new Rebuild Stats feature and enjoy a smoother development experience with updated DevTools and IDE support.
With over 852 framework commits and 615 engine commits, this release is packed with improvements and new features. So, grab your devices and upgrade to Flutter 3.24 to explore all these exciting updates!
Ready to dive deeper? Let's go deeper into detail about each feature.
Flutter GPU Enhancements
What’s the Buzz About Flutter GPU?
Flutter GPU is here to take your graphics game to the next level! 🎨 With this feature, you can create stunning visuals and complex 3D scenes directly within Flutter, eliminating the need for native platform code. This major update introduces advanced rendering capabilities, giving you the power to craft intricate and beautiful graphics with ease.
Why Should You Care?
Imagine the possibilities: from engaging games to eye-catching animations, Flutter GPU opens up a world of creative opportunities. It leverages hardware-accelerated graphics and smooth performance across all devices, ensuring that your apps not only look amazing but also run seamlessly. Whether you’re aiming to build a visually stunning 2D canvas, complex 3D scene graphs, or particle systems, Flutter GPU provides the tools you need to bring your vision to life.
Getting Started with Flutter GPU
Warning: Flutter GPU is a low-level API. Most Flutter developers will benefit more from higher-level rendering libraries like Flutter Scene.
Ready to dive in? Switch to the main channel and add the flutter_gpu package to your project. This will unlock the ability to define custom raster pipelines and submit draw calls directly to the GPU. The API is powerful yet low-level, making it suitable for those with some graphics development experience. To make things easier, check out the new flutter_scene package, which helps you build 3D apps and games by importing animated models and constructing 3D scenes.
To get the most out of Flutter GPU, you'll need to have Impeller enabled. This means that you can only use Flutter GPU on platforms supported by Impeller.
Currently, you can use it on:
iOS: Enabled by default, so you’re good to go!
macOS: Available in an opt-in preview for you to try out.
Android: Also in an opt-in preview, ready for exploration.
For a deep dive and detailed instructions, be sure to read the detailed Flutter GPU blog post. Start experimenting and see how Flutter GPU can transform your app development experience!
Multi-View Embedding
What’s This Multi-View Embedding All About?
Flutter web applications can now leverage multi-view embedding, which means you can render content into multiple HTML elements simultaneously. This feature, known as “embedded mode” or “multi-view,” offers fantastic flexibility for integrating Flutter views into your existing web applications. Imagine having the power to manage several independent views within a single app—sounds pretty cool, right?
The Perks for Developers
So, why does it change everything? In multi-view mode, your Flutter app doesn't kick off right away. It simply waits until the host application adds the first view using the addView method. From there, you can programmatically add or remove views as needed, and Flutter will adjust its widgets accordingly. Especially relevant for complicated apps needing multiple, individual perspectives. You can also track custom initialization data of the views, making the app much more fun and personalized.
How to Make It Happen
Setting up multiView is quite easy. All you need to do is turn on multi-view mode, simply set multiViewEnabled: true the initializeEngine method within the flutter_bootstrap.js file. Once that’s done, You are now able to control your views from your JavaScript: add them to target HTML elements and remove them if needed. In Flutter, every addition or removal will drive updates so that the content stays current and dynamic.
For a deep dive into implementing multi-view embedding in your Flutter web apps, check out the detailed documentation.
Video Ad Monetization
Flutter 3.24 introduces the Interactive Media Ads (IMA) plugin, expanding your ad options with instream video ads. This new plugin works alongside the existing Google Mobile Ads (GMA) plugin to support video ads in your app, whether they're shown before, during, or after video playback.
So, what does this mean for you? With the IMA plugin, you can now seamlessly integrate video ads into your app, showing them before (preroll), during (midroll), or after (postroll) video content. Plus, Some ads can even be skipped, offering users a smoother experience. With these additions, you can explore new ways to monetize your app and boost revenue.
Other Notable Features in Flutter 3.24
Flutter 3.24 is brimming with exciting new features that will enhance your app development. Here’s a quick tour of some of the coolest additions!
New Slivers for Dynamic App Bars
Flutter 3.24 introduces a set of new slivers that bring dynamic app bar behaviors to your fingertips.
You can now use these to create app bars that float, stay pinned, or resize as users scroll. These new slivers offer a simpler API compared to the existing SliverPersistentHeader and SliverAppBar, making it easier to achieve the effects you want. For example, the PinnedHeaderSliver can recreate effects similar to the iOS Settings app’s app bar. Plus, they come with sample code to help you get started quickly!
Updates in the Cupertino Library
The Cupertino library, which brings a touch of iOS style to Flutter apps, has received some nice updates. Haptic feedback on CupertinoActionSheet buttons is now improved, providing a more tactile experience as you slide your finger across them. The font size and weight of these buttons have been adjusted to match their native counterparts, enhancing the overall feel.
Additionally, new focus properties have been added to CupertinoButton, and you can now customize the color of a disabled CupertinoTextField. Stay tuned for even more updates as the Cupertino library continues to evolve!
TreeView and CarouselView Widgets
Flutter 3.24 welcomes two powerful new widgets: TreeView and CarouselView.
The TreeView widget, part of the two_dimensional_scrollables package, is perfect for building scrolling trees that expand in all directions. It’s accompanied by several new examples to help you get familiar with its capabilities. The TreeSliver has also been introduced for one-dimensional scrolling trees, and it matches the TreeView API, making it easy to switch between the two.
The CarouselView widget, adhering to Material Design principles, offers a scrollable list of items where the leading and trailing items dynamically change size as they scroll in and out of view. This “Uncontained” layout adds a sleek, interactive touch to your carousels.
Swift Package Manager: Streamlined Dependency Management
With Flutter 3.24, we’re excited to introduce early support for Swift Package Manager (SPM), making dependency management on iOS and macOS even smoother. Previously, Flutter relied on CocoaPods for this task, but now SPM is making waves with its own set of benefits.
Why should you care? Well, for starters, SPM opens the door to the expanding ecosystem of Swift packages. This means Flutter plugins can now tap into a broader range of libraries and tools built for Swift, enhancing what you can do with your apps.
Another big win is the simplified setup. Swift Package Manager comes bundled with Xcode, which means that shortly, you’ll bypass the need for Ruby and CocoaPods to get Flutter up and running on Apple’s platforms.
If you're a plugin author, we encourage you to give SPM a try and share your thoughts. Your feedback will help us refine this new feature and make it even better. Feel free to report any issues or suggestions—you’re helping shape the future of Flutter!
Shared Preferences: Enhanced Data Handling
Flutter 3.24 brings exciting changes to the shared_preferences plugin! We’re introducing two new APIs: SharedPreferencesAsync and SharedPreferencesWithCache. These updates are designed to enhance how you manage preferences in your apps.
Firstly, SharedPreferencesAsync allows you to fetch the most up-to-date preferences directly from the platform, but it's asynchronous, so it might be a tad slower. This is perfect for when preferences could be updated by other systems or isolates, ensuring you always get the latest data.
On top of that, we have SharedPreferencesWithCache. This new API builds on SharedPreferencesAsync by offering access to a locally cached version of your preferences synchronously. It’s similar to the old API but now supports multiple instances with different parameters, giving you more flexibility.
While these updates are designed to eventually replace the existing SharedPreferences API, we understand that change takes time. Given how widely used this plugin is, we’re giving everyone the space to transition smoothly. Dive in and start experimenting with these new APIs to see how they can streamline your preferences management!
DevTools: Enhanced Insights and IDE Integration
Flutter 3.24 brings some cool upgrades to DevTools that make debugging easier and more intuitive. One standout feature is the new Rebuild Stats tool in the Performance tab. Ever wondered if your app is building more Widgets than needed? This feature tracks how many times each widget is built, helping you fine-tune performance.
We've also polished the Network profiler and Flutter Deep Links tool, fixing bugs and making your experience smoother. Plus, DevTools now works better directly within your IDE, whether you’re using VS Code or Android Studio. In VS Code, the Flutter Sidebar has been improved for quicker access to your tools.
DevTools screens open inside a VS Code window
DevTools screens open inside Android Studio tool windows.
Another exciting update is for DevTools Extensions. You can now use these extensions while debugging tests or just writing code. If you’ve wanted to build or use a specific tool, now’s the time!
Conclusion
Flutter 3.24 brings exciting new features and enhancements that make development even more powerful and flexible. The improved GPU support, multi-view embedding, and updated video ad monetization are just a few highlights that will help you create more dynamic and engaging applications.
We’re incredibly grateful for the support and enthusiasm from our amazing community. Your contributions and feedback drive Flutter forward, and this release is a testament to that collective effort.
For a detailed look at all the new features and updates in Flutter 3.24, be sure to check out the release notes and change log. Flutter 3.24, along with Dart 3.5, is available now on the stable channel. Simply run flutter upgrade to get started. We’re excited to see what you’ll create next!
