The Row widget is a horizontal layout widget in Flutter that allows you to display multiple widgets side-by-side in a single row. It is ideal for scenarios where you want to display multiple widgets such as icons, text, or images in a row, and you want to control their alignment and positioning. You can set various parameters for the Row widget, including the main axis alignment, cross axis alignment, and the size of the row in the main axis.
The Row widget takes in a list of child widgets as its input, which can be of any type. The children can be added to the Row widget either directly in the constructor or by calling the add() method of the children property. The Row widget is a very useful widget in Flutter for creating responsive layouts, and it is often used in combination with other layout widgets such as Column and Expanded to create more complex layouts.
Constructor of the Row Widget
The constructor for the Row widget takes several optional parameters, including:
- mainAxisAlignment: Determines how the children should be aligned horizontally within the Row. This can be set to values such as MainAxisAlignment.start (the default), MainAxisAlignment.center, MainAxisAlignment.end, MainAxisAlignment.spaceBetween, MainAxisAlignment.spaceAround, or MainAxisAlignment.spaceEvenly.
- crossAxisAlignment: Determines how the children should be aligned vertically within each row. This can be set to values such as CrossAxisAlignment.start, CrossAxisAlignment.center, or CrossAxisAlignment.end.
- mainAxisSize: Determines the size of the Row in the main axis (horizontal axis). This can be set to values such as MainAxisSize.max (the default), which makes the Row take up as much horizontal space as possible, or MainAxisSize.min, which makes the Row only take up as much horizontal space as necessary to contain its children.
- children: A list of widgets to display within the Row. These can be any type of widget, such as icons, text, images, or other custom widgets.
“CrossAxisAlignment” & “MainAxisAlignment”
mainAxisAlignment and crossAxisAlignment are properties of the Row and Column widgets in Flutter that control the alignment of the child widgets in the main axis and the cross axis respectively.
The main axis is the axis that runs parallel to the direction of the row or column, while the cross axis runs perpendicular to the direction of the row or column.
mainAxisAlignment is used to control the alignment of the child widgets in the main axis. You can set it to start, end, center, spaceBetween, spaceAround, or spaceEvenly. start aligns the children to the start of the main axis, end aligns them to the end of the main axis, center aligns them to the center of the main axis, spaceBetween spaces the children out evenly across the main axis with the first child at the start and the last child at the end, spaceAround spaces the children out evenly across the main axis with space between each child, and spaceEvenly spaces the children out evenly across the main axis with equal space between each child and at the start and end.
crossAxisAlignment, on the other hand, is used to control the alignment of the child widgets in the cross axis. You can set it to start, end, center, stretch, or baseline. start aligns the children to the start of the cross axis, end aligns them to the end of the cross axis, center aligns them to the center of the cross axis, stretch stretches the children to fill the available space in the cross axis, and baseline aligns the children to a common baseline.
By using these properties, you can create flexible and responsive layouts in Flutter.
Examples
Here is an example of a Row widget with two child widgets, an Icon and a Text widget:
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.star),
Text('5 Stars'),
],
)
In this example, the Row widget is set to use MainAxisAlignment.center, which will center the child widgets horizontally within the Row. The children of the Row are an Icon widget with the Icons.star icon, and a Text widget with the text “5 Stars”. When rendered, the Row will display the Icon and Text widgets side by side horizontally.
Here is another example of a Row widget, this time using crossAxisAlignment to align the children vertically within each row:
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.person),
Text('User Name'),
],
)In this example, the Row widget is set to use CrossAxisAlignment.center, which will center the child widgets vertically within each row. The children of the Row are an Icon widget with the Icons.person icon, and a Text widget with the text “User Name”. When rendered, the Row will display the Icon and Text widgets side by side horizontally, with the Icon and Text both vertically centered within each row.