Problem Statement
Describe the Flutter rendering pipeline from widget to pixels on screen.
Explanation
The rendering pipeline starts when state changes trigger a widget rebuild. Flutter marks the affected widgets as dirty and schedules a frame. During the build phase, Flutter calls the build methods of dirty widgets, creating a new widget tree or updating parts of it. The framework then reconciles this with the existing element tree, reusing elements where possible and creating new ones only when necessary.
Next comes the layout phase where RenderObjects calculate their sizes and positions based on constraints passed down from parents. Each RenderObject receives constraints, computes its size, and positions its children. Constraints go down the tree (parents tell children their size limits), and sizes go up (children tell parents their chosen sizes). This constraint-based layout system is efficient and flexible.
Finally, the paint phase draws the actual pixels using the Skia graphics engine. RenderObjects paint themselves to a canvas in tree order, with composition layers created for effects like opacity or transforms. The painted layers are then composited together and sent to the GPU for display. Flutter targets 60fps (or 120fps on capable devices), completing this entire pipeline in under 16ms per frame.
Flutter optimizes this pipeline by reusing RenderObjects, using dirty flags to avoid unnecessary work, and leveraging the GPU for compositing. Understanding this pipeline helps you write performant Flutter apps by minimizing rebuilds, avoiding expensive operations in build methods, and using const constructors where possible.
