Posted in Dart Flutter

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

Flutter – How to make Bezier Curve waves using custom clip Path Posted on May 22, 2020Leave a comment
I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

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

curves waves flutter

What is quadratic bezier?

Before clipping, you should understand what is quadratic bezier. Quadratic beziers help us to easily create curves on paths. See the picture and relate 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.

See this also: Flutter – How to create Wave Curves animation using Clipper 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;
  }
}

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

I'm Hari Prasad Chaudhary from Nepal, developer of the finest educational website/app "MeroSpark" and the finest eCommerce system "PasalaY". Here I share the code snippet which I learn during development.

Leave a Reply

Your email address will not be published. Required fields are marked *