Ad

Flutter Slider Color

- 1 answer

How do we change color of slider circular icon when its inactive? When its in progress i can see property to change that but when i hit stop song and it goes back to normal it changes to gray. I am not setting anywhere gray not sure how do change that color. I have attached screenshot of both when its stopped and when song is playing.

 Widget slider1() {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        activeTrackColor: Colors.red[700],
        inactiveTrackColor: Colors.red[100],
        trackShape: RoundedRectSliderTrackShape(),
        trackHeight: 2.0,
        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
        thumbColor: Colors.redAccent,
        overlayColor: Colors.red.withAlpha(32),
        overlayShape: RoundSliderOverlayShape(overlayRadius: 18.0),
        tickMarkShape: RoundSliderTickMarkShape(),
        activeTickMarkColor: Colors.red[700],
        inactiveTickMarkColor: Colors.red[100],
        valueIndicatorShape: PaddleSliderValueIndicatorShape(),
        valueIndicatorColor: Colors.redAccent,
        valueIndicatorTextStyle: TextStyle(
          color: Colors.white,
        ),
      ),
      child: Slider(
          activeColor: Colors.red.withAlpha(64),
          inactiveColor: Colors.red[200],
          label: duration.inSeconds.toString(),
          min: 0.0,
          divisions: 10,
          max: (position.inSeconds ?? 0.0).toDouble(),
          value: (getSleepkerPosition(position.inSeconds, duration.inSeconds))
              .toDouble(),
          onChangeStart: (double value) {
            print('Start value is ' + value.toString());
          },
          onChangeEnd: (double value) {
            print('Finish value is ' + value.toString());
          },
          onChanged: (double value) {
            setState(() {
              if (value == position.inSeconds) {
              } else {
                seekToSecond(value.toInt());
                value = value;
              }
            });
          }),
    );
  }

enter image description here

enter image description here

Ad

Answer

I found the property, somehow its not mentioned in flutter details but to change disable thumb color we have to use.

disabledThumbColor: Colors.amber
Ad
source: stackoverflow.com
Ad