How to set custom tickMarkShape in flutter slider widget - flutter

Question

I am trying to make custom tickMarkShape in my flutter project. From docs, I read that it is possible to control tick mark shape with SliderTickMarkShape. But it gives me only one option SliderTickMarkShape.noTickMark which removes the tick mark shape, but I would like to make it like a stick. So how can I set custom tick mark shape in flutter?. Thanks in advance.

Answer 1

In order to customize the tick as the following image:
You need to extend SliderTickMarkShape. In this case I called LineSliderTickMarkShape. Below is the source code but it is basically a copy of RoundSliderTickMarkShape, it just changes the context.canvas.drawLine line to customize the shape of the mark. RoundSliderTickMarkShape is the default one.
class LineSliderTickMarkShape extends SliderTickMarkShape {
const LineSliderTickMarkShape({
this.tickMarkRadius,
});
final double? tickMarkRadius;
#override
Size getPreferredSize({
required SliderThemeData sliderTheme,
required bool isEnabled,
}) {
assert(sliderTheme != null);
assert(sliderTheme.trackHeight != null);
assert(isEnabled != null);
return Size.fromRadius(tickMarkRadius ?? sliderTheme.trackHeight! / 4);
}
#override
void paint(
PaintingContext context,
Offset center, {
required RenderBox parentBox,
required SliderThemeData sliderTheme,
required Animation<double> enableAnimation,
required TextDirection textDirection,
required Offset thumbCenter,
required bool isEnabled,
}) {
Color? begin;
Color? end;
switch (textDirection) {
case TextDirection.ltr:
final bool isTickMarkRightOfThumb = center.dx > thumbCenter.dx;
begin = isTickMarkRightOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
end = isTickMarkRightOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
break;
case TextDirection.rtl:
final bool isTickMarkLeftOfThumb = center.dx < thumbCenter.dx;
begin = isTickMarkLeftOfThumb ? sliderTheme.disabledInactiveTickMarkColor : sliderTheme.disabledActiveTickMarkColor;
end = isTickMarkLeftOfThumb ? sliderTheme.inactiveTickMarkColor : sliderTheme.activeTickMarkColor;
break;
}
final Paint paint = Paint()..color = ColorTween(begin: begin, end: end).evaluate(enableAnimation)!;
final double tickMarkRadius = getPreferredSize(
isEnabled: isEnabled,
sliderTheme: sliderTheme,
).width / 2;
if (tickMarkRadius > 0) {
context.canvas.drawLine(Offset(center.dx - 5, center.dy - 5), Offset(center.dx + 5, center.dy + 5), paint);
}
}
}
Once LineSliderTickMarkShape is defined, you can use it to customize your Slider like this:
#override
Widget build(BuildContext context) {
return SliderTheme(
data: SliderTheme.of(context).copyWith(
trackHeight: 20,
tickMarkShape: const LineSliderTickMarkShape()
),
child: Slider(
...