66

In my layout I have two Widgets in a row, one text and the an icon.

As shown below, assume that * refers to the icon, and using "-" to represent the row:

----------------------------
           Text          *  
----------------------------

How do I make my text centered in the entire row, and the icon to the right end ?

0

10 Answers 10

62

The main thing you need to notice is that if you don't want to use Stack you should provide same width-consuming widgets both on left and right.

I would do this with either Expanded and Padding

Row(
  children: <Widget>[
    Expanded(
      child: Padding(
        padding: const EdgeInsets.only(left: 32.0),
        child: Text(
          "Text",
          textAlign: TextAlign.center,
        ),
      ),
    ),
    Icon(Icons.add, size: 32.0,)
  ],
)

or with Row's mainAxisAlignment and a SizedBox

Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    const SizedBox(width: 32.0),
    Text("Text"),
    Icon(Icons.add, size: 32.0)
  ],
)

or with Expanded and a SizedBox on the left instead of the padding :). The padding or extra container on the left is so that the textAlign will truly center the text in the row taking into account the space taken up by the Icon.

2
  • why exactly 32?
    – reverie_ss
    May 8, 2021 at 20:29
  • @reverie_ss to "counter" the icon - icon's size is 32, so the Container must be the same width on the other size. Without it, the text would appear (slightly) off-center. Dec 17, 2021 at 9:09
29

Simply use Expanded and Spacer widgets on left/right side and put your widget inside the Expanded:

Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    Spacer(),
    Text('Text'),
    Expanded(
      child: Text('*'),
      ),
    ),
  ],
),

Result: Flutter center by one element in Row

2
  • Very nice. I still have trouble wrapping my head around this though. Can you explain more why it works ?
    – log0
    Sep 29, 2021 at 10:30
  • @log0 Text widget is placed between Spacer and Expanded, which equally share the rest of the available width Sep 30, 2021 at 3:18
21

enter image description here

1. Using Row (not very flexible though)

Row(
  children: <Widget>[
    Expanded(child: Center(child: Text('Center'))),
    Text("#"),
  ],
)

2. Using Stack (flexible)

IntrinsicHeight(
  child: Stack(
    children: [
      Align(child: Text('Center')),
      Positioned(right: 0, child: Text('#')),
    ],
  ),
)
2
  • 16
    This places "Center" a little to the left of center.
    – Swift
    Apr 18, 2020 at 17:01
  • 1
    @Swift Replace Row with Stack, remove Expanded and wrap Text in Positioned(right: 0, child: Text("*")
    – CopsOnRoad
    Apr 19, 2020 at 0:28
18

I found it necessary to use a Stack to get Text to be truly centered:

Column(
  mainAxisSize: MainAxisSize.min,
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    Stack(
      alignment: Alignment.center,
      children: [
        Align(
          alignment: Alignment.center,
          child: Text('Text'),
        ),
        Align(
          alignment: Alignment.centerRight,
          child: Text('*'),
        )
      ],
    ),
  ],
);
2
  • This worked the best for me, and only this really centered correctly. Thanks
    – RJB
    Feb 11, 2021 at 20:13
  • 2
    Only issue is that the first Align does not take the second in consideration in a stack (as opposed to say a Row). Hence the 2 widgets could overlap...
    – lenz
    Jun 6, 2021 at 2:21
5

For flexibility reasons I recommend to use Expanded widgets:

       Row(
            children: [
              Expanded(flex: 1, child: Container()),
              Expanded(
                flex: 8,
                child: Text('Your Text',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(flex: 1, child: IconButton(...))
            ],
          )
1

For my case, I solved my centering problem by adjusting the flex property of the Spacer widget -

Row(children: [
        Spacer(flex: 3),//3 was for my case, It might be changed for your widgets
        Text('Center'),
        Spacer(flex: 1),//1 was also for my case, It might be changed on for your widgets
        Text("*")]); 
0

Add another icon in the start and set the opacity to zero.

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: [
      CloseButton(
         onPressed: () => Navigator.of(context).pop(),
      ),
      Text('text',),

      Opacity(
         opacity: 0,
         child: Icon(Icons.close),
         ),
       ],
     )
0

I

I wanted this here , there are 3 items in one Row the first and second one is at top of that Row while the last Icon was at the center of that row vertically. My approach was use of IntrinsicHeight widget provider by flutter

Note : No any static height given in this solution

                IntrinsicHeight(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Container(
                        alignment: Alignment.topLeft,
                        child: Icon(
                          Icons.offline_bolt_sharp,
                          color: AppColors.secondary,
                        ),
                      ),
                      hSpacing(times: .5),
                      Expanded(
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            RichText(
                              text: TextSpan(
                                text: '',
                                style: TextStyle(),
                                children: <TextSpan>[
                                  TextSpan(
                                      text: "Free Delivery ",
                                      style: TextStyle(
                                        fontSize: 12,
                                        color: AppColors.secondary,
                                        fontWeight: FontWeight.bold,
                                      ),
                                      recognizer: TapGestureRecognizer()
                                        ..onTap = () {}),
                                  TextSpan(
                                    text: "Tomorrow 5 Aug",
                                    style: TextStyle(
                                      fontSize: 12,
                                      color: AppColors.secondary,
                                    ),
                                    recognizer: TapGestureRecognizer()
                                      ..onTap = () {},
                                  )
                                ],
                              ),
                            ),
                            vSpacing(times: .5),
                            Text(
                              "On minimum spend of Rs ${commaNumber(3000)}",
                              maxLines: 1,
                              overflow: TextOverflow.ellipsis,
                              style: TextStyle(
                                color: AppColors.secondary,
                              ),
                            ),
                          ],
                        ),
                      ),
                      Center(
                        child: Container(
                          child: Icon(
                            Icons.arrow_forward_ios_outlined,
                            size: 20,
                            color: AppColors.secondary,
                          ),
                        ),
                      ),
                    ],
                  ),
                ))

This way you stretch all the element of Row to equal height then position by alignment property according to your need.

0

You can always use a Stack with two children one as its own Row with an expansion to push elements to the walls and one as a Center item that has your desired center Widget. For example:

Stack(
  children: [
    Row(
      children: [
        leftWidgetHere,
        Expanded(
          child: Container(),
        ),
        rightWidgetHere,
      ],
    ),
    Center(
      child: centerWidgetHere,
    ),
  ],
);

As a useful component class:

class CenteredRow extends StatelessWidget {
  const CenteredRow({Key? key, required this.left, required this.center, required this.right}) : super(key: key);
  final Widget left;
  final Widget center;
  final Widget right;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Row(
          children: [
            left,
            Expanded(
              child: Container(),
            ),
            right,
          ],
        ),
        Center(
          child: center,
        ),
      ],
    );
  }
}
-1

This worked for me without Stack. But it is the other way around. "Text" goes to left "*" goes to center:

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Expanded(
          child: Text("text",
              style: Theme.of(context).textTheme.caption),
        ),
        Text("*"),
        Spacer(),
      ],
    )

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.