CODEWITHSUNDEEP
flutter
Jhon Jimenez
Jhon Jimenez

Reputation: 71

how to change padding or height in slider in flutter?

I want to change the height or padding of slider, I dont know what property is. But I can remove the margin on both sides and rounded borders but I don´t have an idea how to remove padding link

SliderTheme(
  data: SliderThemeData(
    disabledActiveTrackColor: Colors.blue,
    disabledInactiveTrackColor: Colors.black12,
    trackHeight: 3,
    thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0.0),
    trackShape: RoundSliderTrackShape(),
  ),
  child: Slider(
    value: 10,
    onChanged: null,
    min: 0,
    max: 100,
  ),
),

I use RoundSliderTrackShape class to remove the margins on both sides and rounded borders

Upvotes: 7

Views: 6506

Answers (3)

Muhammad Aamir
Muhammad Aamir

Reputation: 2676

This code snippet will help you to remove height and padding of slider.

Container(
            height: 10,
            child: SliderTheme(
              data: SliderThemeData(
                  trackHeight: 3,
                  thumbShape: SliderComponentShape.noThumb,
                trackShape: SliderCustomTrackShape()
              ),
              child: Slider(
                  value: 90,
                  min: 0,
                  max: 100,
                  divisions: 100,
                  activeColor: primaryColorFFF000,
                  inactiveColor: Colors.grey.withOpacity(.4),
                  label: '50',
                  onChanged: (double newValue) {

                  },
                  semanticFormatterCallback: (double newValue) {
                    return '${newValue.round()}';
                  }),
            ),
          )

Remove padding of slider SliderCustomTrackShape

class SliderCustomTrackShape
    extends RoundedRectSliderTrackShape {
  Rect getPreferredRect({
    required RenderBox parentBox,
    Offset offset = Offset.zero,
    required SliderThemeData sliderTheme,
    bool isEnabled = false,
    bool isDiscrete = false,
  }) {
    final double? trackHeight = sliderTheme.trackHeight;
    final double trackLeft = offset.dx;
    final double trackTop =
        offset.dy + (parentBox.size.height - trackHeight!) / 2;
    final double trackWidth = parentBox.size.width;
    return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  }
}

Preview

enter image description here

Upvotes: 6

Mohit Modh
Mohit Modh

Reputation: 361

wrap slider with container and give width and height.

 Container(
                height: 20,
                color: Colors.red,
                width: 300,
                child: Slider(
                    value: 10,
                    activeColor:Colors.green,
                    min: 0,
                    max: 30,
                    inactiveColor:Colors.grey[400],
                 
                ),
              ),

Upvotes: 0

Sub 6 Resources
Sub 6 Resources

Reputation: 1752

I'm not entirely sure what you're asking, but if you want to know how to change the height of the slider, you can do it with the trackHeight property:

SliderTheme(
      data: SliderThemeData(
        disabledActiveTrackColor: Colors.blue,
        disabledInactiveTrackColor: Colors.black12,
        trackHeight: 15, //<------Change this number here to change the height----
        thumbShape: RoundSliderThumbShape(enabledThumbRadius: 0.0),
        trackShape: RoundSliderTrackShape(),
      ),
      child: Slider(
        value: 10,
        onChanged: null,
        min: 0,
        max: 100,
      ),
    );

Upvotes: 0

Related Questions