circular_progress_stack 0.0.3 copy "circular_progress_stack: ^0.0.3" to clipboard
circular_progress_stack: ^0.0.3 copied to clipboard

This package use for easy to create multple and single circular progress bar. and you can set gradient and animatation duration.

Stack Circular Progress #


Platform License: MIT

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 #

Buy Me A Coffee

10
likes
130
pub points
80%
popularity

Publisher

unverified uploader

This package use for easy to create multple and single circular progress bar. and you can set gradient and animatation duration.

Homepage
Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on circular_progress_stack