How to add labels on top of the Flutter Slider?
In Flutter Slider, you can add labels on top of the slider by following the below steps.
Step 1: Add Syncfusion® Flutter Sliders package to your dependencies in pubspec.yaml file.
Step 2: Initialize the SfSlider widget as a child of any widget. Now, set the values for the SfSlider.min and SfSlider.max properties. The value of the SfSlider.value property should be given within the min and max values. Then, set the SfSlider.interval property which is mandatory to show the labels. Also, set the SfSlider.showLabels property to true.
Step 3: While interacting with the thumbs, the slider passes the new value to the SfSlider.onChanged callback but does not change its state until the parent widget rebuilds the slider with new value.
double _value = 6.0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfSlider(
min: 2.0,
max: 10.0,
value: _value,
interval: 2,
showLabels: true,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
);
}
Step 4: Now wrap the SfSlider widget inside the SfSliderTheme widget. Then, set the SfSliderThemeData to the SfSliderTheme.data property. Pass the necessary offset value to the SfSliderThemeData.labelOffset property to position the labels on the top.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfSliderTheme(
data: SfSliderThemeData(
labelOffset: Offset(0.0, -35.0),
),
child: SfSlider(
min: 2.0,
max: 10.0,
value: _value,
interval: 2,
showLabels: true,
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
),
);
}
Output
Check the below links for more features in Syncfusion® Flutter Sliders,
Live samples,
