How to evenly change track height for slider in Flutter?

Viewed 2236

My code:

          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(
                inactiveTrackColor: Color(0xff8d8e98),
                activeTrackColor: Colors.white,
                thumbColor: Color(0xffeb1555),
                overlayColor: Color(0x29eb1555),
                thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15),
                overlayShape: RoundSliderOverlayShape(overlayRadius: 30),
                trackHeight: 2,                                             
              ),
              child: Slider(
                value: 183,
                min: 10,
                max: 270,
                onChanged: (double value) {},
              ),
            ),
          ),

I got this:

bad

I expected this:

OK

How can I get it?

4 Answers

This is a liitle bit late, but, as I just solved that to myself, I thought it could be useful to others:

You should include, in the SliderTheme data the following:

trackShape: RectangularSliderTrackShape(),

And that is it, you will get both active and inactive track with the same height!

If you must use the RoundedRectSliderTrackShape() specifically as you need the rounded edge, then simply create a CustomTrackShape() and override the value of additionalActiveTrackHeight to 0.

class CustomTrackShape extends RoundedRectSliderTrackShape {
 
  @override
  void paint(PaintingContext context, Offset offset,
      {required RenderBox parentBox,
      required SliderThemeData sliderTheme,
      required Animation<double> enableAnimation,
      required TextDirection textDirection,
      required Offset thumbCenter,
      bool isDiscrete = false,
      bool isEnabled = false,
      double additionalActiveTrackHeight = 2}) {

    super.paint(context, offset,
        parentBox: parentBox,
        sliderTheme: sliderTheme,
        enableAnimation: enableAnimation,
        textDirection: textDirection,
        thumbCenter: thumbCenter,
        isDiscrete: isDiscrete,
        isEnabled: isEnabled,
        additionalActiveTrackHeight: 0);
  }

}

Just update trackHeight to 1. This would make it better.

Padding(
            padding: const EdgeInsets.symmetric(horizontal: 12),
            child: SliderTheme(
              data: SliderTheme.of(context).copyWith(
                inactiveTrackColor: Color(0xff8d8e98),
                activeTrackColor: Colors.white,
                thumbColor: Color(0xffeb1555),
                overlayColor: Color(0x29eb1555),
                thumbShape: RoundSliderThumbShape(enabledThumbRadius: 15),
                overlayShape: RoundSliderOverlayShape(overlayRadius: 30),
                trackHeight: 1,                                             
              ),
              child: Slider(
                value: 183,
                min: 10,
                max: 270,
                onChanged: (double value) {},
              ),
            ),
          ),

You can do it with

trackShape : RoundedRectSliderTrackShape()

.. but you'll have to look inside the widget and modify

double additionalActiveTrackHeight = 2,

to

double additionalActiveTrackHeight = 0,

Be careful, when you'll update Flutter, your modification should be gone, so you'll have to do it again.

Related