flutter - 将值与 CircularProgressIndicator 颤动的中心对齐

Question

我有一个CircularProgressIndicator显示完成了多少问题。我把它和显示它的文本一起放在一个堆栈中。我还想在这些上面显示一些文本，说明它们是什么，“尝试的问题”，但是一旦我将堆栈和文本小部件放在一列中，完成的问题数量就不会在中心对齐进度指标。谁能告诉我为什么会这样？

显示进度指示器的代码的简化版本：

class _ProgressIndicator extends StatelessWidget {
  ...

  @override
  Widget build(BuildContext context) {
    ...
    return Stack(
      children: [
        Center(
            child: Text(
          '$attemptedQuestions/ $totalQuestions',
          textAlign: TextAlign.center,
        )),
        Center(
            child: SizedBox(
          height: progressBarSize,
          width: progressBarSize,
          child: CircularProgressIndicator(
            value: attemptedQuestions / totalQuestions,
            ....

以及显示文本和进度指示器的代码：

class _AttemptedQuestions extends StatelessWidget {
  ....

  @override
  Widget build(BuildContext context) {
    ....
    return Container(
      height: topViewHeight,
      width: topViewWidth,
      child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Padding(
                padding: EdgeInsets.all(20),
                child: Text('Attempted Questions:', style: textStyle)),
            _ProgressIndicator(...),
          ]),
          ....

结果是：

我想要的是将数字放在中心，例如：

标签： flutterdart

Answer 1

您可以复制、粘贴并运行下面的完整代码以查看所需的输出：-

你可以这样试试。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  "Attempted Questions:",
                  style: TextStyle(fontSize: 30),
                ),
                SizedBox(
                  height: 40,
                ),
                Stack(
                  alignment: Alignment.center,
                  children: [
                    SizedBox(
                      width: 207,
                      height: 207,
                      child: CircularProgressIndicator(
                        strokeWidth: 20,
                      ),
                    ),
                    Text(
                      "3/3",
                      style: TextStyle(fontSize: 40),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

工作演示