Circular Slider #

Preview #

[]

[Preview 1] [Preview 2]

Getting started #

• Installation
• Usage

Installation #

Add

dependencies:
  circular_slider: ^1.0.0

to your pubspec.yaml, and run

flutter packages get

in your project's root directory.

Usage #

Here is a basic usage of the widget:

CircularSlider(
  startAngle: 0.0, // from 0 to 2π, greater than endAngle
  endAngle: 3.141, // from 0 to 2π, less than startAngle
  strokeWidth: 24.0, // width of the track

  // required
  radius: 160,
  value: _value, // a value from 0.0 to 1.0
  knobBuilder: (context, angle) {
    return const Card(
      color: Colors.blue,
      shape: CircleBorder(),
    );
  },
  onChanged: (value) {
    // value obtained will always be between 0.0 and 1.0
    setState(() {
      _value = value;
    });
  },
)

The above implementation will look like this:

[Basic Usage]

Segments, Markers and Notches #

CircularSlider also provides these 3 parameter:

These allow you to customize your CircularSlider to be more informative to the user.

CircularSliderSegment

Segments can help you display different value ranges on your Slider.

CircularSliderMarker

Markers help indicate a position on your Slider. You can use an Icon or any other Widget. Use [lockRotation] to make the marker follow the Slider's path.

CircularSliderNotchGroup

Notches are minimalistic indicators for you Slider.

This depends on the value of [CircularSlider.steps] parameter if you use [stepIndex] your notches.

CircularSliderNotch