如何在 Flutter 的中心對齊小部件？

Question

我有兩個要在堆棧中調用的小部件。 我正在嘗試將“0”文本放在表盤中心。 我正在嘗試調用 Column 中的兩個小部件，但它似乎不起作用。

這是我的代碼：

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: kAppBar(),
      body: Stack(
        children: <Widget>[
          Align(
            alignment: Alignment.topCenter,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.start,
              children: <Widget>[
                AnimatedCircularChart(
                  key: _chartKey,
                  size: _chartSize,
                  initialChartData: <CircularStackEntry>[
                    new CircularStackEntry(
                      <CircularSegmentEntry>[
                        new CircularSegmentEntry(
                          33.33,
                          kDarkOrange,
                          rankKey: 'completed',
                        ),
                        new CircularSegmentEntry(
                          66.67,
                          kOrange.withOpacity(0.3),
                          rankKey: 'remaining',
                        ),
                      ],
                      rankKey: 'progress',
                    ),
                  ],
                  chartType: CircularChartType.Radial,
                  edgeStyle: SegmentEdgeStyle.round,
                  percentageValues: true,
                ),
                Text(
                  '0',
                  style: TextStyle(
                    color: Color(0xFFFF8C3B),
                    fontSize: 80,
                    fontFamily: 'Netflix',
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  } 

這就是 output 的樣子：

這就是我想要實現的目標。

Answer 1

不需要使用堆棧。 只需將要顯示的文本放入 AnimatedCircularChart 的holeLabel 構造函數中即可。 它應該是這樣的：

@override
Widget build(BuildContext context) {
return Scaffold(
  appBar: kAppBar(),
  body: AnimatedCircularChart(
    key: _chartKey,
    size: _chartSize,
    holeLabel: '0',
    labelStyle: TextStyle(
      color: Color(0xFFFF8C3B),
      fontSize: 80,
      fontFamily: 'Netflix',
      fontWeight: FontWeight.bold,
    ),
    initialChartData: <CircularStackEntry>[
      new CircularStackEntry(
        <CircularSegmentEntry>[
          new CircularSegmentEntry(
            33.33,
            kDarkOrange,
            rankKey: 'completed',
          ),
          new CircularSegmentEntry(
            66.67,
            kOrange.withOpacity(0.3),
            rankKey: 'remaining',
          ),
        ],
        rankKey: 'progress',
      ),
    ],
    chartType: CircularChartType.Radial,
    edgeStyle: SegmentEdgeStyle.round,
    percentageValues: true,
  ),
);
}