CODEWITHSUNDEEP
flutterflutter-layout
Fatih Yılmaz
Fatih Yılmaz

Reputation: 81

how can i make this custom path on flutter.Line,quadratic etc custom clipper,clip path

enter image description here

how can i make this custom clipper ? i cant make it with border radius.Can anyone send code?

Upvotes: 0

Views: 179

Answers (1)

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63604

You can use this Path

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

  CardClipperPath({this.curveRadius = 16.0});

  @override
  Path getClip(Size size) => Path()
    ..quadraticBezierTo(0, curveRadius * .75, curveRadius, curveRadius)
    ..lineTo(size.width - curveRadius, curveRadius)
    ..quadraticBezierTo(size.width, curveRadius, size.width, curveRadius * 2)
    ..lineTo(size.width, size.height)
    ..lineTo(0, size.height);

  @override
  bool shouldReclip(covariant CardClipperPath oldClipper) => oldClipper != this;
}

enter image description here

Wrap with Stack and provide corner image.

Upvotes: 1

Related Questions