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: ^latest_version

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

ParameterDataTypeDefault ValueDescription
sizeSizethe space widget should take up on screen
valuesListpass different percentages you want to show which sum up to 1.0 or less
colorsListdifferent colors which you want to give to the progress bars (NOTE: length of values & colors should be same)
showTotalPercentagebooltruewhether to show total percentage in center or not
labelStringany label text which you want to show below total percentage
animationDurationDurationDuration(milliseconds: 500)the duration you want for the animation
animationCurveCurveCurves.easeInOutCubicthe curve you want for animation
innerIconWidgetthe icon which you can display above the total percentage text
innerWidgetWidgetthe widget you want to show inside the circular progress bar (NOTE : innerWidget will only de displayed if showTotalPercentage is false)
trackColorColorColors.greycolor of the track of progressBar
progressBarWidthdouble32.0stroke width of the progressBar
trackWidthdouble32.0stroke width of the progressBar track
labelTextStyleTextStyleTextStyle which you want to give to label
percentageTextStyleTextStyleTextStyle which you want to give to percentage

Libraries

multi_circular_slider