Home > other >  Flutter CustomClipper Triangle
Flutter CustomClipper Triangle

Time:04-29

I have this triangle enter image description here and a i would like that its shape would be like this enter image description here

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

CodePudding user response:

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. enter image description here

CodePudding user response:

main difference is to change its initial point:

class TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..moveTo(size.width / 2, 0)
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..close();
  }

  @override
  bool shouldReclip(TriangleClipper oldClipper) => false;
}
  • Related