Flutter Row Widget

CodeWithFlutter
2 Min Read

The Row widget in Flutter is used to display widgets in a horizontal manner and is part of the Flex layout. Some of the common properties of the Row widget are:

  1. mainAxisAlignment: This property sets the horizontal alignment of the children within the Row widget. Possible values are MainAxisAlignment.start, MainAxisAlignment.end, MainAxisAlignment.center, MainAxisAlignment.spaceBetween, and MainAxisAlignment.spaceAround.
  2. crossAxisAlignment: This property sets the vertical alignment of the children within the Row. Possible values are CrossAxisAlignment.start, CrossAxisAlignment.end, CrossAxisAlignment.center, and CrossAxisAlignment.stretch.
  3. children: This property takes a list of widgets that will be displayed in the Row.
  4. textDirection: This property sets the direction in which the text in the Row should be displayed. Possible values are TextDirection.ltr (left to right) and TextDirection.rtl (right to left).

Here’s an example of how to use the Row widget with some of its properties:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Icon(Icons.star),
    Text('Star'),
    SizedBox(width: 10),
    Icon(Icons.star),
    Text('Star'),
    SizedBox(width: 10),
    Icon(Icons.star),
    Text('Star'),
  ],
)

In this example, the mainAxisAlignment is set to MainAxisAlignment.spaceBetween which will distribute the space between the children evenly. The crossAxisAlignment is set to CrossAxisAlignment.center which will center the children vertically.

Share this Article
Leave a comment