sleek_circular_slider 1.0.7

Sleek circular slider/progress bar for Flutter #

License: MITAuthor's website

A highly customizable circular slider/progress bar for Flutter.

Example 01 Example 02 Example 03 Example 04 Example 05 Example 06 Example 07 Example 08

Getting Started #

Installation #


sleek_circular_slider : ^lastest_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:sleek_circular_slider/sleek_circular_slider.dart';

And add it in its most basic form like it:

final slider = SleekCircularSlider(
                      appearance: CircularSliderAppearance(),
                      onChange: (double value) {

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

final slider = SleekCircularSlider(
  min: 0,
  max: 1000,
  initialValue: 426,
  onChange: (double value) {
    // callback providing a value while its being changed (with a pan gesture)
  onChangeStart: (double startValue) {
    // callback providing a starting value (when a pan gesture starts)
  onChangeEnd: (double endValue) {
    // ucallback providing an ending value (when a pan gesture ends)
  innerWidget: (double value) {
    // use your custom widget inside the slider (gets a slider value from the callback)

Use as a progress bar #

Slider user's interaction will be disabled if there is either no [onChange] or [onChangeEnd] provided. That way one can use the widget not as a slider but as a progress bar.

final slider = SleekCircularSlider(
  appearance: CircularSliderAppearance(
    customWidths: CustomSliderWidths(progressBarWidth: 10)),
  min: 10,
  max: 28,
  initialValue: 14,

SleekCircularSlider parameters #

appearance CircularSliderAppearanceA set of objects describing the slider look and feel.
min double0The minimum value the user can select. Must be less than or equal to max.
max double100The maximum value the user can select. Must be greater than or equal to min.
initialValue double50The initial value for this slider.
onChange OnChange(double value)Called during a drag when the user is selecting a new value for the slider by dragging.
onChangeStart OnChange(double value)Called when the user starts selecting a new value for the slider.
onChangeEnd OnChange(double value)Called when the user is done selecting a new value for the slider.
innerWidget Widget InnerWidget(double value)A custom widget to replace the build in text labels which can capture a slider value from the callback.

CircularSliderAppearance parameters #

size double150The width & height value for the slider.
startAngle double150The angle (in degrees) the slider begins with.
angleRange double240The angle range (in degrees) the slider reaches when maximum value set.
customWidths CustomSliderWidthsThe object with a set of widths for the track, bar, shadow etc.
customColors CustomSliderColorsThe object with a set of colors for the track, bar, shadow etc.
infoProperties InfoPropertiesThe object with a set of properties for internal labels displaying a current slider value.
animationEnabled booltrueThe setting indicating whether external changes of a slider value should be animated.

CustomSliderWidths parameters #

trackWidth doubleprogressBarWidth / 4The width of the slider's track.
progressBarWidth doubleslider's size / 10The width of the slider's progress bar.
shadowWidth doubleprogressBarWidth * 1.4The width of the slider's shadow.
handlerSize doubleprogressBarWidth / 5The size of the slider's handler.

CustomSliderColors parameters #

trackColor Color#DCBEFBThe color of the slider's track.
progressBarColor ColorThe color of the slider's progress bar. Won't be used if the slider uses gradient progressBarColors != null
progressBarColors List[#1E003B, #EC008A, #6285DA]The list of colors for the progress bar's gradient.
gradientStartAngle double0The start angle for the progress bar's gradient.
gradientEndAngle double180The end angle for the progress bar's gradient.
dotColor Color#FFFFFFThe color of the slider's handle.
hideShadow boolfalseThe setting indicating whether the shadow should be showed.
shadowColor Color#2C57C0The color of the shadow.
shadowMaxOpacity double0.2The opacity of the shadow in its darker part.
shadowStep doubleThe shadow is being painted with a number of steps. This value determines how big is a width of each step. The more steps are painted the softer the shadow is. For a flat shadow use a difference between the shadowWidth and the progressWidth for the shadowStep.

InfoProperties parameters #

mainLabelStyle TextStyleThe text style of the main text widget displaying a slider's current value.
topLabelStyle TextStyleThe text style of the top text widget.
bottomLabelStyle TextStyleThe text style of the bottom text widget.
topLabelText StringThe text for the top text widget.
bottomLabelText StringThe text for the bottom text widget.
modifier String PercentageModifier(double percentage)closure adding the % characterThe closure allowing to modify how a current value of the slider is displayed.

Example of the modifier

 String percentageModifier(double value) {
    final roundedValue = value.ceil().toInt().toString();
    return '$roundedValue %';

It will convert a current value to int and add the % sufix to it.

YouTube video #

YouTube Video of the example in action

Todo #

  • [ ] add divisions;
  • [ ] add more comments to document the code;

Acknowledgments #

  • Hat tip to David Anaya for his awesome blog post about building a circular slider in Flutter and radian to degrees conversions which helped me a lot!

[1.0.0] - 2019-10-07.

  • Initial release of the circular slider for Flutter.

[1.0.1] - 2019-10-08.

  • Trying to figure out why Flutter Pub website doesn't display gifs in the

[1.0.2] - 2019-10-08.

  • Another attempt to fix gifs in the

[1.0.3] - 2019-10-08.

  • The last attempt to fix it by modifing the homepage in the pubspec.yaml

[1.0.4] - 2019-10-08.

  • Fixed a bug causing an exception to be thrown when onChangeStart or onChangeEnd were null

[1.0.5] - 2019-10-09.

  • Fixed a bug causing an exception to be thrown when there was the setState being called from the onChange closure

[1.0.6] - 2019-10-17.

  • Changes to the to fix a spelling in parameters and add some more claryfication about using the widges as a progress bar

[1.0.7] - 2019-10-19.

  • Simplified the constructor. There is no longer need to provide the CircularSliderAppearance if one wants to use the default one.


example #

A new Flutter project.

Getting Started #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:

  sleek_circular_slider: ^1.0.7

2. Install it

You can install packages from the command line:

with Flutter:

$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:

import 'package:sleek_circular_slider/sleek_circular_slider.dart';
Describes how popular the package is relative to other packages. [more]
Code health derived from static analysis. [more]
Reflects how tidy and up-to-date the package is. [more]
Weighted score of the above. [more]
Learn more about scoring.

We analyzed this package on Feb 21, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.5
  • Flutter: 1.12.13+hotfix.7

Health issues and suggestions

Document public APIs. (-0.24 points)

75 out of 77 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.


Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies