Flutter change wave quadraticBezierTo points

Question

with this below implementation code we have this custom shape design:

and in this design i want to change that to:

as i just learn create custom shape i can't do that, is any body can help me how to achieve that?

thanks

import 'package:flutter/material.dart';

class WaveClipperTwo extends CustomClipper<Path> {
  bool reverse;

  WaveClipperTwo({this.reverse = false});

  @override
  Path getClip(Size size) {
    var path = Path();
    if(!reverse) {
      path.lineTo(0.0, size.height - 20);

      var firstControlPoint = Offset(size.width / 4, size.height);
      var firstEndPoint = Offset(size.width / 2.25, size.height - 30.0);
      path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
          firstEndPoint.dx, firstEndPoint.dy);

      var secondControlPoint =
          Offset(size.width - (size.width / 3.25), size.height - 65);
      var secondEndPoint = Offset(size.width, size.height - 40);
      path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
          secondEndPoint.dx, secondEndPoint.dy);

      path.lineTo(size.width, size.height - 40);
      path.lineTo(size.width, 0.0);
      path.close();
    }else{
      path.lineTo(0.0, 20);

      var firstControlPoint = Offset(size.width / 4, 0.0);
      var firstEndPoint = Offset(size.width / 2.25, 30.0);
      path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
          firstEndPoint.dx, firstEndPoint.dy);

      var secondControlPoint =
          Offset(size.width - (size.width / 3.25), 65);
      var secondEndPoint = Offset(size.width, 40);
      path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
          secondEndPoint.dx, secondEndPoint.dy);

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

    return path;
  }

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

Answer 1

I think, you need something like this:

class WaveClipperTwo extends CustomClipper<Path> {
  bool reverse;

  WaveClipperTwo({this.reverse = false});

  final int _coefficient = 16;
  double get _minStep => 1 / _coefficient;
  double get _preCenter => _minStep * (_coefficient / 2 - 1);
  double get _postCenter => _minStep * (_coefficient / 2 + 1);
  double get _preEnd => _minStep * (_coefficient - 2);

  @override
  Path getClip(Size size) {
    var path = Path();
    path.moveTo(0.0, 0.0);
    if(!reverse) {
      path.lineTo(0.0, size.height - 20.0);
      path.lineTo(size.width * _preCenter, size.height - 20.0);
      path.cubicTo(size.width/2, size.height - 20.0, size.width/2, size.height - 40.0, size.width * _postCenter, size.height - 40.0);
      path.lineTo(size.width * _preEnd, size.height - 40.0);
      path.quadraticBezierTo(size.width, size.height - 40.0, size.width, size.height - 20.0);
      path.lineTo(size.width, 0.0);
      path.close();
    }else{
      path.lineTo(0.0, 20);
      path.lineTo(size.width * _preCenter, 20.0);
      path.cubicTo(size.width/2, 20.0, size.width/2, 40.0, size.width * _postCenter, 40.0);
      path.lineTo(size.width * _preEnd, 40.0);
      path.quadraticBezierTo(size.width, 40, size.width, 20.0);
      path.lineTo(size.width, 0.0);
      path.close();
    }

    return path;
  }

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

P.S. You can try to change _coefficient and choose what suits for you