Flutter：如何为CustomPainter的左上角和右上角添加曲线

我编写了一段Flutter CustomPainter代码用于创建自定义路径，但路径的左上角和右上角没有曲线，希望修改代码实现如下目标样式：

原代码运行效果：

原代码 #

class CurvedPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = DV.$light
      ..style = PaintingStyle.fill;

    final path = Path()
      ..moveTo(0, size.height * 0.7)
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    canvas.drawPath(path, paint);
  }

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

修改后的代码 #

class CurvedPainter extends CustomPainter {
  // 顶部圆角半径，可根据需求调整
  final double topCurveRadius = 20;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..color = DV.$light
      ..style = PaintingStyle.fill;

    final path = Path()
      // 绘制左上角圆角
      ..moveTo(0, topCurveRadius)
      ..quadraticBezierTo(0, 0, topCurveRadius, 0)
      // 顶部直线连接左右圆角
      ..lineTo(size.width - topCurveRadius, 0)
      // 绘制右上角圆角
      ..quadraticBezierTo(size.width, 0, size.width, topCurveRadius)
      // 连接到底部曲线右侧起点
      ..lineTo(size.width, size.height * 0.6)
      // 绘制底部右侧波浪曲线
      ..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width * 0.4, size.height * 0.6)
      // 绘制底部左侧波浪曲线
      ..quadraticBezierTo(size.width * 0.25, size.height * 0.8, 0, size.height * 0.7)
      // 闭合路径，回到左上角圆角起点
      ..lineTo(0, topCurveRadius);

    canvas.drawPath(path, paint);
  }

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

修改说明 #

1. 新增topCurveRadius变量，可灵活调整顶部圆角的大小；
2. 调整路径绘制顺序，先完成顶部左右两个圆角的平滑曲线，再衔接原有底部的波浪曲线；
3. 替换原代码中直角连接顶部的逻辑，改用quadraticBezierTo实现圆角效果；
4. 优化路径闭合逻辑，确保图形完整封闭。

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