如何为按钮创建自定义的倾斜边缘？

Question

我有一个按钮，但是边缘像这样倾斜。

我尝试将Container的BoxDecoration与BorderRadius结合使用，以根据设计创建边框，但这不是很准确。

final BorderRadius firstButtonBorder = BorderRadius.only(
  topRight: Radius.elliptical(3, 60),
  topLeft: Radius.elliptical(3, 60),
  bottomLeft: Radius.elliptical(3, 60),
  bottomRight: Radius.elliptical(3, 60),
);

如何创建按钮，使边缘与第一张图片完全相同？我是否需要使用自定义绘画工具或其他工具？此外，该按钮还必须能够指定自定义宽度。

谢谢！

Answer 1

您需要将clippath小部件用作子级。嵌套在容器中。

child:ClipPath(
  child:Container(),
  clipper: CustomClips()
)
class CustomClips extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(size.width / 12, size.height);
    path.lineTo(size.width, 0.0);
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}