Flutter Render Object ( part 1 )

Everything is a widget in Flutter

flutter is rich of widgets and it comes with a lot of Built-in widgets from simple Text to complex Layout.

Everything you see on the screen is widget

but the question is , what is happening behind the scene so widget get painted on the screen?

when you use any Widget this widget call another tree called element tree , element tree by turn call another and last tree called render tree.

flutter has three trees:

I. Widget Tree (classes you are using directly)

II. Element Tree (Link Widget to its RenderObject)

III. Render Tree (rendering widget in the screen)

so every widget you created with create all this tree behind the scene.

Everything is Widget in flutter .

but also

Everything is RenderObject in flutter .

What are RenderObjects?

RenderObjects are those particular “Objects” responsible for controlling the sizes, layouts, and logic used for painting widgets to the screen and forming the UI for the application. You can say that the actual rendering happens in RenderObjects.

usually developers do not need to make use of them. Widgets handle most of developers’ needs sufficiently.

so if you want to do your own rendering , you have to deal with RenderObjects

analyze the widget that you want to build if it has child , children or no child.

because the type of RenderObect depend on this .in fact there are Three types of RenderObjects:

1. LeafRenderObjectWidget : if your widget has zero number of child
2. SingleChildRenderObjectWidget: if widget has one child
3. MultiChildRenderObjectWidget : if widget has one or more children.

lets just stop here . this part is all about basics of rendering . in the next one we will delve into actual implementation of RenderObect

thanks for reading:)

References:

Understanding RenderObjects in Flutter - LogRocket Blog