Flutter中如何实现带部分圆形的背景效果？

你当前的代码仅能实现容器底部左右两角的圆角效果，而目标UI是底部中间向下凸起的弧形，这类自定义形状无法通过BoxDecoration的borderRadius实现，需要借助ClipPath绘制自定义路径来完成。

步骤1：自定义Clipper类 #

创建一个继承自CustomClipper<Path>的类，用于定义弧形路径：

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角起始
    path.lineTo(0, size.height - 30);
    // 绘制二次贝塞尔曲线，实现中间下凸的弧形
    path.quadraticBezierTo(
      size.width / 2,       // 曲线控制点X（容器水平中点）
      size.height + 50,     // 曲线控制点Y（向下凸起的幅度，数值越大弧度越明显）
      size.width,           // 曲线终点X（容器右下角）
      size.height - 30,     // 曲线终点Y（左右两侧的高度，数值越小两侧越低）
    );
    // 闭合路径
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

步骤2：使用ClipPath包裹容器 #

将需要添加弧形背景的Container用ClipPath包裹，并传入自定义的ArcClipper：

ClipPath(
  clipper: ArcClipper(),
  child: Container(
    height: 100,
    color: Colors.blue,
  ),
)

参数调整说明 #

• 修改size.height + 50的数值可以调整弧形向下凸起的幅度，数值越大弧度越突出；
• 修改size.height - 30的数值可以调整容器左右两侧的高度，数值越小两侧边缘越低。

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