CODEWITHSUNDEEP
flutterdart
Lalit Rawat
Lalit Rawat

Reputation: 1272

How to increase slider track width in flutter

image

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

Upvotes: 20

Views: 32639

Answers (7)

Donat Kabashi
Donat Kabashi

Reputation: 546

This simplified solution worked for me:

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

Upvotes: 14

saigopi.me
saigopi.me

Reputation: 14908

Wrap Slider with SliderThemeData and change trackHeight

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

Upvotes: 2

Himansa Eshan
Himansa Eshan

Reputation: 335

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

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

Upvotes: 7

user16332819
user16332819

Reputation: 11

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

Upvotes: 1

Tarique Naseem
Tarique Naseem

Reputation: 1856

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!

Upvotes: 11

Sachin
Sachin

Reputation: 479

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

Upvotes: 21

Matiullah Karimi
Matiullah Karimi

Reputation: 1314

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

Upvotes: 1

Related Questions