Flutter ClipPath Widget

String _imageUrl = 'https://p1.pxfuel.com/preview/394/973/70/abstract-wallpaper-images-background-image-color-pattern-structure.jpg';

ClipPath(
  clipper: ArcClipper(),
  child: SizedBox(
    width: 320,
    height: 240,
    child: Image.network(_imageUrl, fit: BoxFit.cover,),
  ),
)
// ....

class ArcClipper extends CustomClipper<Path> {
  
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height - 30);

    var firstControlPoint = Offset(size.width / 4, size.height);
    var firstPoint = Offset(size.width / 2, size.height);
    path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
        firstPoint.dx, firstPoint.dy);

    var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
    var secondPoint = Offset(size.width, size.height - 30);
    path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
        secondPoint.dx, secondPoint.dy);

    path.lineTo(size.width, 0.0);
    path.close();

    return path;
  }

  
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Subscribe For Daily Updates

Flutter Questions
Android Questions