How Flutter Delivers Smooth 60fps+ UIs and Handles High-FPS Video

Understanding how Flutter consistently achieves high frame rates (e.g., 60fps, 90fps, or 120fps) and maintains smooth performance is key to appreciating its architecture. This performance is achieved through precise timing, sophisticated engineering, and direct GPU control. This article provides a technical overview of the process.

Diagram of how Flutter Renders 60fps Smooth video

It All Starts With VSync: The Synchronization Signal of Your Display

A device’s display refreshes at a fixed rate, commonly 60Hz, 90Hz, or 120Hz. Before each refresh cycle, the device issues a VSync (Vertical Synchronization) signal. This signal indicates that the hardware is ready to present a new frame. Flutter listens for this signal and aims to deliver a new frame precisely when required — for a 120Hz display, this means a new frame every 8.33ms.

The Flutter Engine: Interfacing With the Operating System

Flutter’s engine, implemented in C++, interfaces directly with the device’s display subsystem to synchronize its rendering loop:

• On Android, it utilizes Choreographer.
• On iOS, it employs CADisplayLink.

These platform-specific mechanisms allow Flutter to be notified at the exact moment VSync occurs, enabling precise alignment of its frame rendering workload.

The Dual-Threaded Rendering Pipeline

When it is time to render a new frame, Flutter divides the workload between two primary threads:

1. UI Thread (Dart)

• Animations progress based on their current state.
• Widget trees are built or updated in response to state changes.
• The framework’s layout algorithms (e.g., based on constraints passed down the widget tree) determine the final size and position of each render object.
• A platform-agnostic description of the scene, typically a layer tree, is generated, and drawing commands are recorded but not yet executed or rendered.

This entire process on the UI thread must complete rapidly — ideally within approximately 3ms for high refresh rate displays — to leave sufficient time for rasterization.

2. Raster Thread (C++/Skia/Impeller)

• The layer tree (or scene description) generated by the UI thread is then passed to the raster thread.
• Skia (or its successor, Impeller) acts as the graphics rendering engine, translating Flutter’s platform-agnostic drawing commands into specific instructions for the underlying graphics APIs (Metal on iOS, OpenGL ES/Vulkan on Android).
• The GPU executes these commands, rendering the frame into an off-screen buffer.

To achieve smooth animations, the combined workload of both threads must remain under the VSync interval (e.g., under 8.33ms for 120Hz displays).

Buffer Swap: Presenting the Frame

Upon the next VSync signal, the newly rendered frame from the off-screen buffer is swapped with the frame currently on screen. The result is fluid, tear-free animation, and the entire rendering cycle restarts for the next frame.

Cross-Platform UI Consistency

Flutter does not use native OEM UI widgets from Android or iOS. Instead, it utilizes its own rendering pipeline, leveraging Skia/Impeller to instruct the GPU on exactly what to draw, pixel by pixel, according to its Material or Cupertino design libraries. This approach ensures UI and behavioral consistency across different platforms.

Sequence Diagram of how flutter renders under the hood

High-FPS Video Playback in Flutter

Rendering video at high frame rates, such as 120fps, presents a different set of challenges. Flutter does not decode and render every video frame natively within its UI rendering pipeline, as this approach would be inefficient. Instead, Flutter delegates video playback to the underlying native operating system layer:

• On Android: ExoPlayer
• On iOS: AVPlayer

These native players utilize hardware acceleration for efficient video decoding and rendering onto a native surface. Flutter then integrates this native surface into its UI using one of two primary methods:

• Platform Views: A region is “cut out” of the Flutter UI, allowing the OS to composite the native video surface directly. While effective, this can involve additional compositing overhead.
• Texture Widget: Video frames are rendered by the native player into a shared graphics texture. Flutter can then manage and composite this texture within its scene graph like any other graphical element.

This delegation ensures that video playback remains smooth and power-efficient, while Flutter continues to render the surrounding UI components (buttons, overlays, custom UIs) at its own refresh rate.

System Architecture of Flutter Video Rendering

Conclusion

Flutter’s high performance stems from its direct, low-level control over UI rendering, synchronized with the display’s VSync, and its strategic use of native system capabilities for demanding tasks such as video playback. As long as the Dart UI workload and rasterization tasks are completed within the strict time budget dictated by the display’s refresh rate, applications can achieve exceptionally smooth performance across a wide range of devices.

Further questions or requests for more detailed explanations of specific steps are welcome in the comments section.