如何在 Flutter 中创建自定义圆形进度条？

Question

I want to make a custom circular progress bar. In which, I can set a maximum value like 1200. The progress of the circle changes according to my input value. If I input 100 as a value, it shows it as progress. If I again input 200, it sums this value with the previous one such as: 200+100= 300 and shows the progress.

It will do same until it reaches the maximum value. If it crosses the maximum value then it calculates the extra value I inputted.

Like, if I input 1500, it shows extra value 300.

I have checked a lot of articles about circular progress bar.

But I can't understand how to do this in Flutter.

Answer 1

You can use CircularProgressIndicator.adaptive, it gives you the ability to give the progress "value".

you can give any progress value from 0 to 1 (1 being the full circle), so can give your values as fraction (progressValue/totalValue) to the value parameter.

For example in your case 100/1200

and for the extra value, you can add a simple check that will determine if the progress value is greater than your totalValue then show their difference

Here is the code that increases the progress value by 100 by clicking on the button and also shows the extra value (if any).

class ExampleScreen extends StatefulWidget {

 const ExampleScreen({Key? key}) : super(key: key);

  @override
  State<ExampleScreen> createState() => _ExampleScreenState();
}

class _ExampleScreenState extends State<ExampleScreen> {
  int totalValue = 1200;
  int loadingValue = 0;

  void onAddButtonPressed() {
    setState(() {
      loadingValue += 100;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: onAddButtonPressed,
        tooltip: 'Add 100',
        child: const Icon(Icons.add),
      ),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            CircularProgressIndicator.adaptive(
              value: loadingValue / totalValue,
            ),
            if (loadingValue > totalValue) ...[
              const SizedBox(
                height: 10,
              ),
              Text(
                'your extra values are ${loadingValue - totalValue}',
              ),
            ]
          ],
        ),
      ),
    );
  }
}