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 talk about the Flutter row widget, its role, and usage in Flutter apps.
What is Flutter Row Widget?
A row widget is actually a list of widgets that are placed in a row. It means you can give the row as many widgets as you want. Let’s understand it by first understanding how to use/implement rows within the 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 can we 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 a row.
- Main Axis Alignment
- Cross Axis Alignment
Let’s understand both of them.
Main Axis Alignment in Row
Row( mainAxisAlignment:MainAxisAlignment.center )
The main axis alignment in the row is from right to left. 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 a row is from top to bottom or vice versa. 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.
Conclusion
That’s all for this article, we hope you now have a detailed understanding of how to properly use the Flutter row widget. We are looking forward to your response.
We’d also be glad to see you visit our other tutorials on Flutter app development and Python programming. Thank you for reading this one.