Let’s talk about rows 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 row 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 row widget in a flutter app?
Introduction
Row widget is actually a list of widgets that are placed in row. It means you can give the row as much widget as you want. Let’s understand it by first understanding how to use/implement row within flutter app.
Implementation
Row()
As you can see, we can use the row by using the row 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 Row
Row(
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 Row
Row(
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 row using its children constructor. We can also see this these texts are in a row.
Alignments in Row
There are two alignments in row.
- Main Axis Alignment
- Cross Axis Alignment
Let’s understand both of them.
Main Axis Alignment in Row
Row( mainAxisAlignment:MainAxisAlignment.center )
Main axis alignment, in row is from right to left, 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 row to be displayed in the center from right to left or vice versa.
Cross Axis Alignment in Row
Row( crossAxisAlignment:CrossAxisAlignment.center )
Cross axis alignment, in row is from top to bottom or vice versa, 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 top to bottom. We can use both at the same time or use one of them depending on the design we want to implement.
Note:
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.
