paint method

  1. @override
void paint(
  1. PaintingContext context,
  2. Offset offset, {
  3. required RenderBox parentBox,
  4. required SliderThemeData sliderTheme,
  5. required Animation<double> enableAnimation,
  6. required Offset startThumbCenter,
  7. required Offset endThumbCenter,
  8. bool isEnabled = false,
  9. bool isDiscrete = false,
  10. required TextDirection textDirection,
  11. double additionalActiveTrackHeight = 3,
})
override

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

The context argument is the same as the one that includes the Slider's render box.

The offset argument is the offset of the origin of the parentBox to the origin of its context canvas. This shape must be painted relative to this offset. See PaintingContextCallback.

The parentBox argument is the RenderBox of the RangeSlider. Its attributes, such as size, can be used to assist in painting this shape.

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

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 startThumbCenter argument is the offset of the center of the start thumb relative to the origin of the PaintingContext.canvas. It can be used as one point that divides the track between inactive and active.

The endThumbCenter argument is the offset of the center of the end thumb relative to the origin of the PaintingContext.canvas. It can be used as one point that divides the track between inactive and active.

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

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 textDirection argument can be used to determine how the track segments are painted depending on whether they are on an active track segment or not.

The track segment between the two thumbs is the active track segment. The track segments between the thumb and each end of the slider are the inactive track segments. In TextDirection.ltr, the start of the slider is on the left, and in TextDirection.rtl, the start of the slider is on the right.

Implementation

@override
void paint(
  PaintingContext context,
  Offset offset, {
  required RenderBox parentBox,
  required SliderThemeData sliderTheme,
  required Animation<double> enableAnimation,
  required Offset startThumbCenter,
  required Offset endThumbCenter,
  bool isEnabled = false,
  bool isDiscrete = false,
  required TextDirection textDirection,
  double additionalActiveTrackHeight = 3,
}) {
  assert(sliderTheme.disabledActiveTrackColor != null);
  assert(sliderTheme.disabledInactiveTrackColor != null);
  assert(sliderTheme.activeTrackColor != null);
  assert(sliderTheme.inactiveTrackColor != null);
  assert(sliderTheme.rangeThumbShape != null);

  if (sliderTheme.trackHeight == null || sliderTheme.trackHeight! <= 0) {
    return;
  }
  var showScale = (sliderTheme as TDSliderThemeData).showScaleValue;
  // Assign the track segment paints, which are left: active, right: inactive,
  // but reversed for right to left text.
  final activeTrackColorTween = ColorTween(
    begin: sliderTheme.disabledActiveTrackColor,
    end: sliderTheme.activeTrackColor,
  );
  final inactiveTrackColorTween = ColorTween(
    begin: sliderTheme.disabledInactiveTrackColor,
    end: showScale ? trackColorWhenShowScale : sliderTheme.inactiveTrackColor,
  );
  final activePaint = Paint()
    ..color = activeTrackColorTween.evaluate(enableAnimation)!;
  final inactivePaint = Paint()
    ..color = inactiveTrackColorTween.evaluate(enableAnimation)!;

  final Offset leftThumbOffset;
  final Offset rightThumbOffset;
  switch (textDirection) {
    case TextDirection.ltr:
      leftThumbOffset = startThumbCenter;
      rightThumbOffset = endThumbCenter;
      break;
    case TextDirection.rtl:
      leftThumbOffset = endThumbCenter;
      rightThumbOffset = startThumbCenter;
      break;
  }
  final thumbSize =
      sliderTheme.rangeThumbShape!.getPreferredSize(isEnabled, isDiscrete);
  final thumbRadius = thumbSize.width / 2;
  assert(thumbRadius > 0);

  final trackRect = getPreferredRect(
    parentBox: parentBox,
    offset: offset,
    sliderTheme: sliderTheme,
    isEnabled: isEnabled,
    isDiscrete: isDiscrete,
  );

  final trackRadius = Radius.circular(trackRect.height / 2);

  context.canvas.drawRRect(
    RRect.fromLTRBAndCorners(
      trackRect.left - 12,
      trackRect.top,
      trackRect.right + 12,
      trackRect.bottom,
      topLeft: trackRadius,
      bottomLeft: trackRadius,
      topRight: trackRadius,
      bottomRight: trackRadius,
    ),
    inactivePaint,
  );
  var activeTrackRadius =
      Radius.circular(trackRect.height / 2 - additionalActiveTrackHeight);
  final inactiveSecondPaint = Paint()
    ..color = sliderTheme.inactiveTrackColor!;
  if (showScale) {
    context.canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        trackRect.left - 9,
        trackRect.top + additionalActiveTrackHeight,
        rightThumbOffset.dx,
        trackRect.bottom - additionalActiveTrackHeight,
        topLeft: activeTrackRadius,
        bottomLeft: activeTrackRadius,
      ),
      inactiveSecondPaint,
    );
  }
  context.canvas.drawRect(
    Rect.fromLTRB(
      leftThumbOffset.dx,
      trackRect.top + additionalActiveTrackHeight,
      rightThumbOffset.dx,
      trackRect.bottom - additionalActiveTrackHeight,
    ),
    activePaint,
  );
  if ((sliderTheme).showScaleValue) {
    context.canvas.drawRRect(
      RRect.fromLTRBAndCorners(
        rightThumbOffset.dx,
        trackRect.top + additionalActiveTrackHeight,
        trackRect.right + 9,
        trackRect.bottom - additionalActiveTrackHeight,
        topRight: activeTrackRadius,
        bottomRight: activeTrackRadius,
      ),
      inactiveSecondPaint,
    );
  }
}