Flutter’s rendering pipeline
The Flutter’s rendering pipeline is a multi stage process which converts the widgets written in the code into a final rendered frame on the screen. We have created a simple diagram for you to understand –
User Input
User input is the first step in the rendering pipeline for Flutter. This happens whenever user takes any action like a tap or gesture action on the screen.
Widget Tree Generation
Once the user takes action, it triggers the process of generating a tree of widgets. This creates hierarchical structure for all the user interface elements (widgets).
Layout
This step involves taking the widget tree and calculate the size and position of each widget based on various constraints such as parent widget’s size and any other layout rules.
Painting
Painting involves generating a series of visual elements to be displayed on the screen based on layout parameters. These elements can be things like text, shapes, images, etc.
Composting
Composting combines the visual elements generating by painting into layers.
Display List
These layers are then. merged into a display list. The display list contains a complete representation of what should be displayed on the screen.
GPU Rasterization
The display list is then rasterized into the GPU which convert it into a set of pixels which can be displayed on the screen. Since GPU is used in this process, Flutter can take advantage of the graphic hardware in order to produce smooth and high quality images with minimal impact on performance.
Final UI Frame
The images produced by the GPU is rendered as a frame on the device. This is the UI that the user sees on their device.
You can watch the following video to understand the process in-dept. You can also read about it in details on flutter docs.
This is the entire process of Flutter’s rendering pipeline simplified for easier understand. You can read our other posts on Flutter advance topics.
