Flutter自定义圆形进度条：如何实现带3D阴影的复刻效果

我正在开发一个Flutter项目，需要复刻下图的圆形进度条：

我尝试使用CustomPainter实现，目前效果已相似，但缺少使目标进度条呈现3D立体感的阴影，整体偏扁平。以下是我的现有代码：

class GradientCirclePainter extends CustomPainter {
  final double progress;

  GradientCirclePainter({required this.progress});

  @override
  void paint(Canvas canvas, Size size) {

    final double innerRadius = size.width / 2 - 21;
    final double innerShadowRadius = size.width / 2 - 30;
    final double outerRadius = size.width / 2;

    final Rect rect = Rect.fromCircle(center: size.center(Offset.zero), radius: outerRadius);
    const double startAngle = -0.5 * pi;
    final double sweepAngle = 2 * pi * progress;

    final Paint trackPaint = Paint()
      ..strokeWidth = 20.0
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..color = const Color.fromARGB(255, 229, 234, 236);
      
    final Paint progressPaint = Paint()
      ..strokeWidth = 20.0
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..shader = const LinearGradient(
        colors: [Color(0xFFC2B18A), Color(0xFFA3906B)],
      ).createShader(Rect.fromCircle(center: size.center(Offset.zero), radius: size.width / 2));

    final Paint innerCirclePaint = Paint()
      ..strokeWidth = 20.0
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round
      ..color = const Color(0xFFF8F8FB);
      
    final Paint innerShadowPaint = Paint()
        ..shader = RadialGradient(
          center: Alignment.center,
          colors: [const Color(0xFFE4F3FB).withOpacity(0.2), Colors.transparent],
          stops: const [0.45, 1.0],
      ).createShader(Rect.fromCircle(center: size.center(Offset.zero), radius: outerRadius))
      ..maskFilter = const MaskFilter.blur(BlurStyle.normal, 5.0,);

    canvas.drawCircle(size.center(Offset.zero), innerShadowRadius, innerShadowPaint);
    canvas.drawCircle(size.center(Offset.zero), outerRadius, trackPaint);
    canvas.drawCircle(size.center(Offset.zero), innerRadius, innerCirclePaint);
    canvas.drawArc(rect, startAngle, sweepAngle, false, progressPaint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

class GradientCircle extends StatelessWidget {
  final double progress;

  const GradientCircle({super.key, required this.progress});

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: GradientCirclePainter(progress: progress),
      size: const Size(double.infinity, double.infinity), // Adjust the size as needed
    );
  }
}

当前实现效果如图：

希望得到帮助或提示，让进度条更接近目标样式，非常感谢！

内容的提问来源于stack exchange，提问作者gioravered