Stack Circular Progress #

Make an Simple or Animated multiple circular progress bar using Stack Circular Progress.

Screenshots #

Simple Cricular Porgress	Animated Cricular Porgress	Gradient Cricular Porgress

Getting started #

Installing #

dependencies:
  circular_progress_stack: ^0.0.1

Import #

import 'package:circular_progress_stack/circularprogressstack.dart';

Example #

Simple Stack Circular Progress #

Center(
                child: SimpleNewStackCircularProgressBar(
                  size: 200,
                  progressStrokeWidth: 15,
                  backStrokeWidth: 15,
                  startAngle: 0,
                  backColor: const Color(0xffD7DEE7),
                  bars: [
                    SimpleNewBarValue(
                      barColor: Colors.red,
                      barValues: 50,
                      fullProgressColors: Colors.red,
                    ),
                    SimpleNewBarValue(
                      barColor: Colors.green,
                      barValues: 50,
                      fullProgressColors: Colors.red,
                    ),
                    SimpleNewBarValue(
                      barColor: Colors.blue,
                      barValues: 100,
                      fullProgressColors: Colors.red,
                    ),
                  ],
                ),
              ),

Animated Stack Circular Progress #

 Center(
                child: AnimatedStackCircularProgressBar(
                  size: 200,
                  progressStrokeWidth: 15,
                  backStrokeWidth: 15,
                  startAngle: 0,
                  backColor: const Color(0xffD7DEE7),
                  bars: [
                    AnimatedBarValue(
                      barColor: Colors.red,
                      barValues: 100,
                      fullProgressColors: Colors.red,
                    ),
                    AnimatedBarValue(
                      barColor: Colors.green,
                      barValues: 70,
                      fullProgressColors: Colors.red,
                    ),
                    AnimatedBarValue(
                      barColor: Colors.blue,
                      barValues: 70,
                      fullProgressColors: Colors.red,
                    ),
                  ],
                ),
              ),

Gardient Animated Stack Circular Progress #

 Center(
                child: GardientStackCircularProgressBar(
                  size: 200,
                  progressStrokeWidth: 15,
                  backStrokeWidth: 15,
                  startAngle: 0,
                  mergeMode: true,
                  maxValue: 100,
                  backColor: const Color(0xffD7DEE7),
                  bars: [
                    GardientBarValue(
                      barColores: [
                        Colors.red,
                        Colors.blue,
                      ],
                      barValues: 70,
                      fullProgressColors: Colors.red,
                    ),
                    GardientBarValue(
                      barColores: [
                        Colors.blue,
                        Colors.yellow,
                      ],
                      barValues: 50,
                      fullProgressColors: Colors.yellow,
                    ),
                    GardientBarValue(
                      barColores: [
                        Colors.green,
                        Colors.orange,
                      ],
                      barValues: 70,
                      fullProgressColors: Colors.orange,
                    ),
                  ],
                ),
              ),

Support #

If you find any bugs or issues while using the plugin, please register an issues on GitHub. You can also contact us at [email protected].

Want to contribute #

If you would like to contribute to the plugin (e.g. by improving the documentation, solving a bug or adding a cool new feature), feel free to send your pull request.

Author #

This circular_progress_stack plugin for Flutter is developed by Trushar Mistry.