Let’s talk about columns in flutter, but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into column widget, what they really are, their role, and usage in flutter apps. So the first thing that would come to your mind will be, what is a column widget in a flutter app?
Column widget is actually a list of widgets that are placed in column. It means you can give the column as much widget as you want. Let’s understand it by first understanding how to use/implement column within flutter app.
As you can see, we can use the column by using the column class but of course, you want to pass widgets in it. So, how we can do that? Let’s see that as well:
Children of Column
Column( children:  )
This is how we can use the children constructor which takes a list of widgets, the widget can be anything like a container( if you want to know how to use and customize containers then click here ), a text( if you want to know how to use and customize text then click here ). Now let’s see how to give it some of the widgets.
Giving widgets to a Column
Column( children: [ Text('This is a text 1'), Text('This is a text 2'), ] )
As you can see here, this is how we can give multiple widgets to a column using its children constructor. We can also see this these texts are in a column.
Alignments in Column
There are two alignments in column.
- Main Axis Alignment
- Cross Axis Alignment
Let’s understand both of them.
Main Axis Alignment in Column
Column( mainAxisAlignment:MainAxisAlignment.center )
Main axis alignment, in column is from top to bottom, and as you can see that we have used the main axis alignment constructor which accepts a class called Main Axis Alignment, and from this class we have used the center property, which makes the widgets of the column to be displayed in the center from top to bottom.
Cross Axis Alignment in Column
Column( crossAxisAlignment:CrossAxisAlignment.center )
Cross axis alignment, in column is from right to left or from left to right, and as you can see that we have used the cross axis alignment constructor which accepts a class called Cross Axis Alignment, and from this class we have used the center property, which makes the widgets of the column to be displayed in the center from left to right. We can use both at the same time or use one of them depending on the design we want to implement.
That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into the column and other amazing widgets. Thanks.