How to draw custom ticks in Flutter Slider (SfSlider) ?
In Syncfusion® Flutter Sliders, you can customize the major and minor ticks. This article demonstrates how to achieve custom tick styling by extending the slider's shape classes.
Step 1: Extend SfTickShape and SfThumbShape to create a custom class for major tick, minor tick, and thumb customization. In this example, we'll render customized ticks using the SfTickShape class and create a line-shaped thumb instead of the default circle-shaped thumb.
class _SfTickShape extends SfTickShape {
@override
void paint(PaintingContext context, Offset offset, Offset? thumbCenter,
Offset? startThumbCenter, Offset? endThumbCenter,
{required RenderBox parentBox,
required SfSliderThemeData themeData,
SfRangeValues? currentValues,
dynamic currentValue,
required Animation<double> enableAnimation,
required TextDirection textDirection}) {
final Size tickSize = Size(2, 40);
// Apply active and inactive tick color based on the thumb position.
final bool isTickRightOfThumb = offset.dx > thumbCenter!.dx;
// The ticks positioned before the thumb position is set to activeTickColor
// and the tick positioned after the thumb position is set to
// inactiveTickColor.
final Color color = isTickRightOfThumb
? themeData.inactiveTickColor
: themeData.activeTickColor;
final Paint paint = Paint()
..isAntiAlias = true
..strokeWidth = tickSize.width
..color = color;
context.canvas.drawLine(
Offset(offset.dx, offset.dy - themeData.activeTrackHeight - tickSize.height),
Offset(offset.dx, offset.dy + tickSize.height),
paint);
}
}
class _SfMinorTickShape extends SfTickShape {
int count = -1;
@override
void paint(PaintingContext context, Offset offset, Offset? thumbCenter,
Offset? startThumbCenter, Offset? endThumbCenter,
{required RenderBox parentBox,
required SfSliderThemeData themeData,
SfRangeValues? currentValues,
dynamic currentValue,
required Animation<double> enableAnimation,
required TextDirection textDirection}) {
count++;
// Every fourth minor tick will be drawn larger, while the remaining three
// minor ticks will be drawn smaller. This pattern will be followed until
// the value of minorTicksPerInterval property. This count field is used
// to identify every fourth minor tick.
if (count > 3) {
count = 0;
}
final Size minorTickSize = Size(2, 10);
final bool isMinorTickRightOfThumb = offset.dx > thumbCenter!.dx;
// The minor ticks positioned before the thumb position is set to
// activeTickColor and the minor ticks positioned after the thumb position
// is set to inactiveTickColor.
final Color color = isMinorTickRightOfThumb
? themeData.inactiveMinorTickColor
: themeData.activeMinorTickColor;
final Paint paint = Paint()
..isAntiAlias = true
..strokeWidth = minorTickSize.width
..color = color;
double offsetStartY = offset.dy - minorTickSize.height - themeData.activeTrackHeight;
double offsetEndY = offset.dy + minorTickSize.height;
context.canvas.drawLine(
Offset(offset.dx, count == 3 ? offsetStartY - 5 : offsetStartY),
Offset(offset.dx, count == 3 ? offsetEndY + 5 : offsetEndY),
paint);
}
}
class _SfThumbShape extends SfThumbShape {
@override
void paint(PaintingContext context, Offset center,
{required RenderBox parentBox,
required RenderBox? child,
required SfSliderThemeData themeData,
SfRangeValues? currentValues,
dynamic currentValue,
required Paint? paint,
required Animation<double> enableAnimation,
required TextDirection textDirection,
required SfThumb? thumb}) {
final Size thumbSize = Size(2, 60);
Paint paint = Paint()
..color = themeData.activeTrackColor!
..style = PaintingStyle.fill
..strokeWidth = 2;
context.canvas.drawLine(
Offset(center.dx, center.dy - thumbSize.height),
Offset(center.dx, center.dy + thumbSize.height),
paint);
}
}
Step 2: Set the above custom classes to the tickShape, minorTickShape, and thumbShape properties in the SfSlider as shown in the below snippet. Also, set the overlayRadius property to zero to avoid thumb overlay while customizing the thumb.
double _value = 50;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfSliderTheme(
data: SfSliderThemeData(overlayRadius: 0),
child: SfSlider(
min: 0,
max: 100,
value: _value,
interval: 50,
showTicks: true,
minorTicksPerInterval: 20,
tickShape: _SfTickShape(),
minorTickShape: _SfMinorTickShape(),
thumbShape: _SfThumbShape(),
onChanged: (dynamic newValue) {
setState(() {
_value = newValue;
});
},
),
),
);
}
Check the below links for more features in Syncfusion® Flutter Sliders
- Syncfusion® Flutter Slider product page
- User guide documentation for Syncfusion® Flutter Slider
- pub.dev
Live Samples
Blogs about Flutter Slider
- Introducing a vertical slider and vertical range slider in Flutter
- Create Flutter Radial Range Sliders Using Radial Gauge
Conclusion
I hope you enjoyed learning how to draw custom ticks in Flutter Slider (SfSlider).
You can refer to our Flutter Slider feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Flatter Slider example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
