How to center two Texts in Flutter - flutter

Question

I have the next widget:
class PoinstsDisplayState extends State<PoinstsDisplay> {
#override
Widget build(BuildContext context) {
return new Container(
width: MediaQuery.of(context).size.width*0.9,
margin: EdgeInsets.only(top: 20.0),
padding: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: Color(0xff2b2b2b),
borderRadius: BorderRadius.circular(10.0),
),
child: new Text(
'5000 Pts',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Karla'
),
)
);
}
}
That looks like this:
That have the perfect position, now I want to style the number 5000 and the 'Pts' text separately but I have not managed to make it work (center two text like the image), I am try with a Row, more Containers, the Center Class etc, etc.

Answer 1

This is a perfect use of the rich text constructor with a couple of TextSpans.
Taking from the 2nd sample in the flutter docs, try:
Text.rich(
TextSpan(
children: <TextSpan>[
TextSpan(text: '5000 ', style: TextStyle(color: Colors.white)),
TextSpan(text: 'pts', style: TextStyle(color: Colors.red)),
],
),
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Karla'
),
)

Answer 2

You probably want to use some combination of mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, and placing some padding or an empty Container with a set width between the two text widgets for the space.
class PointsDisplay extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text(
'5000',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
fontFamily: 'Karla'
),
),
Container(width: 5.0,height: 0,),
Text(
'Pts',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Times'
),
),
],
);
}
}

Answer 3

When you have a WidgetSpan as a children of TextSpan, you can use:
WidgetSpan(
child: Icon(Icons.access_time),
alignment: PlaceholderAlignment.middle
)

Answer 4

Use RichText: Video | Document
RichText(
textAlign: TextAlign.center,
text: TextSpan(
text: 'Hello ',
children: const <TextSpan>[
TextSpan(text: 'bold', style: TextStyle(fontWeight: FontWeight.bold)),
TextSpan(text: ' world!'),
],
),
)