Multi Circular Slider

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
• Basic Usage
• MultiCircularSlider parameters

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