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{
  Widget build(BuildContext context) {
    return Scaffold( 
        appBar: AppBar(
          title:Text("Wave Clipper Design"),
          backgroundColor: Colors.redAccent
           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

                ClipPath(  //upper clippath with less height
                    clipper:WaveClipper(), //set our custom wave clipper.
                          padding: EdgeInsets.only(bottom: 50),
                          child: Text("Wave clipper", style: TextStyle(
                            fontSize:18, color:Colors.white,

//Costom CLipper class with Path
class WaveClipper extends CustomClipper<Path>{
  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
      return path; 

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

In this way, you can make bezier curves using a custom clipping path.

No any Comments on this Article

Please Wait...