I need to make an slider, that slider works perfectly, it has its divisions, but the thing that I need to do is set numbers in each division, I mean, if the slider has 3 divisions, set numbers, 1, 2, 3, something kind of:
1 2 3
---|---|---|---
Is there a way to do that?
The code that I am using is this one:
Slider(
value: _place.value,
min: 0.0,
max: 10.0,
divisions: 10,
onChangeStart: (double value) {
print('Start value is ' + value.toString());
},
onChangeEnd: (double value) {
print('Finish value is ' + value.toString());
},
onChanged: (double value) {
if (vm.isRatingPlace) {
setState(() {
_place.value = value;
});
}
},
activeColor: HeatMapColors.getOnFireColor(_place.value),
inactiveColor: Colors.black45,
))
You could use a Column
and draw the values at the top, check this example :
double value = 0.0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: List.generate(10, (index) => Text("$index")),
),
),
Slider(
value: value,
min: 0.0,
max: 10.0,
divisions: 10,
onChangeStart: (double value) {
print('Start value is ' + value.toString());
},
onChangeEnd: (double value) {
print('Finish value is ' + value.toString());
},
onChanged: (double newValue) {
setState(() {
value = newValue;
});
},
activeColor: Colors.blue,
inactiveColor: Colors.black45,
),
],
));
}
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