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

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

您需要将剪贴路径小部件用作子小部件。将容器嵌套在其中。

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;
}