[Flutter] Extend and Round active and inactive Slider Track in Flutter

How can I extend the Inactive and Active track of the Slider class, so that it always "hugs" the thumb?

These images illustrate my intentions: Active Track around Thumb Inactive Track extended

My approach was to create a CustomTrackShape and put it in the trackShape: property of sliderTheme. I've tried countless examples provided by chatGPT which all failed. Like this:

class CustomTrackShape extends SliderTrackShape {
@override
Rect getPreferredRect({
required RenderBox parentBox,
Offset offset = Offset.zero,
required SliderThemeData sliderTheme,
bool isEnabled = false,
bool isDiscrete = false,
}) {
final double? trackHeight = sliderTheme.trackHeight;
final double trackLeft = offset.dx;
final double trackTop = offset.dy + (parentBox.size.height - trackHeight!) / 2;
final double trackWidth = parentBox.size.width;
return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
}

@override
void paint(
PaintingContext context,
Offset offset, {
required RenderBox parentBox,
required SliderThemeData sliderTheme,
Animation<double>? enableAnimation = const AlwaysStoppedAnimation(1.0),
required TextDirection textDirection,
bool isDiscrete = false,
bool isEnabled = false,
}) {
final Rect trackRect = getPreferredRect(parentBox: parentBox, offset: offset, sliderTheme: sliderTheme);

final ColorTween activeTrackColorTween = ColorTween(begin: sliderTheme.disabledActiveTrackColor, end: sliderTheme.activeTrackColor);
final ColorTween inactiveTrackColorTween = ColorTween(begin: sliderTheme.disabledInactiveTrackColor, end: sliderTheme.inactiveTrackColor);

final Paint activePaint = Paint()..color = activeTrackColorTween.evaluate(enableAnimation!)!;
final Paint inactivePaint = Paint()..color = inactiveTrackColorTween.evaluate(enableAnimation)!;

// Calculate the corner radius as half of the track height
final double radius = trackRect.height / 2;

// Draw the active track
context.canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromPoints(
Offset(trackRect.left, trackRect.center.dy - trackRect.height / 4),
Offset(trackRect.right, trackRect.center.dy + trackRect.height / 4),
),
Radius.circular(radius),
),
activePaint,
);

// Draw the inactive track
context.canvas.drawRRect(
RRect.fromRectAndRadius(
Rect.fromPoints(
Offset(trackRect.left, trackRect.center.dy - trackRect.height / 4),
Offset(trackRect.right, trackRect.center.dy + trackRect.height / 4),
),
Radius.circular(radius),
),
inactivePaint,
);
}
}


The error message is like this:

lib/main.dart:75:8: Error: The method 'CustomTrackShape.paint' has fewer named arguments than those of overridden method 'SliderTrackShape.paint'.
void paint(
^
../../flutter/packages/flutter/lib/src/material/slider_theme.dart:1090:8: Context: This is the overridden method ('paint').
void paint(
^
lib/main.dart:75:8: Error: The method 'CustomTrackShape.paint' doesn't have the named parameter 'secondaryOffset' of overridden method 'SliderTrackShape.paint'.
void paint(
^
../../flutter/packages/flutter/lib/src/material/slider_theme.dart:1090:8: Context: This is the overridden method ('paint').
void paint(
^


I expected it to compile in the first place and then customising the actual shapes.

Continue reading...