Flutter Custom Painting – Custom shape (Bezier Curves) widget in Flutter

How to make Flutter curves in a flutter

Here in this post, I will show how to make a custom shape (Bezier Curves) widget in a flutter. And I also shared the code with you. Let’s dive into it.

For our practice, we have taken a simple container widget

Container(
        color: Colors.red,
        child: const Center(
          child: Text(
            'Bezier Curve',
            style: TextStyle(
              fontSize: 34,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        height: 400,
      ),

We will wrap our Container widget with a clip-path to make a custom shape widget.

ClipPath(
        child: Container(
          color: Colors.red,
          child: const Center(
            child: Text(
              'Bezier Curve',
              style: TextStyle(
                fontSize: 34,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          height: 400,
        ),
      )

Next, we define the clipping rules for this widget inside of a different class, which extends a custom clipper and overwrites two more methods (getClip and shouldReclip).

ClipPath(
        clipper: CustomClipPath(),
        child: Container(
          color: Colors.red,
          child: const Center(
            child: Text(
              'Bezier Curve',
              style: TextStyle(
                fontSize: 34,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          height: 400,
        ),
      ),

class CustomClipPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

Our first design consists of five points. The first thing we do is return a passing object, which always starts in the upper left corner. Using the lineTo method, we draw a straight line from the first point to the second point. Only the y-coordinate changes to the height in this case.

Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    final path = Path();
    // (0, 0) point 1
    // p1 ==> p2 straight line
    // Here only the y-coordinate changes to the height.
    path.lineTo(0, height);
    return path;
  }

For the time being, we skip the curve and instead head to the fourth point. Here, the width just affects the x-coordinate.

Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    final path = Path();
    path.lineTo(0, height);
    // Here only the x-coordinate changes by the width
    path.lineTo(width, height); 
    return path;
  }

The fifth point is located at y-coordinate 0, and by closing the path, we eventually draw a straight line from this point to the first.

Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    final path = Path();
    path.lineTo(0, height);
    path.lineTo(width, height);
 
    // The fifth point is at the y-coordinate 0
    path.lineTo(width, 0);
    // create a straight line to the first point by closing the path.
    path.close();  
    return path;
  }

Next, a curve is used in place of the straight line between points 2 and 4. We keep point 4 as the destination point within the quadraticBezierTO method, but we also need to add a control point before it (point 3).

The y-coordinate is 100 distance from the bottom and the x-coordinate is 50 percent of the width. The curve is moving toward the control point, as you can see.

Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
 
    final path = Path();
 
    path.lineTo(0, height);
   
    // We replace the straight line between point 2 to point 4 by a curve.
    // path.lineTo(w, h);
    path.quadraticBezierTo(width * 0.5, height - 100, width, height);
    path.lineTo(width, 0);
    path.close();
    return path;
  }

Additionally, if you wish to relocate the first point, use the moveTo method. The close function will then draw a straight line from the last point to the new first point.

Path getClip(Size size) {
    double width = size.width;
    double hieght = size.height;
    final path = Path();
    path.moveTo(0, 100);
    path.lineTo(0, height); //Point 2
    path.quadraticBezierTo(width * 0.5, height - 100, width, height);
    path.lineTo(width, 0);
    path.close();
    return path;
  }

As an alternative, you may quickly generate complex shapes using the shape maker (https://shapemaker.web.app). After finishing your curve design in Shape Maker, click Get Code and then copy the shape’s path. Replace it with the path in your custom clipper, then check out the curve you made in your app.

 Path getClip(Size size) {
    // Custom path from shapemaker
    Path path0 = Path();
    path0.moveTo(0, size.height * 0.0025000);
    path0.lineTo(0, size.height * 0.4975000);
    path0.quadraticBezierTo(size.width * 0.2715625, size.height * 0.2360000,
        size.width * 0.3121875, size.height * 0.4980000);
    path0.cubicTo(
        size.width * 0.3839125,
        size.height * 0.0982600,
        size.width * 0.5761750,
        size.height * 0.4975000,
        size.width * 0.6225000,
        size.height * 0.4965000);
    path0.quadraticBezierTo(size.width * 0.6736750, size.height * 0.1512600,
        size.width * 0.9912500, size.height * 0.4955000);
    path0.lineTo(size.width * 0.9909375, size.height * 0.0025000);
    path0.lineTo(0, size.height * 0.0025000);
    path0.close();
    return path0;
}

Full Code (Just Copy it and paste it into your code).

import 'package:flutter/material.dart';
 
class BezierCurves extends StatelessWidget {
  const BezierCurves({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Bezier Curves'),
        centerTitle: true,
      ),
      body: ClipPath(
        clipper: CustomClipPath(),
        child: Container(
          color: Colors.red,
          child: const Center(
            child: Text(
              'Bezier Curve',
              style: TextStyle(
                fontSize: 34,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          height: 400,
        ),
      ),
    );
  }
}
class CustomClipPath extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double width = size.width;
    double height = size.height;
    final path = Path();
    // path.moveTo(0, 100);
    path.lineTo(0, height);
    path.quadraticBezierTo(width * 0.5, height - 100, width, height);
    path.lineTo(width, 0);
    path.close();
    return path;
  }
  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) {
    return false;
  }
}

For more, you can check out these videos

Flutter Shape Maker | Auto-Generate Custom Paint Code | Flutter UI Design Tutorial

Link: https://www.youtube.com/watch?v=AnKgtKxRLX4

Flutter Shape Maker – Pro | Auto-Generate Custom Paint Code | Flutter UI Design Tutorial

Link: https://www.youtube.com/watch?v=UjXrljsDZRk

Flutter ClipPath (Bezier Curves)

Link: https://www.youtube.com/watch?v=xuatM4pZkNk

Post By: Ziaur Rahman Shamim (More Info).

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com