Stack Circular Progress

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

Screenshots

Stack Circular

Simple Cricular Porgress	Animated Cricular Porgress	Gradient Cricular Porgress

Single Circular

Simple Cricular Porgress	Animated Cricular Porgress	Gradient Cricular Porgress

Getting started

Installing

dependencies:
  circular_progress_stack: ^0.0.3

Import

import 'package:circular_progress_stack/circularprogressstack.dart';

Example

Stack Circular

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

Single Circular

Simple Stack Circular Progress

Center(
      child: SingleSimpleStackCircularProgressBar(
        size: 200,
        progressStrokeWidth: 15,
        backStrokeWidth: 15,
        startAngle: 0,
        backColor: Color(0xffD7DEE7),
        barColor: Colors.red,
        barValue: 70,
      ),
    );

Animated Stack Circular Progress

 Center(
      child: SingleAnimatedStackCircularProgressBar(
        size: 200,
        progressStrokeWidth: 15,
        backStrokeWidth: 15,
        startAngle: 0,
        backColor: Color(0xffD7DEE7),
        barColor: Colors.blue,
        barValue: 70,
      ),
    );

Gardient Animated Stack Circular Progress

Center(
      child: SingleGradientStackCircularProgressBar(
        size: 200,
        progressStrokeWidth: 15,
        backStrokeWidth: 15,
        startAngle: 0,
        mergeMode: true,
        maxValue: 100,
        backColor: Color(0xffD7DEE7),
        barColores: [Colors.red, Colors.blue, Colors.green],
        fullProgressColor: Colors.green,
        barValue: 99,
      ),
    );

Support

If you find any bugs or issues while using the plugin, please register an issues on GitHub. You can also contact us at mistrytrushar88@gmail.com.

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.

Buy Me A Coffee