import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; /// 自定义带有渐变的 Slider 轨道 class GradientRectSliderTrackShape extends SliderTrackShape { const GradientRectSliderTrackShape(); @override Rect getPreferredRect({ required RenderBox parentBox, Offset offset = Offset.zero, required SliderThemeData sliderTheme, bool isEnabled = false, bool isDiscrete = false, }) { final double trackHeight = sliderTheme.trackHeight ?? 4; 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, required Animation enableAnimation, required TextDirection textDirection, required Offset thumbCenter, bool isDiscrete = false, bool isEnabled = false, Offset? secondaryOffset, double additionalActiveTrackHeight = 0, }) { // 轨道矩形区域 final Rect trackRect = getPreferredRect( parentBox: parentBox, offset: offset, sliderTheme: sliderTheme, isEnabled: isEnabled, isDiscrete: isDiscrete, ); // 激活部分的宽度 final activeRect = Rect.fromLTRB( trackRect.left, trackRect.top, thumbCenter.dx, trackRect.bottom, ); // 非激活部分的宽度 final inactiveRect = Rect.fromLTRB( thumbCenter.dx, trackRect.top, trackRect.right, trackRect.bottom, ); final Canvas canvas = context.canvas; // 绘制激活部分(渐变) final activePaint = Paint()..shader = const LinearGradient( begin: Alignment(0.04, 0.21), end: Alignment(0.98, 0.76), colors: [Color(0xFFD5BAF8),Color(0xFFAA88FA) ], ).createShader(activeRect); // 绘制非激活部分 final inactivePaint = Paint() ..color = sliderTheme.inactiveTrackColor ?? Colors.grey.shade200; // 圆角半径 final radius = Radius.circular(trackRect.height / 2); // 绘制轨道 canvas.drawRRect( RRect.fromRectAndRadius(inactiveRect, radius), inactivePaint, ); canvas.drawRRect( RRect.fromRectAndRadius(activeRect, radius), activePaint, ); } }