0

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

jazzbpn
  • 6,441
  • 16
  • 63
  • 99
  • https://gist.github.com/pskink/adf730167a48b750a81f1dd197309312#file-round_polygon-dart-L632 – pskink Jan 10 '23 at 10:14
  • This a very lengthy and harder way to achieve the result and in that demo, we do not have such result. Do we have any other options ? – jazzbpn Jan 10 '23 at 10:35
  • harder? so use just that method https://gist.github.com/pskink/adf730167a48b750a81f1dd197309312#file-round_polygon-dart-L703 to produce the `Path` (only 20 lines of code) – pskink Jan 10 '23 at 11:06
  • class Customshape extends CustomClipper { override Path getClip(Size size) { return _phasedPathBuilder(Rect.fromPoints(const Offset(10, 20), const Offset(50, 50)), 100); } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } } – jazzbpn Jan 10 '23 at 11:53
  • run my code and add `print('bounds: $bounds, phase: $phase')` inside `_phasedPathBuilder` and you will know what to pass to that method – pskink Jan 10 '23 at 11:59
  • _phasedPathBuilder-bounds: Rect.fromLTRB(11.0, 115.0, 338.0, 394.0), phase: 0 It's not working. – jazzbpn Jan 10 '23 at 12:16
  • No view appear using CustomShape: Container( height: 50, width: 50, child: ClipPath( clipper: Customshape(), ), ) *** class Customshape extends CustomClipper { override Path getClip(Size size) { return phasedPathBuilder(const Rect.fromLTRB(11.0, 115.0, 338.0, 394.0), 0); } @override bool shouldReclip(covariant CustomClipper oldClipper) { return true; } } – jazzbpn Jan 10 '23 at 12:20
  • because your container has no color? – pskink Jan 10 '23 at 12:24
  • It is not working with colors as well. I had already tried that. When we set color, the whole container seems colorful without CustomShape. – jazzbpn Jan 10 '23 at 12:29
  • shouldn't clippath be a parent of container? this is why you should extend `ShapeBorder` this is a base class for every shapes in flutter, like `RoundedRectangleBorder`, `CircleBorder`, `StadiumBorder` etc, more here: https://api.flutter.dev/flutter/painting/ShapeBorder-class.html – pskink Jan 10 '23 at 12:36
  • This create a reverse D shape border but the curvy style mentioned in the attachment is still missing. Path getClip(Size size) { return phasedPathBuilder(const Rect.fromLTRB(50, 50, 10, 5), 1); } – jazzbpn Jan 10 '23 at 12:47
  • If you want not reversed D shape change the `points` array here: https://gist.github.com/pskink/adf730167a48b750a81f1dd197309312#file-round_polygon-dart-L705 – pskink Jan 10 '23 at 12:55
  • D has been reversed but unable to get the topRight and bottomRight curves like in the design. – jazzbpn Jan 10 '23 at 13:07
  • Waiting for your help. – jazzbpn Jan 10 '23 at 15:37
  • you have 2 params passed to `roundPolygon` method - they are documented in the source code, what is unclear in both? more here: https://gist.github.com/pskink/adf730167a48b750a81f1dd197309312#file-round_polygon-dart-L12 – pskink Jan 10 '23 at 15:41

0 Answers0