The Many Trees

Before creating your own RenderObject, we should understand the relationship between the Widget, Element, and Render trees.

You are probably familiar with how State works, it's a persistent instance with methods you can override to know when to initialize, build, and dispose.

State is actually just a fancy delegate for ComponentElement to hide it's ugly internals, other than that Element and State are essentially the same thing!

Elements implement BuildContext, which also exists to hide ugly internals.

The Element tree is formed by recursively calling Widget.createElement, Flutter does the dirty work of reactively mounting, building, reparenting, and unmounting them for you.

When RenderObjectElements are mounted they call RenderObjectWidget.createRenderObject to create a RenderObject.

For example, ColoredBox is a SingleChildRenderObjectWidget that creates a SingleChildRenderObjectElement, and Row is a MultiChildRenderObjectWidget that creates a MultiChildRenderObjectElement.

Note

There is technically no such thing as a "widget tree", widgets are more like user-defined data structures that do not share a root node. People are usually referring to the element tree, since elements form a global tree and provide context.