CODEWITHSUNDEEP
flutterdartflutter-layout
Muhammad Ameen
Muhammad Ameen

Reputation: 189

Draw wave curve on top of image slider in flutter

I need to implement below like effect on top of image slider, please guide me enter image description here

Upvotes: 2

Views: 2420

Answers (1)

Kishore Jethava
Kishore Jethava

Reputation: 6834

You can create custom ClipPath

class Clipper extends CustomClipper<Path> {
   @override
   Path getClip(Size size) {
       Path path = Path();
       path.lineTo(0, size.height);
       path.quadraticBezierTo(
       size.width / 4, size.height - 40, size.width / 2, size.height - 20);
       path.quadraticBezierTo(
       3 / 4 * size.width, size.height, size.width, size.height - 30);
      path.lineTo(size.width, 0);

      return path;
   }

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

find sample snippet

Note : this is basic idea you to have modify by your own requirement

sample output enter image description here

Upvotes: 4

Related Questions