How to create shape using clipper in flutter?

149 Views Asked by At

Unable to create such curvy shape like in image attachment using CustomClipper. Can anyone can help?

class Customshape extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;

    var path = Path();
    path.lineTo(0, height-50);
    path.quadraticBezierTo(width/2, height, width, height-50);
    path.lineTo(width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }

} 

CustomWidget.dart

return Scaffold(
  appBar:  AppBar(
    toolbarHeight: 130,
    backgroundColor: Colors.transparent,
    elevation: 0.0,
    flexibleSpace: ClipPath(
      clipper: Customshape(),
      child: Container(
        height: 250,
        width: MediaQuery.of(context).size.width,
        color: Colors.green,
        child: Center(child: Text("CustomClipper test", style: TextStyle(fontSize: 40, color: Colors.white),)),
      ),
    ),
  ),
   body: Container(),
);

enter image description here

0

There are 0 best solutions below