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,
),
),
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.
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.
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.
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.
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 (), ),
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!
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;
});
},
),
),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With