flutter - 如何在 Flutter 中使两个文本居中

Question

我有下一个小部件:

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

看起来像这样:

这有完美的位置，现在我想分别设置数字 5000 和“Pts”文本的样式，但我没有设法让它工作(像图像一样居中两个文本)，我尝试使用一行，更多容器、中心类等。

Answer 1

这是 rich text constructor 的完美使用和几个 TextSpans .

取自 flutter docs 中的第二个样本, 尝试:

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