Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to increase slider track width in flutter

Tags:

flutter

dart

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,
    ),
),
like image 642
Lalit Rawat Avatar asked Jul 30 '19 11:07

Lalit Rawat


People also ask

How do you change the slider color in flutter?

Slider Widget – Active Color, Inactive Color, Thumb Color We can change the active area of slider, inactive area of slider, and thumb color using activeColor , inactiveColor , and thumbColor properties of Slider class respectively.

How to use a slider in flutter?

A slider in Flutter is a material design widget used for selecting a range of values. It is an input widget where we can set a range of values by dragging or pressing on the desired position.

What is the track of a slider?

the track: the lane that the slider thumb slides along. the thumb: the shape that slides horizontally when the user drags it. the overlay: which appears around the thumb when this is dragged. Pimp my slider! By changing some values in SliderThemeData we can change it quite a lot.

Why is the thumb and overlay not working on my slider track?

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.

How to get maximum width of slider in Android?

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 SliderThemeData ( trackHeight: 2, // change height here ), child: Slider (), ),


2 Answers

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!

like image 182
Tarique Naseem Avatar answered Sep 27 '22 22:09

Tarique Naseem


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;
                  });
                },
              ),
            ),
          ),
like image 31
Sachin Avatar answered Sep 27 '22 22:09

Sachin