Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Building Custom Render Objects - Lenz Paul

GDG Montreal
July 15, 2024
24

Building Custom Render Objects - Lenz Paul

GDG Montreal

July 15, 2024
Tweet

Transcript

  1. Agenda 1 2 3 4 5 6 Introduction The Rendering

    Pipeline Custom Render Object Implementation Example Demo Conclusion and Q&A
  2. - 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.
  3. 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.
  4. 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
  5. 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
  6. 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
  7. 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.
  8. Basic Components of a Custom Render Object • Extend RenderBox

    (for most cases) • Key methods to implement: ◦ performLayout() ◦ paint() ◦ hitTest() (if necessary)
  9. • 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