Ever wondered how Flutter takes those widgets and actually converts them to pixels on the screen? No?
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.
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).
Opacity is a
The hierarchy of extension class extensions goes like this:
Opacity → SingleChildRenderObjectWidget → RenderObjectWidget → Widget
In contrast, the StatelessWidget and StatefulWidget goes as follows: