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

0 votes

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 ?

Mar 29, 2023 in Flutter by sarit
• 1,830 points
5,823 views

1 answer to this question.

0 votes

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.

answered Mar 29, 2023 by vinayak

Related Questions In Flutter

0 votes
1 answer
0 votes
1 answer

Linking 3 Flutter Projects in One Flutter Project

Yes, it is possible to combine multiple ...READ MORE

answered Mar 20, 2023 in Flutter by vinayak
339 views
0 votes
1 answer

How to change flutter project name and id?

Yes, it is possible to change the ...READ MORE

answered Mar 20, 2023 in Flutter by pooja
2,862 views
0 votes
1 answer

How can I remove the debug banner in Flutter?

The debug banner in Flutter can be ...READ MORE

answered Mar 1, 2023 in Android by vishalini
417 views
0 votes
1 answer

How to do Rounded Corners Image in Flutter?

To make the image in your Flutter ...READ MORE

answered Mar 1, 2023 in Android by vishalini
979 views
0 votes
1 answer

How to add a ListView to a Column in Flutter?

To add a ListView to a Column ...READ MORE

answered Mar 9, 2023 in Android by pooja
9,280 views
0 votes
1 answer

How to deal with unwanted widget build?

There are a few strategies that you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
2,507 views
0 votes
1 answer

What is the relation between stateful and stateless widgets in Flutter?

In Flutter, a widget is either stateless ...READ MORE

answered Mar 28, 2023 in Flutter by seena
1,927 views
0 votes
1 answer

Is Flutter/Dart valuable in the professional setting?

Yes, Flutter and Dart are valuable skills ...READ MORE

answered Mar 21, 2023 in Flutter by vani
254 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP