Ad

How To Customize My Slider Widget's Thumb Color In Flutter?

- 1 answer

I want to change the color of the circular part of my widget. This color should be different from the activeColor and inactiveColor colors. This is my current code:

Slider(
  value: sliderValue.toDouble(),
  max: 100.0,
  min: 0.0,
  activeColor: Colors.red,
  inactiveColor: Colors.grey,
  onChanged: (double newValue) {
    setState(() {
      sliderValue = newValue.round();
    });
  },
),

Below is the resulting slider:

enter image description here

This is my goal:

enter image description here

Help please.

Ad

Answer

I got the idea from all your answers. Thanks! Here is my resulting solution:

SliderTheme(
  data: SliderThemeData(
    thumbColor: Colors.red,
    activeTrackColor: Colors.white,
    inactiveTrackColor: Colors.grey,
  ),
  child: Slider(
    value: sliderValue.toDouble(),
    max: 100.0,
    min: 0.0,
    onChanged: (double newValue) {
      setState(() {
        sliderValue = newValue.round();
      });
    },
  ),
),
Ad
source: stackoverflow.com
Ad