Skip to main content

Circle Thumb Shape & Range Slider Circular Thumb Documentation

Overview​

The CircleThumbShape and RangeSliderCircularThumb classes define custom thumb shapes for sliders. These provide enhanced appearance customization, including border width, color, shadow elevation, and pressed states.

CircleThumbShape​

A simple circular thumb shape for range sliders.

Parameters​

  • thumbRadius: Radius of the thumb (default: 10.0)

Methods​

getPreferredSize​

  • Returns the preferred size of the thumb shape based on the radius.

paint​

  • Paints the circular thumb with a green fill and a white border.

Usage Example​

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    thumbShape: CircleThumbShape(thumbRadius: 12.0),
  ),
  child: Slider(
    value: 50.0,
    onChanged: (value) {},
    min: 0.0,
    max: 100.0,
  ),
)

RangeSliderCircularThumb​

A customizable circular thumb shape for range sliders.

Parameters​

  • enabledThumbRadius: Radius of the thumb when enabled (default: 10.0)
  • disabledThumbRadius: Radius of the thumb when disabled (defaults to enabledThumbRadius)
  • thumbBorderWidth: Width of the border around the thumb
  • thumbBorderColor: Color of the border around the thumb
  • thumbColor: Fill color of the thumb
  • showThumbBorder: Whether to display a border around the thumb (default: false)
  • elevation: Shadow elevation when unpressed (default: 1.0)
  • pressedElevation: Shadow elevation when pressed (default: 6.0)

Methods​

getPreferredSize​

  • Determines the preferred size of the thumb based on enabled/disabled states.

paint​

  • Renders the thumb with a border (if enabled) and a customizable fill color.

Usage Example​

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    rangeThumbShape: RangeSliderCircularThumb(
      enabledThumbRadius: 12.0,
      thumbBorderColor: Colors.white,
      thumbColor: Colors.blue,
      showThumbBorder: true,
      thumbBorderWidth: 2.0,
    ),
  ),
  child: RangeSlider(
    values: RangeValues(20.0, 80.0),
    onChanged: (values) {},
    min: 0.0,
    max: 100.0,
  ),
)

Customization Options​

Both thumb shapes allow customization of:

  • Thumb size and color
  • Border width and color
  • Shadow elevation and pressed state behavior

Source Code Repository​

Find the full source code on GitHub: GitHub Repository