Skip to main content

Slider Thumb Shape Documentation

Overview​

The SliderThumbShape class defines a customizable circular thumb shape for sliders. It allows modifications such as border width, color, elevation, and pressed state behavior.

SliderThumbShape​

A flexible circular thumb shape for sliders with customizable properties.

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 its enabled or disabled state.

paint​

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

Usage Example​

SliderTheme(
  data: SliderTheme.of(context).copyWith(
    thumbShape: SliderThumbShape(
      enabledThumbRadius: 12.0,
      thumbBorderColor: Colors.white,
      thumbColor: Colors.blue,
      showThumbBorder: true,
      thumbBorderWidth: 2.0,
    ),
  ),
  child: Slider(
    value: 50.0,
    onChanged: (value) {},
    min: 0.0,
    max: 100.0,
  ),
)

Customization Options​

SliderThumbShape allows 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