Flutter align two items on extremes - one on the left and one on the right

Question

I am trying to align two items at extremes one on the left and one on the right. I have one row that is aligned to the left and then a child of that row is aligned to the right. However it seems the child row is picking up the alignment property from its parent. This is my code

var SettingsRow = new Row(
            mainAxisAlignment: MainAxisAlignment.end,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Right",softWrap: true,),
            ],
        );

        var nameRow = new Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                Text("Left"),
                SettingsRow,
            ],
        );

as a result I get something like this

Left Right

What I would like is

Left      Right

Also there is enough space on the Row. My question is why is the child Row not exhibiting its MainAxisAlignment.end property ?

Answer 1

To achieve the desired result of having two items aligned to the extremes, one on the left and one on the right, you can use the Expanded widget as a parent of the SettingsRow widget. This will allow the SettingsRow widget to take up the remaining space in the row and align its child to the right.

Here's an updated version of your code with the Expanded widget added:

var SettingsRow = new Row(
  mainAxisAlignment: MainAxisAlignment.end,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Text("Right",softWrap: true,),
  ],
);

var nameRow = new Row(
  mainAxisAlignment: MainAxisAlignment.start,
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[
    Text("Left"),
    Expanded(
      child: SettingsRow,
    ),
  ],
);

By wrapping the SettingsRow with an Expanded widget, it will take up all the available space in the row and align its child, which is the Text widget with the text "Right", to the right.

This should give you the desired result of having two items aligned to the extremes, one on the left and one on the right, like this:

Left      Right

To know more, join our Flutter Training today.