close

flutter align two items on extremes – one on the left and one on the right

by

I am attempting to adjust two things at limits one on the left and one on the right. I have one line that is adjusted to one side and afterward an offspring of that line is adjusted to one side. Anyway it appears to be the kid line is getting the arrangement 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,
            ],
        );

thus I get something like this

Left Right

What I would like is

Left      Right

Additionally there is sufficient space on the Row. My inquiry is the reason is the youngster Row not displaying its MainAxisAlignment.end property ?

Answer

Utilize a solitary Row all things considered, with mainAxisAlignment: MainAxisAlignment.spaceBetween.

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

Or then again you can utilize Expanded

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

Thanks for being with us on a Flutter Journey!!!

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you? Thank You.

Also Read

Leave a Comment