How to draw a custom divisor in Flutter slider?
In Flutter Slider, you can customize the thumb shape by following these steps:
Step 1: Add the Syncfusion® Flutter Sliders package to your dependencies in the 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 SfSlider.value property value should be between the min and max values. Set the _CustomDivisorShape() to the divisorShape property.
double _value = 40.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.all(12.0),
child: Text('Volume', style: Theme.of(context).textTheme.headline5),
),
Row(
children: [
Expanded(
child: SfSliderTheme(
data: SfSliderThemeData(
activeTrackColor: Colors.transparent,
inactiveTrackColor: Colors.transparent,
overlayRadius: 0,
thumbRadius: 0,
),
child: Padding(
padding: const EdgeInsets.only(left: 12.0),
child: SfSlider(
min: 0,
max: 100,
showDividers: true,
interval: 2,
dividerShape: _CustomDivisorShape(),
value: _value,
onChanged: (dynamic value) {
setState(() {
_value = value;
});
},
),
),
),
),
Padding(
padding: const EdgeInsets.only(left: 12.0),
child: SizedBox(
width: 50,
height: 30,
child: Text(
_value.toInt().toString(),
style: Theme.of(context).textTheme.headline5,
),
),
)
],
),
],
),
);
}
Step 3: Create a custom shape class and extend it from the SfDivisorShape class. Override the SfDivisorShape.paint() method to draw the desired shape. We have used this to create a volume slider.
class _CustomDivisorShape extends SfDividerShape {
@override
void paint(PaintingContext context, Offset center, Offset? thumbCenter,
Offset? startThumbCenter, Offset? endThumbCenter,
{required RenderBox parentBox,
required SfSliderThemeData themeData,
SfRangeValues? currentValues,
dynamic currentValue,
required Paint? paint,
required Animation<double> enableAnimation,
required TextDirection textDirection}) {
bool isActive = startThumbCenter != null
? center.dx >= startThumbCenter.dx && center.dx <= endThumbCenter!.dx
: center.dx <= thumbCenter!.dx;
paint = Paint()..strokeWidth = 5.0;
final Color begin = isActive
? themeData.disabledActiveDividerColor!
: themeData.disabledInactiveDividerColor!;
final Color end = isActive ? Colors.orange[900]! : Colors.black45;
paint.color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
if (isActive) {
// Draw active divisor.
context.canvas.drawLine(center, Offset(center.dx, center.dy - 20), paint);
context.canvas.drawLine(center, Offset(center.dx, center.dy + 20), paint);
} else {
// Draw inactive divisor.
context.canvas.drawLine(center, Offset(center.dx, center.dy - 3), paint);
context.canvas.drawLine(center, Offset(center.dx, center.dy + 3), paint);
}
}
}
Output
Check the following links for more features in Syncfusion® Flutter Sliders:
Live samples
