Flutter CustomClipper Triangle

Question

I have this triangle and a i would like that its shape would be like this

Can someone help me ? this is my actual code

class TriangleClipperr extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(size.width, 0.0);
    path.lineTo(size.width / 2, size.height);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipperr oldClipper) => false;
}

your code seems ok. what widget do you wrap your ```TriangleClipperr``` with? seems like the problem derives from the size from parent widget — Xoltawn, Apr 28 '22 at 14:59

score 1 · Accepted Answer · answered Apr 28 '22 at 15:47

1

First, you need to move the current point to middle, then draw rest path.

class TriangleClipperr extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.moveTo(size.width / 2, 0);
    path.lineTo(size.width, size.height);
    path.lineTo(0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(TriangleClipperr oldClipper) => false;
}

Shape depends on parent size.

answered Apr 28 '22 at 15:47

Md. Yeasin Sheikh

54,221
7
29
56

Glad to help you out, you can check [this article](https://medium.com/flutter-community/flutter-custom-clipper-28c6d380fdd6) for more. – Md. Yeasin Sheikh Apr 28 '22 at 19:39

Flutter CustomClipper Triangle

1 Answers1