text - Flutter 文本显示问题

Question

我正在编写一个非常基本的应用程序，它只在屏幕上显示数字，您可以使用一些按钮来增加和减少这个数字的值。

工作正常，除了出于某种原因文本显示经常发疯。我会告诉你我的意思：

如您所见，上面的文本试图显示 20 的值，但由于某种原因它正在挣扎。

这似乎只发生在两位数或更高的值上。我的代码：

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,
      ),
    ),
  ),
);

在我重新排列代码以包含以下内容之前，此代码已经显示了这些文本问题：

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(),
      ],
    ),
  ),
);
}

不知道我可以在这里做些什么，这只是文字！

有什么想法吗？

编辑：测试 FittedBox 解决方案。

@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,
          ),
        ),
      ),
    ),
  );

}

结果：这是试图显示数字 30：

如您所见，它仍然无法正确显示。我也试过 BoxFit.contain，同样的问题。从此参考获得的信息： https ://docs.flutter.io/flutter/painting/BoxFit-class.html

大家还有什么想法吗？还是我错误地实现了 FittedBox？

编辑：尝试使用 AutoSizeText，如下所示。代码：

@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,
      ),
    ),
  ),
);

结果：

啊！在清晰的屏幕上显示文本。等级：困难。

标签： textflutter