gradient_rect_slider_track_shape.dart 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. import 'package:flutter/material.dart';
  2. import 'package:flutter_screenutil/flutter_screenutil.dart';
  3. /// 自定义带有渐变的 Slider 轨道
  4. class GradientRectSliderTrackShape extends SliderTrackShape {
  5. const GradientRectSliderTrackShape();
  6. @override
  7. Rect getPreferredRect({
  8. required RenderBox parentBox,
  9. Offset offset = Offset.zero,
  10. required SliderThemeData sliderTheme,
  11. bool isEnabled = false,
  12. bool isDiscrete = false,
  13. }) {
  14. final double trackHeight = sliderTheme.trackHeight ?? 4;
  15. final double trackLeft = offset.dx;
  16. final double trackTop = offset.dy + (parentBox.size.height - trackHeight) / 2;
  17. final double trackWidth = parentBox.size.width;
  18. return Rect.fromLTWH(trackLeft, trackTop, trackWidth, trackHeight);
  19. }
  20. @override
  21. void paint(
  22. PaintingContext context,
  23. Offset offset, {
  24. required RenderBox parentBox,
  25. required SliderThemeData sliderTheme,
  26. required Animation<double> enableAnimation,
  27. required TextDirection textDirection,
  28. required Offset thumbCenter,
  29. bool isDiscrete = false,
  30. bool isEnabled = false,
  31. Offset? secondaryOffset,
  32. double additionalActiveTrackHeight = 0,
  33. }) {
  34. // 轨道矩形区域
  35. final Rect trackRect = getPreferredRect(
  36. parentBox: parentBox,
  37. offset: offset,
  38. sliderTheme: sliderTheme,
  39. isEnabled: isEnabled,
  40. isDiscrete: isDiscrete,
  41. );
  42. // 激活部分的宽度
  43. final activeRect = Rect.fromLTRB(
  44. trackRect.left,
  45. trackRect.top,
  46. thumbCenter.dx,
  47. trackRect.bottom,
  48. );
  49. // 非激活部分的宽度
  50. final inactiveRect = Rect.fromLTRB(
  51. thumbCenter.dx,
  52. trackRect.top,
  53. trackRect.right,
  54. trackRect.bottom,
  55. );
  56. final Canvas canvas = context.canvas;
  57. // 绘制激活部分(渐变)
  58. final activePaint = Paint()..shader = const LinearGradient(
  59. begin: Alignment(0.04, 0.21),
  60. end: Alignment(0.98, 0.76),
  61. colors: [Color(0xFFD5BAF8),Color(0xFFAA88FA) ],
  62. ).createShader(activeRect);
  63. // 绘制非激活部分
  64. final inactivePaint = Paint()
  65. ..color = sliderTheme.inactiveTrackColor ?? Colors.grey.shade200;
  66. // 圆角半径
  67. final radius = Radius.circular(trackRect.height / 2);
  68. // 绘制轨道
  69. canvas.drawRRect(
  70. RRect.fromRectAndRadius(inactiveRect, radius),
  71. inactivePaint,
  72. );
  73. canvas.drawRRect(
  74. RRect.fromRectAndRadius(activeRect, radius),
  75. activePaint,
  76. );
  77. }
  78. }