Блог

У меня есть 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(...),
          ]),
          ....
  

Результат:

Я хочу, чтобы в центре было число, например:

Вы можете скопировать, вставить и запустить полный приведенный ниже код, чтобы увидеть желаемый результат:-

Вы можете попробовать так.

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

рабочая демонстрация