When building layouts in Flutter, it is important to know how the framework handles the layouts.
Unlike other frameworks, almost everything you use in Flutter is widgets. When rendering the widgets on the screen, Flutter creates a tree of widgets as shown below. The framework first goes from the top to the bottom of the tree and then goes back.
While going down the tree, properties of the parent widget are applied to its child elements. Using these properties, the size of each element is calculated and the position of each element is determined.
In Flutter, a common way of laying out widgets is composing them into groups of columns and row — this allows us to easily layout our components in a vertical / horizontal manner.
This can be a little bit confusing at first, but trust me. It’s not much complicated as you think.
