In this article, we’ll look into this widget for layouts.

Row & Column

Stack

Expanded

Align

SizedBox

1. Row & Column.

MainAxisAlignment.start

                                   

                           

MainAxisAlignment.center

                                   

                               

MainAxisAlignment.end

                                            

                             

MainAxisAlignment.space Around 

                                       

                             

MainAxisAlignment.spaceEvenly

                                       

                             

As in the above picture you have seen that we have mainAxisAlignment options for both rows, column so we can use rows & columns to draw the layout in a flutter. There is more property in the row & column which you can explore by yourself to improve the grip of the layout. 

2. Stack.

A stack is a widget that shows multiple widgets on top of each other. As you can see in the picture below we can use a stack to get results like that.

                                                         

                             

And eventually, if you want to change the alignment of the stacked widget you can use the alignment property to change its alignment.

3. Expanded

Expanded is a widget that can take all available space as it gets as you can see below image expanded widget works like this.

                                                       

                                     

4. Align the Widget

Align widget is very useful when we align the child widget to the parent widget’s height or center as you can see in the image below. We can use an align widget like this.

                                                         

From here you can find the code for align widget.

                               

5.SizedBox

Sizedbox is the most lightweight widget in a flutter with this widget we can give custom space between two widgets. Sizedbox takes only three properties which are height, width & child. An example of a sized box is mentioned below.

                                                       

You can find the code for the sized box here.

                               

That’s all for today's blog. I hope you find a helpful lesson in this blog.

If you have any queries regarding flutter app development connect with our flutter app developers.