Ad

How Can I Make Custom Slider OverlayColor Different From ThumbColor In Flutter?

- 1 answer

Im trying to implement a custom slider in flutter using SliderTheme.of(context).copywith(), but when assigning colors to thumb and its overlay, they both becomes the same thumbColor.

This is my result

Custom slider achieved

My code is:

SliderTheme(
    data: SliderTheme.of(context).copyWith(
       activeTrackColor: Colors.white,
      thumbColor: Color(0xffeb1555),
      overlayColor: Color(0x29eb1555),
      thumbShape:
          RoundSliderThumbShape(enabledThumbRadius: 10.0),
      overlayShape:
          RoundSliderThumbShape(enabledThumbRadius: 20.0),
    ),
    child: Slider(
      value: height.toDouble(),
      min: 100.0,
      max: 220.0,
      divisions: 120,
      onChanged: (double newVal) {
        setState(() {
          height = newVal.toInt();
        });
      },
    ),
  ),

Any help welcome. Thank you

Ad

Answer

you need to change

overlayShape: RoundSliderThumbShape(enabledThumbRadius: 20.0),

to

overlayShape: RoundSliderOverlayShape(overlayRadius: 20.0),

pay attention - it must be an OVERLAY shape

Ad
source: stackoverflow.com
Ad