Flutter how to edit top of a container with ClipPath?-CodePudding

I have the following code in my flutter to edit a container:

      path.lineTo(x, size.height / 3);
      path.cubicTo(x   increment / 9, size.height / 2   100, x   increment,
          size.height, x   increment, size.height);

This results in this

However, the top part stays straight, how can I add curvyness to the top part too?

I tried using path.moveTo, but it resulted in the same shape.

Full code:

class WavyPages extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0, size.height);
    var x = 0.0;
    var numberOfWaves = 1;
    var increment = size.width / numberOfWaves;

      path.lineTo(x, size.height / 3);
      path.cubicTo(x   increment / 9, size.height / 2   100, x   increment,size.height, x   increment, size.height);

    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(WavyPages oldClipper) => true;
}

CodePudding user response：

For the top part you can try my code:

class WavyPages extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    var x = 0.0;
    var numberOfWaves = 1;
    var increment = size.width / numberOfWaves;
    path.moveTo(size.width, 0);
    path.cubicTo(size.width,0,size.width-increment,0,x,size.height / 2);
      
      path.cubicTo(0, size.height / 2   100, x   increment,size.height, x   increment, size.height);

    path.lineTo(size.width, 0);
    path.lineTo(0, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(WavyPages oldClipper) => true;
}

And tell me if this is what you wanted...