Building Custom Render Objects Lenz Paul Software Engineer @CMiC, GDG Organizer linkedin.com/in/lenztpaul

Agenda 1 2 3 4 5 6 Introduction The Rendering Pipeline Custom Render Object Implementation Example Demo Conclusion and Q&A

Flutter's Rendering Pipeline

Flutter's Rendering Pipeline

Three Trees

- Blueprint of the UI, containing a hierarchical arrangement of widgets. - Widgets describe the structure and design of the UI, but are immutable Three Trees Widget Tree Element Tree RenderObject Tree - Live, mutable representation of the widget instances - Handles the lifecycle and state of widgets - Maintains the link between the widget and its corresponding render objec - Responsible for the layout and painting of the UI on the screen - Render objects define the size, position, and rendering of each widget - Render objects handle hit testing to detect user interactions and gestures.

Three Trees The Widget, Element, and Render Trees

What are RenderObjects?

What are RenderObjects? The core building block of Flutter's rendering layer that represents a node in the render tree. They handle layout, painting, and hit testing.

RenderBox A common type used for 2D box-based layout models. e.g.: RenderParagraph, RenderImage, RenderFlex. RenderSliver Used for scrolling container models. e.g.: RenderSliverList, RenderSliverGrid. Common Types of Render Objects

Why use Custom Render Objects ● Advanced Layout Control ○ Implement complex layouts beyond standard widgets ○ Enable multi-pass layouts for interdependent positioning ○ e.g.: Custom grid system with variable-sized cells ● Unique Visual Effects ○ Create custom painting behaviors ○ Implement special effects not possible with standard widgets ○ e.g.: Text highlighter with custom glow effect, particle systems ● Enhanced Interactivity ○ Build UI components with custom hit testing and gesture recognition ○ Enable precise control over user interactions ○ e.g: Interactive charts with custom tooltips and touch handling ● Performance Optimizations ● Fine-grained Lifecycle Management ○ Control widget lifecycle events at a lower level ○ Optimize updates and redraws source: pub.dev/packages/fl_chart

v How Column Widget Uses RenderObject Column widget uses its custom render object (RenderFlex) to size and align its children according to the mainAxisAlignment parameter in a single pass

How Column Widget Uses RenderObject 1. The Column widget creates its RenderFlex object. 2. The layout process begins when the RenderFlex's layout method is called with constraints. 3. RenderFlex lays out its children by calling their layout methods with appropriate constraints. 4. The children return their sizes to the RenderFlex. 5. RenderFlex calculates the total size of all children and the remaining space. 6. Based on the mainAxisAlignment parameter, RenderFlex positions the children accordingly. The diagram shows different branches for various alignment options. 7. RenderFlex sets the final offsets for all children. 8. Finally, RenderFlex returns its size to the Column widget.

Implementation Example

Basic Components of a Custom Render Object ● Extend RenderBox (for most cases) ● Key methods to implement: ○ performLayout() ○ paint() ○ hitTest() (if necessary)

Custom Render Object

Custom Widget

DEMO

● Custom Render Objects provide advanced control over layout, painting, and hit testing. ● They enable the creation of unique and complex UI components that are not possible with standard widgets. ● Performance optimization and precise user interaction handling are significant benefits. Key Takeaways

Thank You!