Flutter学习----绘制slider的滑块形状

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Custom Slider with SVG Thumb')),
        body: Center(
          child: CustomSlider(),
        ),
      ),
    );
  }
}

class CustomSlider extends StatefulWidget {
  @override
  _CustomSliderState createState() => _CustomSliderState();
}

class _CustomSliderState extends State<CustomSlider> {
  double _value = 0.5;

  @override
  Widget build(BuildContext context) {
    return SliderTheme(
      data: SliderTheme.of(context).copyWith(
        overlayColor: Colors.red, // 覆盖层颜色，设置为透明表示不改变背景
        thumbShape:const SvgThumbShape(), // 自定义滑块形状
      ),
      child: Slider(
        value: _value,
        min: 0,
        max: 1,
        onChanged: (value) {
          setState(() {
            _value = value;
          });
        },
      ),
    );
  }
}

class SvgThumbShape extends SliderComponentShape {
  const SvgThumbShape();

  @override
  Size getPreferredSize(bool isEnabled, bool isDiscrete) {
    return const Size(32, 32); // 滑块的尺寸
  }

  @override
  Future<void> paint(PaintingContext context,
      Offset center, {
        required Animation<double> activationAnimation,
        required Animation<double> 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,
      }) async {
//     const String rawSvg = '''<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" class="design-iconfont">
//   <path d="M10 1A9 9 0 1 0 10 19A9 9 0 1 0 10 1Z" stroke="#3bbeff" stroke-width="2" fill="none"/>
//   <path transform="translate(5 5)" fill="#3bbeff" d="M5 0A5 5 0 1 0 5 10A5 5 0 1 0 5 0Z"/>
// </svg>''';
//
//     // 将 SVG 转换为 PictureInfo
//     const SvgStringLoader svgLoader = SvgStringLoader(rawSvg);
//     final PictureInfo pictureInfo = await vg.loadPicture(
//       svgLoader,
//       context as BuildContext?,
//     );
//     // context.canvas.drawPicture(pictureInfo.picture);
//
//
//     if (pictureInfo.picture == null) {
//       debugPrint("Failed to load SVG: Picture is null");
//       throw Exception("Failed to load SVG: Picture is null");
//     }
//     final pictureRecorder = PictureRecorder();
//     final canvas = Canvas(pictureRecorder);
//     // 绘制 SVG 图片到 Canvas
//     CustomSvgPainter cs = CustomSvgPainter(pictureInfo);
//     Size preferredSize = getPreferredSize(true, false);
//     cs.paint(canvas, preferredSize);
//     // 将 Canvas 内容绘制到滑块位置
//     canvas.save();
//     canvas.translate(center.dx, center.dy); // 调整位置
//     canvas.drawPicture(pictureRecorder.endRecording());
//     canvas.restore();
    // 设置圆角矩形的半径
    const radius = Radius.circular(10); // 圆角大小
    final thumbRRect = RRect.fromLTRBR(
      center.dx - 25, // 左边界
      center.dy - 25, // 上边界
      center.dx + 25, // 右边界
      center.dy + 25, // 下边界
      radius,
    );

    final Paint fillPaint = Paint()
      ..color = const Color(0xffffffff) // 白色填充
      ..style = PaintingStyle.fill; // 填充模式

    final Paint strokePaint = Paint()
      ..color = const Color(0xffE3EDFC)  // 黑色边框
      ..style = PaintingStyle.stroke // 描边模式
      ..strokeWidth = 2.0; // 边框宽度

     //先填充
    context.canvas.drawRRect(thumbRRect, fillPaint);
    // 再描边
    context.canvas.drawRRect(thumbRRect, strokePaint);
    // 绘制三条线
    final linePaint = Paint()
      ..color = const Color(0xffE3EDFC)   //#E3EDFC
      ..strokeWidth = 1.5;

    // 第一条线（水平）
    context.canvas.drawLine(
      Offset(center.dx - 15, center.dy-10),
      Offset(center.dx + 15, center.dy-10),
      linePaint,
    );

    // 第一条线（水平）
    context.canvas.drawLine(
      Offset(center.dx - 15, center.dy),
      Offset(center.dx + 15, center.dy),
      linePaint,
    );

    // 第一条线（水平）
    context.canvas.drawLine(
      Offset(center.dx - 15, center.dy+10),
      Offset(center.dx + 15, center.dy+10),
      linePaint,
    );
  }
}

class CustomSvgPainter extends CustomPainter {
  final PictureInfo pictureInfo;
  CustomSvgPainter(this.pictureInfo);
  @override
  void paint(Canvas canvas, Size size) {
    canvas.drawPicture(pictureInfo.picture);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}