Flutter新手求助：如何实现如图所示的曲线设计效果？

DevOps 小满

2026-7-5

实现这类曲线造型的几种实用方案

针对你要的曲线效果，不用Stack也能轻松实现，推荐两种适合新手的方案：

方案一：用`ClipPath`自定义裁剪路径（灵活可控）

这是实现任意曲线最通用的方式，能精准调整曲线弧度。

先定义一个自定义裁剪器：

class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角起始
    path.lineTo(0, size.height - 60);
    // 绘制二次贝塞尔曲线，调整参数就能改变曲线形状
    path.quadraticBezierTo(
      size.width / 2,
      size.height,
      size.width,
      size.height - 60,
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

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

然后在页面中使用：

Scaffold(
  body: ClipPath(
    clipper: CurveClipper(),
    child: Container(
      height: 220,
      color: Colors.deepPurple,
      child: const Center(
        child: Text(
          '带曲线的顶部区域',
          style: TextStyle(color: Colors.white, fontSize: 22),
        ),
      ),
    ),
  ),
)

修改quadraticBezierTo里的数值，就能调出你想要的曲线弧度；如果需要底部曲线，只需调整路径的起点和终点位置即可。

方案二：用`Container`的`BoxDecoration`（适合简单对称曲线）

如果曲线只是简单的大圆角造型，直接用BorderRadius更简洁：

Container(
  height: 220,
  decoration: const BoxDecoration(
    color: Colors.deepPurple,
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(60),
      bottomRight: Radius.circular(60),
    ),
  ),
  child: const Center(
    child: Text(
      '带圆角曲线的顶部区域',
      style: TextStyle(color: Colors.white, fontSize: 22),
    ),
  ),
)

这种方法代码量少，适合对称的简单曲线场景。