Flutter中如何为容器左右两侧添加指定曲线造型？

你可以通过ClipPath结合自定义CustomClipper实现该造型，完全无需依赖SVG资源，代码实现如下：

1. 定义自定义裁剪器 #

创建CouponClipper类，用来绘制左右两侧的凹曲线与圆角：

class CouponClipper extends CustomClipper<Path> {
  final double curveRadius;

  CouponClipper({this.curveRadius = 12});

  @override
  Path getClip(Size size) {
    final path = Path();
    // 左上角圆角起点
    path.moveTo(curveRadius, 0);
    // 顶部直线到右侧圆角起点
    path.lineTo(size.width - curveRadius, 0);
    // 右上角圆角
    path.arcToPoint(
      Offset(size.width, curveRadius),
      radius: Radius.circular(curveRadius),
    );
    // 右侧直线到下凹曲线起点
    path.lineTo(size.width, size.height - curveRadius);
    // 右侧凹曲线
    path.arcToPoint(
      Offset(size.width - curveRadius, size.height),
      radius: Radius.circular(curveRadius),
      clockwise: false,
    );
    // 底部直线到左侧凹曲线起点
    path.lineTo(curveRadius, size.height);
    // 左侧凹曲线
    path.arcToPoint(
      Offset(0, size.height - curveRadius),
      radius: Radius.circular(curveRadius),
      clockwise: false,
    );
    // 左侧直线到左上角圆角起点
    path.lineTo(0, curveRadius);
    // 左上角圆角闭合路径
    path.arcToPoint(
      Offset(curveRadius, 0),
      radius: Radius.circular(curveRadius),
    );

    return path;
  }

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

2. 重构按钮组件 #

替换原SVG+Stack的实现，用ClipPath包裹Container整合内容：

Widget get _promoButtonView {
  return GestureDetector(
    onTap: () {},
    child: ClipPath(
      clipper: CouponClipper(curveRadius: 16), // 可调整曲线弧度大小
      child: Container(
        width: AppQuery.instance.width,
        padding: AppSpacer.instance.edgeInsets.symmetric(x: 'standard'),
        decoration: BoxDecoration(
          color: Colors.white, // 自定义背景色
          border: Border.all(color: Colors.grey.shade300), // 自定义边框样式
          // 可添加阴影：boxShadow: [BoxShadow(...)]
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Row(
              children: <Widget>[
                SvgPicture.asset('assets/images/coupon.svg'),
                AppSpacer.instance.vWsm,
                AppText.label(
                  AppCopy.instance.tr('input_cashback_code'),
                  fontWeight: FontWeight.w500,
                ),
              ],
            ),
            const Icon(Icons.chevron_right)
          ],
        ),
      ),
    ),
  );
}

说明 #

• 修改CouponClipper的curveRadius参数，可调整左右曲线的弧度
• 通过Container的decoration属性，可自定义背景色、边框、阴影等样式，完全替代SVG效果
• 该实现性能优于SVG+Stack方案，且无需额外资源文件

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