How to increase slider track width in flutter

Question

In SliderThemeData trackheight is given but I want to increase the track's width.

Here is my current code:

SliderTheme(
    data: SliderThemeData(
      trackHeight: 1,
    ),
    child: RangeSlider(
      min: 0.0, 
      max: 4.0,
      onChanged: _onChange,
      values: state.value,
      onChangeEnd: _onChangeEnd,
      inactiveColor: Colors.grey,
      activeColor: Theme.of(state.context).accentColor,
    ),
),

Answer 1

If I understand your question correctly, I think what you're referring to is the inherent padding on the left and right of the Slider widget itself.

This is down to the slider track needing space at either end of the track for the thumb and overlay.

You can override this using a with a custom RoundedRectSliderTrackShape and adding it to the trackShape: argument in the SliderThemeData.

An example on how to do this is described here on the Flutter issues page by @clocksmith. Basically, the code example is:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double _value = 0;

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Center(
        child: SliderTheme(
          data: SliderThemeData(
            trackShape: CustomTrackShape(),
          ),
          child: Slider(
            value: _value,
            onChanged: (double value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

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

Obviously, I take no credit for this. I was looking for a similar solution, when I came across this answer on the Flutter issues page. All credit to the original author!

Answer 2

You can use SliderTheme to customize the slider appearance and wrap Slider with Container to give custom width for the slider. It will take Container width as Slider width.

  SliderTheme(
            data: SliderTheme.of(context).copyWith(
              activeTrackColor: Colors.blue,
              inactiveTrackColor: Colors.blue,
              trackShape: RectangularSliderTrackShape(),
              trackHeight: 4.0,
              thumbColor: Colors.blueAccent,
              thumbShape: RoundSliderThumbShape(enabledThumbRadius: 12.0),
              overlayColor: Colors.red.withAlpha(32),
              overlayShape: RoundSliderOverlayShape(overlayRadius: 28.0),
            ),
            child: Container(
              width: 400,
              child: Slider(
                min: 0,
                max: 1000,
                divisions: 5,
                value: _currentFontSize,
                onChanged: (value) {
                  setState(() {
                    _currentFontSize = value;
                  });
                },
              ),
            ),
          ),

Answer 3

If you want to full width of parent.
Wrap with Expanded.

          Row(
            children: [
              Expanded(
                child: Slider(
                  value: 10,
                  onChanged: (val) {},
                  min: 0,
                  max: 100,
                ),
              ),
            ],
          )

Answer 4

This simplified solution worked for me:

 SliderTheme(
    data: SliderTheme.of(context).copyWith(
       overlayShape: SliderComponentShape.noOverlay,
    ),
    child: Slider(),
 )

Answer 5

RangeSlider changes its width according to its parent width, so wrap the RangeSlider with the container and give the container width property.

Container(
  width: 300,
  child: RangeSlider(
     min: 0.0,
     max: 4.0,
     onChanged: _onChange,
     values: state.value,
     onChangeEnd: _onChangeEnd,
     inactiveColor: Colors.grey,
     activeColor: Theme.of(state.context).accentColor,
  ),
),

Answer 6

If you want to fit the width of the Slider into app screen width then Wrap Slider with SliderTheme And set overlayShape: RoundSliderOverlayShape(overlayRadius: 0.0) to get maximum width of slider

Answer 7

Wrap Slider with SliderThemeData and change trackHeight

SliderThemeData(
        trackHeight: 2, // change height here
     ),
      child: Slider(),
    ),