Flutter ClipPath圆角实现：如何修改现有代码达成目标效果？

当前代码生成的是底部中间向外凸起的弧形，要实现目标的底部中间内凹圆角效果，可修改如下：

class ClipPathClass extends CustomClipper<Path> {
  // 可自定义内凹圆角的半径
  final double concaveRadius = 24.0;

  @override
  Path getClip(Size size) {
    final path = Path();
    
    // 从左上角出发，向下绘制左侧边缘到底部
    path.lineTo(0, size.height);
    // 从左下角向右绘制到内凹圆角的左侧起点
    path.lineTo(size.width / 2 - concaveRadius, size.height);
    // 绘制中间的内凹圆角（顺时针绘制形成内凹效果）
    path.arcToPoint(
      Offset(size.width / 2 + concaveRadius, size.height),
      radius: Radius.circular(concaveRadius),
      clockwise: true,
    );
    // 从内凹圆角右侧起点向右绘制到右下角
    path.lineTo(size.width, size.height);
    // 从右下角向上绘制右侧边缘到右上角
    path.lineTo(size.width, 0);
    // 闭合路径回到左上角
    path.close();
    
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

改动说明： #

• 移除原有的二次贝塞尔曲线逻辑，改用arcToPoint绘制标准内凹圆角，弧度大小更易控制
• 调整路径绘制顺序，先完成底部左右直边，再绘制中间内凹弧，贴合目标样式
• 新增concaveRadius参数，可根据需求自由调整内凹圆角尺寸

若你的目标是底部左右两侧带外凸圆角、中间水平的样式，可使用以下代码：

class ClipPathClass extends CustomClipper<Path> {
  final double cornerRadius = 24.0;

  @override
  Path getClip(Size size) {
    final path = Path();
    
    // 左上角→右上角
    path.lineTo(size.width, 0);
    // 右上角→右下角圆角上方
    path.lineTo(size.width, size.height - cornerRadius);
    // 绘制右下角外凸圆角
    path.arcToPoint(
      Offset(size.width - cornerRadius, size.height),
      radius: Radius.circular(cornerRadius),
      clockwise: false,
    );
    // 底部水平→左下角圆角左侧
    path.lineTo(cornerRadius, size.height);
    // 绘制左下角外凸圆角
    path.arcToPoint(
      Offset(0, size.height - cornerRadius),
      radius: Radius.circular(cornerRadius),
      clockwise: false,
    );
    // 左下角→左上角闭合路径
    path.lineTo(0, 0);
    path.close();
    
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

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