Is there a way to align a widget to the far right of a row in Flutter?

Question

I have a row in Flutter with two widgets. I'm trying to keep the first widget centered in the middle of the screen and the second widget forced to the far right of the screen.

I've tried using Spacer(). This results in the app returning a blank screen.

I've also tried using Expanded. This sends the second widget off the screen completely.

Trying mainAxisAlignment: MainAxisAlignment.spaceBetween did not seem to have any effect.

@override
  Widget build(BuildContext context) {
    return new Container(
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            new Container(
              child: new GestureDetector(
                onTap: () {
                  FocusScope.of(context).requestFocus(new FocusNode());
                },
                child: Column(
                  children: <Widget>[
                    SizedBox(height: 40.0),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        new Column(
                          children: <Widget>[
                            new Container(
                              child: Row(
                                mainAxisAlignment:MainAxisAlignment.spaceBetween,
                                children: <Widget>[
                                  Container(),
                                  Container(
                                    child: Text(
                                      'Profile',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                        fontFamily: 'Lato',
                                        color: Colors.white,
                                        fontSize: 50.0,
                                        fontWeight: FontWeight.w700,
                                      ),
                                    ),
                                  ),
                                  Container(
                                    child: IconButton(
                                      icon: Icon(
                                        Icons.settings,
                                        color: Colors.white,
                                        size: 30.0,
                                      ),
                                      onPressed: () {
                                        Navigator.push(
                                          context,
                                          MaterialPageRoute(
                                            builder: (context) => OnBoarding()),
                                        );
                                      }),
                                  ),
                                ]),
                              ),
                            ),
                          ],
                        ),
                      ],
                    ),

Answer 1

You can use a Row with an Expanded child that contains a Stack. Centre your text with Center and position the icon with Positioned, like so:

[...]
child: Column(
  children: <Widget>[
    SizedBox(height: 40.0),
    Row(
      children: <Widget>[
        Expanded(
          child: Stack(
            children: [
              Center(
                child: Text(...),
                ),
              ),
              Positioned(
                right: 8,
                child: IconButton(...),
[...]

Answer 2

I did this and worked in my project

child:Row(
 **crossAxisAlignment: CrossAxisAlignment.center,
 mainAxisAlignment: MainAxisAlignment.end,**
 children: [
  Icon(MaterialCommunityIcons.comment_outline),
  Text("0"),
  Icon(Icons.favorite_border),
  Text("0"),
  ],
),

I needed align Icons and Text at right in Row widget

Container(
  child: Row(
   crossAxisAlignment: CrossAxisAlignment.center,
   mainAxisAlignment: MainAxisAlignment.end
   children: [ // put your widget list and be happy ]
  )
)

enter image description here

Answer 3

Use a row with this following structure:

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: <Widget>[
      Container(),
      Container(
        child: Text(
      'Profile',
      textAlign: TextAlign.center,
      style: TextStyle(
        fontFamily: 'Lato',
        color: Colors.white,
        fontSize: 50.0,
        fontWeight: FontWeight.w700,
        ),
      ),
    ),
    Container(
    child:  IconButton(
      icon: Icon(
        Icons.settings,
        color: Colors.white,
        size: 30.0,
        ),
      ),
    ),  
  ]
),

what will happen is that the spaceBetween property will divide available space equally between the widgets in the row, so I put an empty Container, and this will force the Text widget to be in the middle of the row and the IconButton in the far end as you desire.

I noticed in your code snippet that you have a Column with a single Row which again contains a single Column , you should eliminate this redundancy to optimize your code and make it easier to debug:

Answer 4

Simply just add Spacer() between your main text and the Icon you want to the far right.

For example:

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    IconButton(
      icon: Icon(Icons.arrow_back),
      onPressed: () {},
    ),
    Text(
      'Random test text',
      style: TextStyle(color: Colors.white),
    ),
    Spacer(),
    IconButton(
      icon: Icon(Icons.more_vert_rounded),
      color: Colors.white,
      onPressed: () {},
    ),
  ],
)

I hope this helps you. And I hope the format of the code is readable. Still getting a hang of stackoverflow comments

Answer 5

Have you tried setting the mainAxisAlignment of the row to mainAxisAlignment.center?

Answer 6

Imo the easiest way to do this is to create a row with 2 children: The first child is an Expanded Row with all your "main" widgets. The second child is your widget which must be aligned to the end.

Row(
  children: [
    Expanded(
      child: Row(
        children: [...mainWidgets...],
      ),
    ),
   ...endWidget...
  ],
),

Note that Expanded is space-greedy. If you use e.g. MainAxisAlignment.center for your Expanded Row, then your children are drawn across the whole avialable width. If this is not to your liking, Id suggest to wrap the Expanded-Row (not Expanded) inside a Container with "constraints: BoxConstraints(maxWidth: 500)". Obviously Expanded shouldnt be Constrained.