Screen Fundamentals and Flutter UI System Architecture

Before introducing Flutter's UI system, it is useful to understand how screens display graphics, which helps grasp the design of the UI system.

1.1 Basic Unit – Pixel

All visual content is rendered using physical display units called pixels; each pixel can emit multiple colors, and the combination of colors across pixels forms the complete image.

Common pixel arrangements include:

RGB layout: three sub‑pixels (red, green, blue) tightly packed, typical for LCD screens.

Delta layout: each pixel shares sub‑pixels with neighbors, reducing effective density to about 70% of standard RGB.

Pentile layout: reduces the number of sub‑pixels per row by one‑third.

BOE (京东方) layout: a variant of Delta that splits a green pixel into two sub‑pixels, colloquially called the "Zhou Dongyu" layout.

These alternative layouts were created mainly for OLED panels, whose organic emitters degrade over time; the layouts help extend OLED lifespan.

1.2 Screen Resolution

A pixel can display 16.7 million colors (24‑bit RGB). The size of a pixel depends on the screen's resolution: higher resolution means smaller pixels for the same physical area.

1.3 DPI (PPI)

DPI, also known as PPI, is calculated by dividing the number of horizontal or vertical pixels by the screen size in inches; higher DPI yields smaller pixels and clearer, more detailed images.

1.4 Display Principle

Screens refresh at a fixed frequency (e.g., 60 Hz). After a frame is rendered, the display sends a vertical‑sync (VSync) signal to synchronize CPU, GPU, and the monitor. The CPU submits drawing commands to the GPU, the GPU renders into a frame buffer, and the video controller reads the buffer and updates the screen.

If the CPU or GPU fails to submit a frame before the next VSync, the frame is dropped, causing UI stutter. The CPU handles general computation, while the GPU performs graphics‑heavy tasks such as matrix transformations and geometry processing.

1.5 UI System

Direct hardware manipulation is abstracted by the operating system, which provides APIs for applications. UI frameworks encapsulate these native APIs, offering higher‑level widgets and layout rules. For example, Android SDK wraps Android OS APIs, and iOS UIKit does the same for iOS.

Flutter follows this pattern: it offers a Dart API, and under the hood uses the Skia graphics library (which calls OS APIs) to achieve cross‑platform rendering.

2.1 Flutter Framework Design

Flutter is divided into three layers:

Embedder (OS adaptation layer) : handles surface creation, threading, and platform plugins.

Engine (rendering engine and Dart VM) : includes Skia, Dart runtime, and text layout.

Framework (UI SDK) : a Dart‑based UI toolkit providing widgets, animations, gestures, and Material/Cupertino component libraries.

2.2 Embedder

The Embedder adapts Flutter to the host operating system, configuring rendering surfaces, threads, and platform‑specific plugins, which keeps cross‑platform consistency low‑cost.

2.3 Engine

The Engine combines Skia, Dart, and text layout to render graphics, handle events, and run Dart code. It translates high‑level UI descriptions into GPU‑ready data.

2.4 Framework

The Framework is a Dart‑implemented UI SDK that offers animation, drawing, and gesture APIs, and wraps the underlying Engine to provide ready‑made Material and Cupertino widget libraries.

2.5 Rendering Process

Flutter synchronizes UI thread and GPU via VSync. The UI thread builds an abstract view tree in Dart, which is handed to Skia. Skia generates GPU commands (via OpenGL or Vulkan), and the GPU composes the final image.

3.1 Page Structure

Flutter pages are organized as a tree of widgets, but the actual rendering is performed by the rendering layer, which maintains an Element tree and a RenderObject tree.

3.2 The Three Trees

Widgets describe configuration, Elements represent instantiated widgets, and RenderObjects perform layout and painting. The flow is: Widget → Element → RenderObject.

3.3 Summary

Flutter creates a render object tree from the widget tree, computes layout and painting via RenderObjects, merges layers, and passes the final geometry to Skia, which produces a 2‑D image that the GPU renders on screen.

References

Flutter architectural overview: https://flutter.cn/docs/resources/architectural-overview

Flutter practical guide: https://book.flutterchina.club/

Screen pixel and resolution explanations: https://www.dazhuanlan.com/

Screen display principles: https://www.jianshu.com/p/7b79751582dd