[Flutter] is it possible to create shadow for inactive thumb in range slider?

my question is quite straightforward: is there any way to set a shadow with a blur around an inactive thumb of range slider? The problem is precisely in the inactive thumb of range slider and what I need is not an elevation or smth like this, but a shadow with a blur around thumb. I was able to create the desired shadow only for the active thumbs of the slider, but not for the inactive ones, that is, those that the user has not touched yet

The code:

class PriceRangeSlider extends StatelessWidget {
const PriceRangeSlider({
Key? key,
required this.currentRangeValues,
required this.onChanged,
required this.minPrice,
required this.maxPrice,
}) : super(key: key);

final RangeValues currentRangeValues;
final ValueChanged<RangeValues> onChanged;
final double minPrice;
final double maxPrice;

@override
Widget build(BuildContext context) {
final ThemeColors colors = context.colors;
final SliderThemeData sliderData = SliderTheme.of(context).copyWith(
activeTrackColor: colors.darkText,
inactiveTrackColor: colors.lightGrey,
trackHeight: Di.p4,
thumbColor: colors.contrastWhite,
thumbShape: CustomThumbShape(),
overlayShape: RoundSliderOverlayShape(overlayRadius: 0),
);

return Padding(
padding: const Pad(top: Di.p20),
child: SliderTheme(
data: sliderData,
child: RangeSlider(
values: currentRangeValues,
min: minPrice,
max: maxPrice,
onChanged: onChanged,
),
),
);
}
}

class CustomThumbShape extends SliderComponentShape {
@override
Size getPreferredSize(bool isEnabled, bool isDiscrete) {
return Size(24.0, 24.0);
}

@override
void paint(
PaintingContext context,
Offset offset,
{required Animation<double> activationAnimation,
required Animation<double> enableAnimation,
required bool isDiscrete,
required TextPainter labelPainter,
required RenderBox parentBox,
required Size sizeWithOverflow,
required SliderThemeData sliderTheme,
required TextDirection textDirection,
required double textScaleFactor,
required double value}) {

final Canvas canvas = context.canvas;


final double outerRadius = 16.0;
final double innerRadius = 12.0;

final Paint shadowPaint = Paint()
..color = Colors.black.withOpacity(0.4)
..style = PaintingStyle.fill;

final Paint outerPaint = Paint()
..color = Colors.red
..style = PaintingStyle.stroke
..strokeWidth = 2.0;


final Paint innerPaint = Paint()
..color = Colors.black
..style = PaintingStyle.fill;


canvas.drawCircle(offset, outerRadius + 6, shadowPaint);

canvas.drawCircle(offset, outerRadius, outerPaint);

canvas.drawCircle(offset, innerRadius, innerPaint);

final Offset inactiveOffset = Offset(offset.dx + 20, offset.dy);


final Paint inactiveShadowPaint = Paint()
..color = Colors.red.withOpacity(0.6)
..style = PaintingStyle.fill;


canvas.drawCircle(inactiveOffset, outerRadius + 45, inactiveShadowPaint);
canvas.drawCircle(inactiveOffset, outerRadius, outerPaint);

canvas.drawCircle(inactiveOffset, innerRadius, innerPaint);
}
}

Continue reading...