Impeller: The Next-Generation Renderer for Flutter 💙

Revolutionizing App Performance with Precompiled Shaders

Since the release of Flutter 3.7.0, there has been significant buzz surrounding Impeller, which was one of the major announcements at Flutter Forward.

However, many people may not be fully aware of what Impeller is, its purpose, how it can improve application development, how to enable and use it, and more.

In this article, let’s dive into a comprehensive understanding of Impeller.

Flutter previously utilized, and continues to utilize, the Skia render engine, which is similar to the one used in Chrome. It is an open-source 2D graphics library that offers a consistent API across various hardware and software platforms. It serves as the graphics engine for a multitude of products, including Google Chrome and ChromeOS, Android, Flutter, Mozilla Firefox and Firefox OS, and others.

However, it contributes to the Flutter’s early-onset jank and because of this reason there was a need to introduce Impeller.

Impeller is a new and advanced rendering runtime for Flutter that aims to tackle the issue of Flutter’s early-onset jank. It does this by precompiling a reduced and optimized set of shaders at the Engine build stage, rather than during the execution of an app. This leads to a more seamless and smooth user experience.

The overarching goals of Impeller are as follows:

1. Reliable Performance: Shader compilation and reflection are completed offline at the build stage, and all pipeline state objects are established in advance. The engine has control over explicit caching.
2. Measurable: All graphics resources, including textures, buffers, pipeline state objects, etc., are clearly labeled and tagged. Animations can be recorded and saved to disk without impacting real-time rendering performance.
3. Versatile: Not limited to a specific client rendering API. Shaders are written once and adapted to the appropriate backend format as needed.
4. Utilizes Modern Graphics APIs Efficiently: Makes substantial use of features provided by modern APIs such as Metal and Vulkan.
5. Optimizes Concurrent Operations: Capable of distributing single-frame tasks across multiple threads if necessary.

Impeller side-by-side demo

The Flutter Team created a demo to showcase the capabilities of Impeller. The Kaleidoscope app highlights Impeller’s efficiency. Observing closely, you can see that the left app uses the current default renderer. As you scroll down the page, the performance decreases with a frame rate of 7–10 fps. However, on the right side, the same app runs on Impeller and provides a smooth 60 fps with no hiccups.

Impeller can be enabled today in preview for iOS, and is in development for Android and other platforms.

Try it out with the following command:

flutter run --enable-impeller

The Flutter Team is also working on adding 3D support to Impeller in the future. For this we will be able to import a GLB file as a scene node and Flutter framework, using Impeller, will render the 3D object.

Watch the Impeller Scene 3D Demo here.

I hope after reading this article, you all will now enable Impeller for iOS to provide efficient and satisfying user experience.

NOTE: Impeller is still under development, you can’t use it for production applications.

Hope you enjoyed this article!

Doubts? Feel free to drop a message to me.