How to evenly change track height for slider in Flutter?

Question

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:

I expected this:

How can I get it?

Solution 1

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!

Solution 2

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);
  }

}

Solution 3

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) {},
              ),
            ),
          ),

Comments

[Zihan]

This does not match the height of both tracks. Can u please explain?

[nagendra nag]

do you have any idea how can we update flutter default code?

[Jerbs]

check the answer above by @TheMisplacedMechEngineer, he gave a better answer than me

[nagendra nag]

yeah!. I have tried that one but getting errors.

[nagendra nag]

when I use this code I am getting errors. Error: The argument type 'TextDirection/*1*/' can't be assigned to the parameter type 'TextDirection/*2*/'. - 'TextDirection/*1*/' is from 'package:intl/src/intl/text_direction.dart' ('../../.pub-cache/hosted/pub.dartlang.org/intl-0.17.0/lib/s‌​rc/intl/text_directi‌​on.dart'). - 'TextDirection/*2*/' is from 'dart:ui'. textDirection: textDirection,

[Jerbs]

try that import 'package:intl/intl.dart' hide TextDirection;

[nagendra nag]

getting same issue

[nagendra nag]

working fine now. previously I have written in the same file. when I change the code to a new file this issue was resolved.

[nagendra nag]

issue resolved.