How to make Bezier Curve waves using custom clip Path in Flutter

In this example, we have shown how to make curve waves using Path. In other words, it is also called quadratic bezier curves. See the example below and learn how to clip curve waves using a custom path. Here, we have used quadraticBezierTo() to make bezier curves.

Before clipping, you should understand what is quadratic bezier. Quadratic beziers help us to easily create curves on paths. See the picture and relate it with code to understand the clipping bezier curves.

See the Dart code below and understand the concept, try this in your app as well. In this example, we have drawn two curves using a single custom clip-path.

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

class MyWaveClipper extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold( 
        appBar: AppBar(
          title:Text("Wave Clipper Design"),
          backgroundColor: Colors.redAccent
        ),
        body:Container( 
           child:Stack(children: <Widget>[ //stack overlaps widgets
                Opacity( //semi red clippath with more height and with 0.5 opacity
                  opacity: 0.5, 
                  child: ClipPath( 
                      clipper:WaveClipper(), //set our custom wave clipper
                        child:Container( 
                            color:Colors.deepOrangeAccent,
                            height:200,
                        ),
                     ),
                ),

                ClipPath(  //upper clippath with less height
                    clipper:WaveClipper(), //set our custom wave clipper.
                      child:Container( 
                          padding: EdgeInsets.only(bottom: 50),
                          color:Colors.red,
                          height:180,
                          alignment: Alignment.center,
                          child: Text("Wave clipper", style: TextStyle(
                            fontSize:18, color:Colors.white,
                          ),)
                     ),
                ),
           ],)
        )
    );
  }
}

//Costom CLipper class with Path
class WaveClipper extends CustomClipper<Path>{
  @override
  Path getClip(Size size) {
    
      var path = new Path();
      path.lineTo(0, size.height); //start path with this if you are making at bottom
      
      var firstStart = Offset(size.width / 5, size.height); 
      //fist point of quadratic bezier curve
      var firstEnd = Offset(size.width / 2.25, size.height - 50.0);
      //second point of quadratic bezier curve
      path.quadraticBezierTo(firstStart.dx, firstStart.dy, firstEnd.dx, firstEnd.dy);

      var secondStart = Offset(size.width - (size.width / 3.24), size.height - 105); 
      //third point of quadratic bezier curve
      var secondEnd = Offset(size.width, size.height - 10);
      //fourth point of quadratic bezier curve
      path.quadraticBezierTo(secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy);

      path.lineTo(size.width, 0); //end with this path if you are making wave at bottom
      path.close();
      return path; 
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
     return false; //if new instance have different instance than old instance 
     //then you must return true;
  }
}