paint method

@override void paint(PaintingContext context, Offset center, { required Animation<double> activationAnimation, required Animation<double> enableAnimation, bool isDiscrete = false, bool isEnabled = false, bool? isOnTop, required SliderThemeData sliderTheme, TextDirection? textDirection, Thumb? thumb, bool? isPressed, })

Paints the thumb shape based on the state passed to it.

The context argument represents the RangeSlider's render box.

The center argument is the offset for where this shape's center should be painted. This offset is relative to the origin of the context canvas.

The activationAnimation argument is an animation triggered when the user begins to interact with the RangeSlider. It reverses when the user stops interacting with the slider.

The enableAnimation argument is an animation triggered when the RangeSlider is enabled, and it reverses when the slider is disabled. The RangeSlider is enabled when RangeSlider.onChanged is not null. Use this to paint intermediate frames for this shape when the slider changes enabled state.

The isDiscrete argument is true if RangeSlider.divisions is non-null. When true, the slider will render tick marks on top of the track.

The isEnabled argument is false when RangeSlider.onChanged is null and true otherwise. When true, the slider will respond to input.

If the isOnTop argument is true, this thumb is painted on top of the other slider thumb because this thumb is the one that was most recently selected.

The sliderTheme argument is the theme assigned to the RangeSlider that this shape belongs to.

The textDirection argument can be used to determine how the orientation of either slider thumb should be changed, such as drawing different shapes for the left and right thumb.

The thumb argument is the specifier for which of the two thumbs this method should paint (start or end).

The isPressed argument can be used to give the selected thumb additional selected or pressed state visual feedback, such as a larger shadow.

Implementation

@override
void paint(
  PaintingContext context,
  Offset center, {
  required Animation<double> activationAnimation,
  required Animation<double> enableAnimation,
  bool isDiscrete = false,
  bool isEnabled = false,
  bool? isOnTop,
  required SliderThemeData sliderTheme,
  TextDirection? textDirection,
  Thumb? thumb,
  bool? isPressed,
}) {
  String value;
  final Thumb _thumb = thumb ?? Thumb.start;
  switch (_thumb) {
    case Thumb.start:
      value = this.value.start.round().toString();
      break;
    case Thumb.end:
      value = this.value.end.round().toString();
      break;
  }

  final Canvas canvas = context.canvas;
  final ColorTween colorTween = ColorTween(
    begin: sliderTheme.disabledThumbColor,
    end: sliderTheme.thumbColor,
  );
  final Color color = colorTween.evaluate(enableAnimation)!;

  final paint = Paint()
    ..color = color //Thumb Background Color
    ..style = PaintingStyle.fill;

  final TextSpan span = TextSpan(
      style: TextStyle(
        fontSize: enabledThumbRadius * .8,
        fontWeight: FontWeight.w700,
        color: Colors.white, //Text Color of Value on Thumb
      ),
      text: value);

  final TextPainter tp = TextPainter(
      text: span,
      textAlign: TextAlign.center,
      textDirection: TextDirection.ltr);
  tp.layout();
  final Offset textCenter =
      Offset(center.dx - (tp.width / 2), center.dy - (tp.height / 2));

  canvas.drawCircle(center, enabledThumbRadius * .9, paint);
  tp.paint(canvas, textCenter);
}