Как выровнять виджет по центру во Flutter? - PullRequest
0 голосов
/ 04 августа 2020

У меня есть два виджета, которые я вызываю в стеке. Я пытаюсь разместить текст «0» в центре циферблата. Я пытаюсь вызвать два виджета в столбце, но, похоже, это не работает.

Это мой код:

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

И вот как выглядит результат: enter image description here

And это - то, чего я пытаюсь достичь.

1 Ответ

0 голосов
/ 04 августа 2020

Нет необходимости использовать стек. Просто поместите текст, который нужно отобразить, в конструктор holeLabel AnimatedCircularChart. Вот как это должно выглядеть:

@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,
  ),
);
} 
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...