'Flutter : force text to center in a row
I have a little problem. I would like to force the middle text to the center in the row.
Here is the code I am using :
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Icon(Icons.close),
],
),
Align(
alignment: Alignment.center,
child: Text(
"Modifier le profil",
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w600),
),
),
Row(
children: [
TextButton(
child: Text(
"Enregistrer",
style: TextStyle(
color: d_grey_icon,
fontSize: 15,
fontWeight: FontWeight.w400,
decoration: TextDecoration.underline),
),
onPressed: () {}),
],
)
],
),
Solution 1:[1]
Please check this updated code. I have removed the unnecessary Rows from your code.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.close),
const SizedBox(width: 35,),
Expanded(
child: Text(
"Modifier le profil",
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.w600),
textAlign: TextAlign.center,
),
),
TextButton(
child: Text(
"Enregistrer",
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.w400,
decoration: TextDecoration.underline),
),
onPressed: () {})
],
),
Solution 2:[2]
if you want absolute center you should use Stack instead of Row, for Row you have to give every child the same width to make it center
Solution 3:[3]
like this...
return Row(
children: [
Expanded(
flex: 1,
child: Align(
alignment: Alignment.centerLeft,
child: Icon(Icons.close),
),
),
Expanded(
flex: 1,
child: Text(
"Modifier le profil",
textAlign: TextAlign.center,
),
),
Expanded(
flex: 1,
child: TextButton(
child: Align(
alignment: Alignment.centerRight,
child: TextButton(
child: Text(
"Enregistrer",
),
onPressed: () {}),
),
),
],
);
Solution 4:[4]
You could try to use the Spacer Widget in combination with the Expanded widget, try to start from this piece of code to tinker it with the expanded widget.
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.close),
Spacer(),
Text(
"Modifier le profil",
style: TextStyle(
color: Colors.black, fontSize: 15, fontWeight: FontWeight.w600),
),
Spacer(),
TextButton(
child: Text(
"Enregistrer",
style: TextStyle(
color: d_grey_icon,
fontSize: 15,
fontWeight: FontWeight.w400,
decoration: TextDecoration.underline),
),
onPressed: () {}),
],
)
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Siddharth Mehra |
| Solution 2 | Abrar Malekji |
| Solution 3 | |
| Solution 4 | FrancescoPenasa |