I need to center person’s name and surname in my Container widget. Here is my code:
<code>Container(
width: 130,
height: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.supervised_user_circle),
Flexible(
child: Text('MyName Surname'), // exactly two lines
),
],
),
),
</code>
<code>Container(
width: 130,
height: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.supervised_user_circle),
Flexible(
child: Text('MyName Surname'), // exactly two lines
),
],
),
),
</code>
Container(
width: 130,
height: 40,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(5),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.supervised_user_circle),
Flexible(
child: Text('MyName Surname'), // exactly two lines
),
],
),
),
I added Flexible widget so that the long text fits into the widget. The size of the container should be exactly like this.
How can I center this icon and two lines?
You can use n to insert a line break.
Text('MyName Surname') becomes Text('MyNamenSurname')
Before:
After:
Does this accomplish what you’re looking for?
3