Flutter Multi Child Layout Widgets
Multi-Child Layout Widgets and they are used to determine what UI elements go where - where the elements of the user interface are going
to be presented. They are very important as you can break almost 90% of the layout designs into Rows and Columns.
Obviously, you can combine/nest these Widgets. You could have a Row that contains 2 Columns that contains 3 Custom Widgets. Then each Custom Widget could contain a Row of an Icon Widget, a Text Widget then a Button.
These layouts work really well when they are used to layout components to which you already know the size, such as buttons, textboxes etc. They also work when you have widgets that don’t overflow the screen space available and you expand them to use all the space available up. When you need to use up extra screen space you can use the MainAxisAlignment property to space child Widgets out or use Expanded Widgets to expand those child Widgets.
These layouts don’t work well when they are used to layout components with very dynamic sizing requirements, for example Text
widgets that are generated from user data, with some wide texts, some narrow texts. In this case, you are probably better off using the Table.
It can handle the text overflows without any additional complications. When using these Widgets, you may sometimes encounter the times
when the child Widgets don’t fit in the screen space.
Spacing Out Children Using MainAxisAlignment
The MainAxisAlignment widget allows you to determine how the Widgets are laid out vertically. Take a look at the example below to see
how this affects the horizontal layouts.