Flutter Row Widget

Posted on Thursday, 02 March 2023 03:44 PM

The Row widget in Flutter is used to arrange child widgets horizontally. It's similar to the Column widget we discussed earlier, but it arranges child widgets in a horizontal direction instead of a vertical one. You can customise the appearance and behaviour of the Row widget by using various properties.

Here's an example of how to use the Row widget:

Row(
  children: const [
    Expanded(
      child: Text('Deliver features faster', textAlign: TextAlign.center),
    ),
    Expanded(
      child: Text('Craft beautiful UIs', textAlign: TextAlign.center),
    ),
    Expanded(
      child: FittedBox(
        child: FlutterLogo(),
      ),
    ),
  ],
)

Some common properties of the Row widget:

children: A list of child widgets to be arranged horizontally.

mainAxisAlignment: Determines how the child widgets should be aligned horizontally within the Row.

crossAxisAlignment: Determines how the child widgets should be aligned vertically within the Row.

mainAxisSize: Determines how much horizontal space the Row should occupy.

textDirection: Determines the direction in which text and widgets are aligned within the Row.

textBaseline: Determines the baseline used to align text within the Row.

verticalDirection: Determines the direction in which the child widgets should be arranged.

Output:

Here's an example that demonstrates how to use some of these properties:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: [
    Text('Widget 1'),
    Text('Widget 2'),
    Text('Widget 3'),
  ],
)

In this example,

We've set the mainAxisAlignment property to MainAxisAlignment.spaceBetween to evenly distribute the child widgets horizontally within the Row. We've also set the crossAxisAlignment property to CrossAxisAlignment.center to center the child widgets vertically within the Row. Finally, we've set the mainAxisSize property to MainAxisSize.max to make the Row occupy as much horizontal space as possible.

K-Learn