Flutter, what are Widgets, RenderObjects and Elements?

Ever wondered how Flutter takes those widgets and actually converts them to pixels on the screen?

Norbert
Flutter Community
Published in
5 min readJun 30, 2018

--

Ever wondered how Flutter takes those widgets and actually converts them to pixels on the screen? No?

You should!

Understanding how an underlying technology works makes the difference between a good developer and a great one.

You can create custom layouts and special effects more easily when you know what works and what doesn’t; and knowing this will save you a few long nights at the keyboard.

The goal of this post is to introduce you to the world beyond the surface of flutter. We will take a look at different aspects of flutter and understand how it actually works.

Let’s get started

You probably already know how to use the StatelessWidget & StatefulWidget. But those widgets only compose the other widgets. Laying out the widgets and rendering them happens elsewhere.

I highly recommend opening your favorite IDE and following along, seeing the structures in the actual code often creates those “aha” moments. In Intellij you can double tap shift and enter a class name to find it.

The Opacity

To get familiar with the basic concepts of how flutter works we will take a look at the Opacity widget and examine that. Because it’s a pretty basic widget, it makes a good example to follow along.

It only accepts one child. Therefore you can wrap any widget in an Opacity and change the way it’s displayed. Besides the child, there is only one parameter called opacity which is a value between 0.0 and 1.0. It controls the opacity (duh).

The Widget

The Opacity is a SingleChildRenderObjectWidget.

The hierarchy of extension class extensions goes like this:

Opacity → SingleChildRenderObjectWidget → RenderObjectWidget → Widget

In contrast, the StatelessWidget and StatefulWidget goes as follows:

--

--

Norbert
Flutter Community

Doing crazy things with Flutter