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

您是否尝试将行的 mainAxisAlignment 设置为 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 eg 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.

Answer 7

Achieve using Expanded & Align like below inside Row :

Row(
  mainAxisAlignment: MainAxisAlignment.start,
  children: <Widget>[
    ...some other widgets,
    Expanded(
      //Expanded will help you to cover remaining space of Row
      flex: 1,
      child: Align(
        //Align with alignment.centerRight property will move the child to righteous inside Expanded
        alignment: Alignment.centerRight,
        child: const Icon(Icons.arrow_back),
      ),
    ),
  ],
),

Note, the Expanded has to be just inside the Row children: <Widget>[] , othewise suppose you've put the GestureDetector inside Row children: <Widget>[] , and inside GestureDetector you have put your Expanded , then it won't work.

Hope this would help many one.