How to center only one element in a row of 2 elements in flutter

by

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.

Leave a Comment