multi_circular_slider 1.1.0 copy "multi_circular_slider: ^1.1.0" to clipboard
multi_circular_slider: ^1.1.0 copied to clipboard

A Flutter package for Android, iOS & Web which helps creating multi-layered animated circular progress bar which can help display multiple values in a single bar.

Multi Circular Slider #

License: MIT

Pub Version

A highly customizable progress bar for Flutter which helps showing multiple values in single progress bar with different colors and also animate it for you.

Preview #

Getting Started #

Installation #

Add

dependencies:
  multi_circular_slider: ^1.1.0

to your pubspec.yaml, and run

flutter packages get

in your project's root directory.

Basic Usage #

Import it to your project file

import 'package:multi_circular_slider/multi_circular_slider.dart';

And add it in its most basic form like it:

MultiCircularSlider(
    size: MediaQuery.of(context).size.width * 0.8,
    progressBarType: MultiCircularSliderType.circular,
    values: [0.2, 0.1, 0.3, 0.25],
    colors: [Color(0xFFFD1960), Color(0xFF29D3E8), Color(0xFF18C737), Color(0xFFFFCC05)],
    showTotalPercentage: true,
),

There are additional optional parameters one can initialize the slider with.

MultiCircularSlider(
    size: MediaQuery.of(context).size.width * 0.8,
    progressBarType: MultiCircularSliderType.circular, // the type of indictor you want circular or linear
    values: [0.2, 0.1, 0.3, 0.25],
    colors: [Color(0xFFFD1960), Color(0xFF29D3E8), Color(0xFF18C737), Color(0xFFFFCC05)],
    showTotalPercentage: true, // to display total percentage in center
    label: 'This is label text', // label to display below percentage
    animationDuration: const Duration(milliseconds: 500), // duration of animation
    animationCurve: Curves.easeIn, // smoothness of animation
    innerIcon: Icon(Icons.integration_instructions), // to display some icon related to text
    innerWidget: Text('96%'), // to show custom innerWidget (to display set showTotalPercentage to false)
    trackColor: Colors.white, // to change color of track
    progressBarWidth: 52.0, // to change width of progressBar
    trackWidth: 52.0, // to change width of track
    labelTextStyle: TextStyle(), // to change TextStyle of label
    percentageTextStyle: TextStyle(), // to change TextStyle of percentage
);

MultiCircularSlider parameters #

Parameter DataType Default Value Description
size Size the space widget should take up on screen
values List pass different percentages you want to show which sum up to 1.0 or less
colors List different colors which you want to give to the progress bars (NOTE: length of values & colors should be same)
progressBarType MultiCircularSliderType to specify the type of progress indicator you want
showTotalPercentage bool true whether to show total percentage in center or not
label String any label text which you want to show below total percentage
animationDuration Duration Duration(milliseconds: 500) the duration you want for the animation
animationCurve Curve Curves.easeInOutCubic the curve you want for animation
innerIcon Widget the icon which you can display above the total percentage text
innerWidget Widget the widget you want to show inside the circular progress bar (NOTE : innerWidget will only de displayed if showTotalPercentage is false)
trackColor Color Colors.grey color of the track of progressBar
progressBarWidth double 32.0 stroke width of the progressBar
trackWidth double 32.0 stroke width of the progressBar track
labelTextStyle TextStyle TextStyle which you want to give to label
percentageTextStyle TextStyle TextStyle which you want to give to percentage
21
likes
130
pub points
83%
popularity

Publisher

unverified uploader

A Flutter package for Android, iOS & Web which helps creating multi-layered animated circular progress bar which can help display multiple values in a single bar.

Repository (GitHub)
View/report issues

Documentation

API reference

License

GPL-3.0 (LICENSE)

Dependencies

flutter

More

Packages that depend on multi_circular_slider