Apptimus Blog arrow

Flutter's rendering engines: skia vs impeller in 2024

 

Introduction

In the fast-paced world of mobile app development, performance is king. Flutter, Google's UI toolkit for building natively compiled applications, has been making waves with its promise of beautiful, fast, and portable apps. At the heart of Flutter's performance lies its rendering engine – the powerhouse responsible for turning your code into smooth, responsive user interfaces.
 
For years, Skia has been the backbone of Flutter's rendering capabilities. But now, there's a new player in town: Impeller. As we dive into 2024, the Flutter landscape is evolving, and with it, the choices developers have for rendering their apps. Let's explore these two engines, their strengths, and what they mean for the future of Flutter development

 

Understanding Rendering Engines

Before we compare Skia and Impeller, let's clarify what a rendering engine does. In Flutter, the rendering engine is responsible for taking the widget tree (your UI structure) and turning it into pixels on the screen. It handles tasks like:
 
  • Drawing shapes and text
  • Applying effects and animations
  • Managing textures and images
  • Optimizing rendering performance
The choice of rendering engine can significantly impact your app's performance, affecting everything from startup time to the smoothness of animations.

 

The Flutter Rendering Pipeline

Flutter's rendering pipeline consists of several stages:

  • Build: Constructs the widget tree
  • Layout: Determines the size and position of widgets
  • Paint: Creates a list of paint commands
  • Compositing: Combines layers of the scene
  • Rasterization: Converts vector graphics into pixels

The rendering engine primarily handles the last two stages: compositing and rasterization.

 

Key Responsibilities of the Rendering Engine
  • Efficient execution of drawing commands
  • Management of textures and images
  • Handling of animations and transitions
  • Optimization of rendering performance
  • Interaction with platform-specific graphics APIs (e.g., Metal on iOS, Vulkan on Android)

 

Skia: The Veteran Engine( successful track record across multiple major projects and its continual adaptation to modern requirements make it a "veteran" rendering engine.)

 
Skia has been Flutter's trusted rendering engine since the framework's inception. Developed by Google, Skia is an open-source 2D graphics library that powers not just Flutter, but also Google Chrome and Android.
 
 Key Features of Skia:
  • Cross-platform compatibility: Works across iOS, Android, web, and desktop
  • Mature and well-tested codebase : Well-tested and optimized over years of development
  • Supports a wide range of graphical operations :Supports a wide range of 2D drawing capabilities
  • Used across multiple Google products :Can work with OpenGL, Vulkan, Metal, and Direct 3D
 
Skia uses an immediate mode rendering approach, which means it processes drawing commands as they come in. This approach has served Flutter well across various platforms, providing a consistent experience on iOS, Android, web, and desktop.

 

Impeller: The New Contender

Impeller is Flutter's next-generation rendering engine, designed to address some of the performance challenges faced by Skia, particularly on iOS devices. Introduced as part of Flutter's ongoing evolution, Impeller aims to provide better performance and smoother animations.

 

 Key Features of Impeller:
  • Pre-compiled shaders: Reduces runtime jank by compiling shaders ahead of time
  • Efficient memory management: Better handling of GPU resources
  • Platform-specific optimizations: Designed to work closely with Metal on iOS
  • Improved concurrency: Better utilization of multi-core processors
 
Impeller was built with a focus on iOS performance, aiming to leverage Apple's Metal API more effectively than Skia. However, the Flutter team is working on expanding Impeller's reach to other platforms.

 

Comparison: Skia vs Impeller

Let's break down how these engines stack up against each other:
1. Performance:
   - Skia: Well-optimized, but can suffer from jank on iOS
   - Impeller: Designed for better performance, especially on iOS
 
2. Platform support:
   - Skia: Supports all platforms (Android, iOS, web, desktop)
   - Impeller: Currently focused on iOS and Android
 
3. Maturity:
   - Skia: Mature and battle-tested
   - Impeller: Newer, still evolving
 
4. Shader compilation:
   - Skia: Runtime shader compilation can cause jank
   - Impeller: Precompiled shaders reduce runtime jank
 
5. API utilization:
   - Skia: Uses OpenGL ES or Vulkan
   - Impeller: Uses Metal on iOS, Vulkan on Android
 
Flutter 3.24: A Turning Point
The release of Flutter 3.24 in February 2024 marked a significant milestone in the Skia vs Impeller story. With this version, Impeller became the default rendering engine for iOS. This change reflects the Flutter team's confidence in Impeller's performance and stability on Apple devices.

 

How to Check Your Rendering Engine

Curious about which engine your Flutter app is using? Here's a simple widget you can add to your app to check:
 
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
 
class RenderEngineChecker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text(
      'Rendering Engine: ${_getRenderingEngine()}',
      style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
    );
  }
 
  String _getRenderingEngine() {
    final renderView = RendererBinding.instance.renderView;
    final backend = renderView.runtimeType.toString();
    return backend.contains('Impeller') ? 'Impeller' : 'Skia';
  }
}
 
 
Simply add this widget to your app's widget tree, and it will display which rendering engine is currently in use.

 

How to Enable/disable

# iOS Configuration (in ios/Runner/Info.plist)
<key>FLTEnableImpeller</key>
<true/> <!-- Set to false to disable Impeller and use Skia -->
 
# Android Configuration (in android/app/src/main/AndroidManifest.xml)
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
    <application>
        <meta-data
            android:name="io.flutter.embedding.android.EnableImpeller"
            android:value="true"/> <!-- Set to false to disable Impeller -->
    </application>
</manifest>
 
# Command-line flags for desktop and web (add to your run command)
flutter run --enable-impeller  # Enable Impeller
flutter run --no-enable-impeller  # Disable Impeller (use Skia)

 

When to Use Which Engine

As of 2024, the choice between Skia and Impeller largely depends on your target platform and specific app requirements:
 
  • For iOS-focused apps: Impeller is now the recommended choice, offering better performance and smoother animations.
  • For cross-platform apps: Skia remains the go-to engine for ensuring consistency across all platforms.
  • For Android apps: While Skia is still the default, you can experiment with Impeller (in beta) to test its performance benefits.
 
 

The Future of Rendering in Flutter

The Flutter team is heavily invested in Impeller's development. We can expect to see:
 
  1. Continued performance improvements for Impeller on iOS
  2. Expanded support for Impeller on Android
  3. Potential future support for Impeller on web and desktop platforms
 
As the Flutter ecosystem evolves, it's likely that Impeller will play an increasingly important role across all platforms.

 

Flutter Rendering Evolution Across Versions

 Flutter 1.0 - 2.x (2018-2021)
  • Rendering Engine: Skia
  • Characteristics:
  • Used OpenGL ES for rendering on mobile platforms
  • Provided good performance but had some limitations, especially on iOS
  • Suffered from occasional jank due to shader compilation during runtime
 
 Flutter 3.0 (May 2022)
  • Rendering Engine: Still primarily Skia
  • Improvements:
  • Enhanced render tree caching for faster UI rebuilds
  • Introduced more efficient memory management for UI elements
  • Optimized layer tree building process
 
Flutter 3.7 (January 2023)
  • Major Rendering Update: Introduction of Impeller
  • Characteristics:
  • Impeller introduced in preview for iOS
  • Aimed to address performance issues, especially on iOS devices
  • Skia remained the default for Android and other platforms
 
Flutter 3.10 (May 2023)
  • Rendering Engines: Skia and Impeller
  • Developments:
  • Impeller moved to beta status for iOS
  • Continued performance improvements for Skia on other platforms
  • Enhanced shader warm-up techniques to reduce initial rendering jank
 
 Flutter 3.13 (August 2023)
  • Significant Rendering Milestone
  • Key Changes:
  • Impeller became the default rendering engine for iOS (stable release)
  • Skia remained the primary engine for Android, web, and desktop
  • Introduced optimizations for both Impeller and Skia
 
 Flutter 3.16 (November 2023)
  • Expanded Impeller Support
  • Developments:
  • Introduced Impeller in preview for Android
  • Continued refinements to Impeller on iOS
  • Further optimizations for Skia on web and desktop platforms say until 3.24

 

Conclusion

The introduction of Impeller marks an exciting chapter in Flutter's journey. While Skia has served the community well and continues to be crucial for cross-platform consistency, Impeller represents Flutter's commitment to pushing the boundaries of mobile app performance.
 
As a Flutter developer in 2024, you're in a unique position to leverage the strengths of both engines. For iOS-centric projects, embracing Impeller can lead to significant performance gains. For cross-platform endeavors, Skia's maturity and wide support remain invaluable.
 
The key is to stay informed, experiment with both engines, and choose the one that best fits your project's needs. As Flutter continues to evolve, so too will the capabilities of its rendering engines, promising an even brighter future for mobile app development.
 
Remember to keep an eye on Flutter's official channels for the latest updates on Impeller's development and expansion to other platforms. Happy coding!
 
 

author
Sangeetha

Software Engineer, Apptimus