CODEWITHSUNDEEP
flutterdartslider
Vidal M.
Vidal M.

Reputation: 133

How can I make Custom Slider overlayColor different from thumbColor in flutter?

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

Upvotes: 1

Views: 1118

Answers (1)

Nagual
Nagual

Reputation: 2089

you need to change

overlayShape: RoundSliderThumbShape(enabledThumbRadius: 20.0),

to

overlayShape: RoundSliderOverlayShape(overlayRadius: 20.0),

pay attention - it must be an OVERLAY shape

Upvotes: 2

Related Questions