How to center only one element in a row of 2 elements in flutter
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.
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: