在Flutter中使用CustomPainter的矩形进度条

Question

class PointPainter extends CustomPainter {
  final double percentage;
  final String today;
  final double _goal;
  PointPainter(this.percentage, this.today, this._goal);

  @override
  void paint(Canvas canvas, Size size) {
    print(size.height);
    Color _color = percentage >= 60.00 ? Colors.green : 
    Colors.red;


    final outer_rect = Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: 1.3 * size.width,
        height: 1.7 * size.height);
    final innter_rect = Rect.fromCenter(
        center: Offset(size.width / 2, size.height / 2),
        width: size.width,
        height: size.height);



    var paint = Paint()
      ..color = _color == Colors.green ? _color : _color.withOpacity(0.6)
      ..strokeWidth = 4
      ..style = PaintingStyle.stroke

      ..strokeCap = StrokeCap.round;
    
    var paint2 = Paint()
      ..color = bg
      ..strokeWidth = 4
      ..style = PaintingStyle.fill

      ..strokeCap = StrokeCap.round;
    
    
    var paint3 = Paint()
      ..color = _color.withOpacity(0.5)
      ..strokeWidth = 4
      ..style = PaintingStyle.stroke
      ..blendMode = BlendMode.multiply
      ..strokeCap = StrokeCap.round;


    

    canvas.drawRRect(
        RRect.fromRectAndRadius(inner_rect, Radius.circular(10)), paint);
    canvas.drawArc(
        outer_rect, 3 / 2 * pi, -pi * 2 * (1 - percentage / 100), true, paint2);
    canvas.drawRRect(
        RRect.fromRectAndRadius(rect2, Radius.circular(10)), paint3);

  }

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

我使用了带有PaintingStyle.fill的圆弧来实现此目的。但是它在水平和垂直方向上都需要额外的空间。

我希望窗口小部件不要在两个方向上都保留任何其他空格。如何使用CustomPainter实现此目的？

我还试图使strokeCap不弯曲。我的当前状态如下。

current state