如何在Flutter中创建带倾斜与曲线效果的容器？

要实现图中的曲线容器，最直接的方式是用Flutter的ClipPath结合自定义CustomClipper来裁剪容器，以下是具体代码示例：

步骤1：自定义裁剪器 #

创建一个CustomClipper子类，通过贝塞尔曲线绘制底部的特殊形状：

class CurvedContainerClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    // 从左上角开始绘制路径
    path.moveTo(0, 0);
    // 画到右上角
    path.lineTo(size.width, 0);
    // 右侧边缘向下到曲线起点
    path.lineTo(size.width, size.height - 30);
    // 右侧内凹曲线（二阶贝塞尔）
    path.quadraticBezierTo(
      size.width - 30,  // 控制点X
      size.height,      // 控制点Y
      size.width - 60,  // 终点X
      size.height - 30, // 终点Y
    );
    // 中间向上凸起的曲线
    path.quadraticBezierTo(
      size.width / 2,       // 控制点X
      size.height - 40,     // 控制点Y（数值越小凸起越高）
      60,                   // 终点X
      size.height - 30,     // 终点Y
    );
    // 左侧内凹曲线
    path.quadraticBezierTo(
      30,                // 控制点X
      size.height,       // 控制点Y
      0,                 // 终点X
      size.height - 30,  // 终点Y
    );
    // 闭合路径
    path.close();
    return path;
  }

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

步骤2：使用裁剪器包装容器 #

把需要的容器用ClipPath包裹，即可得到曲线效果：

class CurvedCard extends StatelessWidget {
  const CurvedCard({super.key});

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: CurvedContainerClipper(),
      child: Container(
        height: 200,
        width: double.infinity,
        margin: const EdgeInsets.symmetric(horizontal: 20),
        decoration: BoxDecoration(
          color: Colors.blueAccent,
          borderRadius: const BorderRadius.only(
            topLeft: Radius.circular(16),
            topRight: Radius.circular(16),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.1),
              blurRadius: 10,
              offset: const Offset(0, 5),
            )
          ],
        ),
        child: const Center(
          child: Text(
            "带曲线的容器",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
        ),
      ),
    );
  }
}

调整匹配设计图 #

你可以修改裁剪器里的数值（比如30、60、size.height -40这些参数），来调整曲线的弧度、深度和凸起高度，完全匹配Figma里的设计。如果需要更精准的曲线，可以在Figma中导出路径的坐标点，直接对应到Flutter的Path方法中。

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