Flutter text display issue - text

Question

Am writing a very basic app that just displays numbers on the screen and you can increase and decrease the value of this number with some buttons.
Works fine, except for some reason the text display often goes nuts. I'll show you what I mean:
The above text is trying to display a value of 20, but it is struggling for some reason, as you can see.
This only appears to be happening with double-digit or higher values. My code:
class _SinglePlayerModeParentState extends State<SinglePlayerMode> {
#override
void initState() {
super.initState();
SystemChrome.setEnabledSystemUIOverlays([]);
SystemChrome.setPreferredOrientations([DeviceOrientation.landscapeLeft,]);
}
#override
Widget build(BuildContext context) {
Widget numberDisplay = GestureDetector(
onTap: () {
print("GestureDetector");
_incrementBy1();
},
child: Center(child: Text(_numberValue.toString(),
style: TextStyle(
fontSize: 200.0,
color: Colors.white,
),
),
),
);
This code was already displaying these text issues before I rearranged the code to include the following as well:
Widget buttonRow() {
return Row(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 40.0, right: 20.0),
child: FloatingActionButton(
heroTag: null,
onPressed: _numberValueMinus5,
child: Text('-5'),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 40.0),
child: FloatingActionButton(
heroTag: null,
onPressed: _numberValueMinus1,
child: Text('-1'),
),
),
],
),
Row(
children: <Widget>[
Padding(
padding: EdgeInsets.only(left: 40.0, right: 20.0),
child: FloatingActionButton(
heroTag: null,
onPressed: _numberValuePlus1,
child: Text('+1'),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, right: 40.0),
child: FloatingActionButton(
heroTag: null,
onPressed: _numberValuePlus5,
child: Text('+5'),
),
),
],
),
],
);
}
return MaterialApp(
title: 'Bean Counter',
home: Scaffold(
backgroundColor: Colors.blueAccent,
body: Column(
children: [
Padding(
padding: EdgeInsets.only(top: 90.0, bottom: 40.0),
child: numberDisplay,
),
buttonRow(),
],
),
),
);
}
Not sure what I can do differently here, it's just text!
Any thoughts?
Edit: Testing the FittedBox solution.
#override
Widget build(BuildContext context) {
Widget numberDisplay = GestureDetector(
onTap: () {
print("GestureDetector");
_incrementBy1();
},
child: Center(
child: FittedBox(
fit: BoxFit.scaleDown,
child: Text(_numberValue.toString(),
style: TextStyle(
fontSize: 200.0,
color: Colors.white,
),
),
),
),
);
}
Results: this is trying to display the number 30:
As you can see, it still isn't displaying properly. I also tried BoxFit.contain, same issue. Information obtained from this reference: https://docs.flutter.io/flutter/painting/BoxFit-class.html
Any other ideas guys? Or did I implement FittedBox incorrectly?
Edit: Tried with AutoSizeText, as recommended below. Code:
#override
Widget build(BuildContext context) {
Widget scoreText = GestureDetector(
onTap: () {
print("GestureDetector");
_incrementBy1();
},
child: Center(
child: AutoSizeText(_numberValue.toString(),
style: TextStyle(
fontSize: 200.0,
color: Colors.white,
),
),
),
);
Results:
Argh! Displaying text on a clear screen. Level: difficult.