Flutter 上的曲线进度条

Question

我很难尝试创建此设计：

有人知道如何创建这种类型的进度条吗？

我从一些 Canvas 和那些困难的东西开始，但我真的不知道该怎么做

编辑：我正在使用这段代码来绘画（背景是正确的）：

  drawBackgroundBar(Canvas canvas, Size size){
    const backgroundColor = Color(0xFFFFEEE9);

    // Set style to paint
    var paint = Paint()
      ..color = backgroundColor
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;


    var startPoint = Offset(0, size.height / 2);
    var endPoint = Offset(size.width, size.height / 2);

    // This control points help the bezier curve
    var controlPoint1 = Offset(size.width / 4, size.height);
    var controlPoint2 = Offset(3 * size.width / 4, size.height);

    var path = Path();

    // Move draw to start point
    path.moveTo(startPoint.dx, startPoint.dy);

    // Move draw to end point making the bezier curve
    path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
        controlPoint2.dy, endPoint.dx, endPoint.dy);

    canvas.drawPath(path, paint);
  }



  drawActiveBar(Canvas canvas, Size size){
    const activeColor = Color(0xFFFF8875);
    final width = (size.width * value)/total;

    // Set style to paint
    var paint = Paint()
      ..color = activeColor
      ..strokeWidth = 5
      ..style = PaintingStyle.stroke
      ..strokeCap = StrokeCap.round;


    var startPoint = Offset(0, size.height / 2);
    var endPoint = Offset(width, size.height);

    // This control points help the bezier curve
    var controlPoint1 = Offset(width / 4, size.height);
    var controlPoint2 = Offset(3 * width / 4, size.height);

    var path = Path();

    // Move draw to start point
    path.moveTo(startPoint.dx, startPoint.dy);

    // Move draw to end point making the bezier curve
    path.cubicTo(controlPoint1.dx, controlPoint1.dy, controlPoint2.dx,
        controlPoint2.dy, endPoint.dx, endPoint.dy);

    canvas.drawPath(path, paint);
  }