import 'package:flutter/material.dart'; import 'dart:math'; ThemeData blackSlider(BuildContext context) { return Theme.of(context).copyWith( sliderTheme: SliderThemeData( rangeThumbShape: const RectRangeSliderThumbShape(enabledThumbRadius: 8), thumbShape: const RectSliderThumbShape(enabledThumbRadius: 8), thumbColor: Colors.grey[800], activeTrackColor: Colors.grey[700], inactiveTrackColor: Colors.grey[400], activeTickMarkColor: Colors.white, inactiveTickMarkColor: Colors.white)); } class RectRangeSliderThumbShape extends RangeSliderThumbShape { const RectRangeSliderThumbShape({ this.enabledThumbRadius = 10.0, this.disabledThumbRadius, this.elevation = 1.0, this.pressedElevation = 6.0, }); final double enabledThumbRadius; final double? disabledThumbRadius; double get _disabledThumbRadius => disabledThumbRadius ?? enabledThumbRadius; final double elevation; final double pressedElevation; @override Size getPreferredSize(bool isEnabled, bool isDiscrete) { return Size.fromRadius( isEnabled == true ? enabledThumbRadius : _disabledThumbRadius); } @override void paint( PaintingContext context, Offset center, { required Animation activationAnimation, required Animation enableAnimation, bool isDiscrete = false, bool isEnabled = false, bool? isOnTop, required SliderThemeData sliderTheme, TextDirection? textDirection, Thumb? thumb, bool? isPressed, }) { assert(sliderTheme.showValueIndicator != null); assert(sliderTheme.overlappingShapeStrokeColor != null); final Canvas canvas = context.canvas; final Tween radiusTween = Tween( begin: _disabledThumbRadius, end: enabledThumbRadius, ); final ColorTween colorTween = ColorTween( begin: sliderTheme.disabledThumbColor, end: sliderTheme.thumbColor, ); final double radius = radiusTween.evaluate(enableAnimation); final Tween elevationTween = Tween( begin: elevation, end: pressedElevation, ); if (isOnTop ?? false) { final Paint strokePaint = Paint() ..color = sliderTheme.overlappingShapeStrokeColor! ..strokeWidth = 1.0 ..style = PaintingStyle.stroke; canvas.drawRect( Rect.fromCenter( center: center, width: 2 * radius, height: 2 * radius), strokePaint); } final Color color = colorTween.evaluate(enableAnimation)!; final double evaluatedElevation = isPressed! ? elevationTween.evaluate(activationAnimation) : elevation; final Path shadowPath = Path() ..addArc( Rect.fromCenter( center: center, width: 2 * radius, height: 2 * radius), 0, pi * 2); canvas.drawShadow(shadowPath, Colors.black, evaluatedElevation, true); canvas.drawRect( Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), Paint()..color = color, ); } } class RectSliderThumbShape extends SliderComponentShape { const RectSliderThumbShape({ this.enabledThumbRadius = 10.0, this.disabledThumbRadius, this.elevation = 1.0, this.pressedElevation = 6.0, }); final double enabledThumbRadius; final double? disabledThumbRadius; double get _disabledThumbRadius => disabledThumbRadius ?? enabledThumbRadius; final double elevation; final double pressedElevation; @override Size getPreferredSize(bool isEnabled, bool isDiscrete) { return Size.fromRadius( isEnabled == true ? enabledThumbRadius : _disabledThumbRadius); } @override void paint( PaintingContext context, Offset center, { required Animation activationAnimation, required Animation enableAnimation, required bool isDiscrete, required TextPainter labelPainter, required RenderBox parentBox, required SliderThemeData sliderTheme, required TextDirection textDirection, required double value, required double textScaleFactor, required Size sizeWithOverflow, }) { assert(sliderTheme.disabledThumbColor != null); assert(sliderTheme.thumbColor != null); final Canvas canvas = context.canvas; final Tween radiusTween = Tween( begin: _disabledThumbRadius, end: enabledThumbRadius, ); final ColorTween colorTween = ColorTween( begin: sliderTheme.disabledThumbColor, end: sliderTheme.thumbColor, ); final Color color = colorTween.evaluate(enableAnimation)!; final double radius = radiusTween.evaluate(enableAnimation); final Tween elevationTween = Tween( begin: elevation, end: pressedElevation, ); final double evaluatedElevation = elevationTween.evaluate(activationAnimation); final Path path = Path() ..addArc( Rect.fromCenter( center: center, width: 2 * radius, height: 2 * radius), 0, pi * 2); canvas.drawShadow(path, Colors.black, evaluatedElevation, true); canvas.drawRect( Rect.fromCenter(center: center, width: 2 * radius, height: 2 * radius), Paint()..color = color, ); } }