[SO]CircularProgressBar with percentage

readme.md

CircularProgressBar with percentage

This is a demo of the solution exposed in this StackOverflow answer.

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CircularProgressBar(),
        ),
      ),
    );
  }
}

class CircularProgressBar extends StatefulWidget {
  @override
  State<CircularProgressBar> createState() => _CircularProgressBarState();
}

class _CircularProgressBarState extends State<CircularProgressBar>
    with SingleTickerProviderStateMixin {
  late final _animationController = AnimationController(
    vsync: this,
    duration: const Duration(milliseconds: 5000),
  )..repeat();

  @override
  Widget build(BuildContext context) {
    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, child) => Stack(
        alignment: Alignment.center,
        children: [
          SizedBox.square(
            dimension: 112,
            child: CircularProgressIndicator(
              value: _animationController.value,
              color: Colors.green,
              strokeWidth: 24.0,
            ),
          ),
          Text(
            '${(_animationController.value * 100).toInt()}%',
            style: const TextStyle(
              fontSize: 28.0,
              fontWeight: FontWeight.bold,
              color: Colors.black,
            ),
          ),
        ],
      ),
    );
  }
}