{"id":13684356,"url":"https://github.com/matthewfx/sleek_circular_slider","last_synced_at":"2026-02-25T04:43:19.766Z","repository":{"id":39458266,"uuid":"213297769","full_name":"matthewfx/sleek_circular_slider","owner":"matthewfx","description":"Sleek circular slider for Flutter","archived":false,"fork":false,"pushed_at":"2024-05-08T08:06:09.000Z","size":5245,"stargazers_count":524,"open_issues_count":56,"forks_count":102,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-11-12T05:37:21.024Z","etag":null,"topics":["android","circular-progress","customizable","dart","flutter","flutter-package","ios","slider"],"latest_commit_sha":null,"homepage":null,"language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/matthewfx.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-07T04:53:08.000Z","updated_at":"2024-10-12T16:03:22.000Z","dependencies_parsed_at":"2024-11-12T05:32:12.642Z","dependency_job_id":"d3a59a4d-c6e7-4785-b7e4-c62e7ae1a231","html_url":"https://github.com/matthewfx/sleek_circular_slider","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewfx%2Fsleek_circular_slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewfx%2Fsleek_circular_slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewfx%2Fsleek_circular_slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matthewfx%2Fsleek_circular_slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matthewfx","download_url":"https://codeload.github.com/matthewfx/sleek_circular_slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251777766,"owners_count":21642220,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","circular-progress","customizable","dart","flutter","flutter-package","ios","slider"],"created_at":"2024-08-02T14:00:32.579Z","updated_at":"2025-10-23T08:06:39.561Z","avatar_url":"https://github.com/matthewfx.png","language":"Dart","funding_links":[],"categories":["Dart","Packages"],"sub_categories":[],"readme":"# Sleek circular slider/progress bar \u0026 spinner for Flutter\n[![License: MIT](https://img.shields.io/badge/Licence-MIT-success.svg)](https://opensource.org/licenses/MIT)[![Author's website](https://img.shields.io/badge/Home-MN-blue.svg)](https://nuckowski.com)\n\nA highly customizable circular slider/progress bar \u0026 spinner for Flutter.\n\n![Example 01](doc/slider00.gif) ![Example 02](doc/slider01.gif)\n![Example 03](doc/slider02.gif) ![Example 04](doc/slider03.gif)\n![Example 05](doc/slider04.gif) ![Example 06](doc/slider05.gif)\n![Example 07](doc/slider06.gif) ![Example 08](doc/slider07.gif)\n![Example 09](doc/slider08.gif) ![Example 10](doc/slider09.gif)\n![Example 11](doc/slider10.gif) ![Example 12](doc/slider11.gif)\n\n## Getting Started\n\n- [Installation](#installation)\n- [Basic Usage](#basic-usage)\n- [SleekCircularSlider parameters](#sleekcircularslider-parameters)\n- [CircularSliderAppearance parameters](#circularsliderappearance-parameters)\n- [CustomSliderWidths parameters](#customsliderwidths-parameters)\n- [CustomSliderColors parameters](#customslidercolors-parameters)\n- [InfoProperties parameters](#infoproperties-parameters)\n- [YouTube video](#youtube-video)\n\n### Installation\n\nAdd\n\n```bash\n\nsleek_circular_slider : ^lastest_version\n\n```\n\nto your pubspec.yaml, and run\n\n```bash\nflutter packages get\n```\n\nin your project's root directory.\n\n### Basic Usage\n\n\nImport it to your project file\n\n```dart\nimport 'package:sleek_circular_slider/sleek_circular_slider.dart';\n```\n\nAnd add it in its most basic form like it:\n\n```dart\nfinal slider = SleekCircularSlider(\n                      appearance: CircularSliderAppearance(),\n                      onChange: (double value) {\n                        print(value);\n                      });\n```\n\nThere are additional optional parameters one can initialize the slider with.\n\n```dart\nfinal slider = SleekCircularSlider(\n  min: 0,\n  max: 1000,\n  initialValue: 426,\n  onChange: (double value) {\n    // callback providing a value while its being changed (with a pan gesture)\n  },\n  onChangeStart: (double startValue) {\n    // callback providing a starting value (when a pan gesture starts)\n  },\n  onChangeEnd: (double endValue) {\n    // ucallback providing an ending value (when a pan gesture ends)\n  },\n  innerWidget: (double value) {\n    // use your custom widget inside the slider (gets a slider value from the callback)\n  },\n);\n```\n\n### Use as a progress bar\nSlider 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.\n\n```dart\nfinal slider = SleekCircularSlider(\n  appearance: CircularSliderAppearance(\n    customWidths: CustomSliderWidths(progressBarWidth: 10)),\n  min: 10,\n  max: 28,\n  initialValue: 14,\n);\n```\n\n### Use as a spinner\nThere is one more use case for the library. It's a spinner which can be shown to users while loading etc. In this mode the widget is not interactive and ignores all angles so there is no need to provide them.\n\n```dart\nfinal slider = SleekCircularSlider(\n  appearance: CircularSliderAppearance(\n    spinnerMode: true,\n));\n```\n\n### SleekCircularSlider parameters\n\n\n| Parameter                 |                       Default                       | Description                                                                                                             |\n| :------------------------ | :-------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------- |\n| **appearance** *CircularSliderAppearance*    |                                                     | A set of objects describing the slider look and feel.                                                             |\n| **min** *double*                     |                         0                           | The minimum value the user can select.  Must be less than or equal to max. |\n| **max** *double*                     |                         100                         | The maximum value the user can select. Must be greater than or equal to min.  |\n| **initialValue** *double*            |                          50                         | The initial value for this slider.                       |\n| **onChange** *OnChange(double value)*|                                                     | Called during a drag when the user is selecting a new value for the slider by dragging. |\n| **onChangeStart** *OnChange(double value)* |                                               | Called when the user starts selecting a new value for the slider. |\n| **onChangeEnd**  *OnChange(double value)*  |                                                     | Called when the user is done selecting a new value for the slider. |\n| **innerWidget** *Widget InnerWidget(double value)* |                                       | A custom widget to replace the build in text labels which can capture a slider value from the callback. |\n\n\n\n### CircularSliderAppearance parameters\n\n| Parameter                 |                       Default                       | Description                                                                                                             |\n| :------------------------ | :-------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------- |\n| **size** *double*                    |                        150                          | The width \u0026 height value for the slider.                    |\n| **startAngle** *double*              |                        150                          | The angle (in degrees) the slider begins with.            |\n| **angleRange** *double*              |                        240                          | The angle range (in degrees) the slider reaches when maximum value set. |\n| **counterClockwise** *bool*          |                       false                         | The setting indicating direction of the widget.                         |\n| **customWidths** *CustomSliderWidths*|                                                     | The object with a set of widths for the track, bar, shadow etc.        |\n| **customColors** *CustomSliderColors*|                                                     | The object with a set of colors for the track, bar, shadow etc.        |\n| **infoProperties** *InfoProperties*  |                                                     | The object with a set of properties for internal labels displaying a current slider value. |\n| **animationEnabled** *bool*          |                       true                          | The setting indicating whether external changes of a slider value should be animated.  |\n| **spinnerMode** *bool*               |                       false                         | The setting turning the widget into a spinner.                        |\n| **spinnerDuration** *int*            |                        1500                         | The spinner animation duration in miliseconds                            |\n| **animDurationMultiplier** *double*  |                        1.0                          | The multiplier of duration for the animation when value changed                           |\n\n\n\n### CustomSliderWidths parameters\n\n| Parameter                 |                       Default                       | Description                                                                                                             |\n| :------------------------ | :-------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------- |\n| **trackWidth** *double*              |                progressBarWidth / 4                 | The width of the slider's track.                        |\n| **progressBarWidth** *double*        |                 slider's size / 10                  | The width of the slider's progress bar.                 |\n| **shadowWidth** *double*             |                progressBarWidth * 1.4               | The width of the slider's shadow.  |\n| **handlerSize** *double*             |                progressBarWidth / 5                 | The size of the slider's handler. |\n\n\n### CustomSliderColors parameters\n\n| Parameter                 |                       Default                       | Description                                                                                                             |\n| :------------------------ | :-------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------- |\n| **trackColor** *Color*               |                #DCBEFB                              | The color of the slider's track.                        |\n| **trackColors** *List\u003cColor\u003e*        |                  null                               | The list of colors for the track's gradient.                  |                 \n| **trackGradientStartAngle** *double* |                   0                                 | The start angle for the track's gradient.           |\n| **trackGradientEndAngle** *double*   |                  180                                | The end angle for the track's gradient.           |\n| **progressBarColor** *Color*         |                                                     | The color of the slider's progress bar. Won't be used if the slider uses gradient **progressBarColors != null**  |\n| **progressBarColors** *List\u003cColor\u003e*  |      [#1E003B, #EC008A, #6285DA]                    | The list of colors for the progress bar's gradient.       |\n| **gradientStartAngle** *double*      |                   0                                 | The start angle for the progress bar's gradient.           |\n| **gradientEndAngle** *double*        |                  180                                | The end angle for the progress bar's gradient.           |\n| **dynamicGradient** *bool*           |                  false                              | The gradient angles will change dynamically with value changing. If true it will ignore both the grandientStartAngle and gradientEndAngle          |\n| **dotColor** *Color*                 |                #FFFFFF                              | The color of the slider's handle.                       |\n| **hideShadow** *bool*                |                  false                              | The setting indicating whether the shadow should be showed. |\n| **shadowColor** *Color*              |                #2C57C0                              | The color of the shadow. |\n| **shadowMaxOpacity** *double*        |                    0.2                              | The opacity of the shadow in its darker part.             |\n| **shadowStep** *double*              |                                                     | The 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**.|\n\n\n### InfoProperties parameters\n\n| Parameter                 |                       Default                       | Description                                                                                                             |\n| :------------------------ | :-------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------- |\n| **mainLabelStyle** *TextStyle*       |                                                     | The text style of the main text widget displaying a slider's current value.     |\n| **topLabelStyle** *TextStyle*        |                                                     | The text style of the top text widget.                   |\n| **bottomLabelStyle** *TextStyle*     |                                                     | The text style of the bottom text widget.                |\n| **topLabelText** *String*            |                                                     | The text for the top text widget.                           |\n| **bottomLabelText** *String*         |                                                     | The text for the bottom text widget.                    |\n| **modifier** *String PercentageModifier(double percentage)* | closure adding the **%** character | The closure allowing to modify how a current value of the slider is displayed. |\n\n**Example of the modifier**\n ```dart \n String percentageModifier(double value) {\n    final roundedValue = value.ceil().toInt().toString();\n    return '$roundedValue %';\n  }\n``` \nIt will convert a current value to *int* and add the **%** sufix to it.\n\n### YouTube video\n\n[![YouTube Video of the example in action](https://img.youtube.com/vi/ECXdRYs89QY/0.jpg)](https://youtu.be/ECXdRYs89QY)\n\n## Todo\n\n- [ ] add divisions\n\n- [ ] add more comments to document the code\n\n- [x] add the counterclockwise direction\n\n- [x] add the spinner mode\n\n- [ ] add the second handle (interval selection)\n\n- [ ] add text labels on a curved path\n\n\n## Acknowledgments\n\n* Hat tip to David Anaya for his awesome [blog post](https://www.davidanaya.io/flutter/circular-slider.html) about building a circular slider in Flutter and radian to degrees conversions which helped me a lot!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewfx%2Fsleek_circular_slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatthewfx%2Fsleek_circular_slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatthewfx%2Fsleek_circular_slider/lists"}