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

Use a single Row instead, with mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(   mainAxisAlignment: MainAxisAlignment.spaceBetween,   children: [     new Text("left"),     new Text("right")   ] ); 

Or you can use Expanded

new Row(   children: [     new Text("left"),     new Expanded(       child: settingsRow,     ),   ], ); 

Answer 2

A simple solution would be to use Spacer() between the two widgets

Row(   children: [     Text("left"),     Spacer(),     Text("right")   ] );