Preface:

Hello, everyone. It has been a while since I updated my article to you. Today, we will share with you a case of drawing the Bezier curve of flutter, hoping to help you with your study and work.

Preparations:

The development environment for flutter to be installed:

Check out the previous tutorial:

1 win flutter system development environment installed tutorial: www.jianshu.com/p/152447bc8…

2 MAC flutter development environment installed tutorial: www.jianshu.com/p/bad2c35b4…

Effect:

Concrete implementation:

Ordinary Bezier curve

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      body: Column(
        children: [
          ClipPath(
           clipper: BottomClippertest(),
            child: Container(
              color: Colors.deepOrangeAccent,
              height: 200,
            ),
          )
        ],
      ),
    );
  }
Copy the code

We’ve got the ClipPath here to handle our Bezier curve drawing and inside the ClipPath we’ve nested a Container box component with a height of 200 width across the screen and then we’re going to handle the Clipper inside the ClipPath component familiar

class BottomClippertest extends CustomClipper<Path>{ @override Path getClip(Size size) { var path=Path(); path.lineTo(0, 0); // the first point is path.lineTo(0, size.height-60); Var firstControlPoint=Offset(sie.width /2, sie.height); Var firstendPoint=Offset(sie.width, sie.height-60); Path. quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstendpoint.dx, firstendpoint.dy); path.lineTo(size.width, size.height-60); // Path.lineto (size.width,0); // return path; } @override bool shouldReclip(covariant CustomClipper<Path> oldClipper) { return false; }}Copy the code

We’ve got a BottomClippertest class here that inherits from CustomClipper and then we’re overwriting getClip and shouldReclip,shouldReclip we’re returning false in getClip Method we create the path object

 var path=Path();
Copy the code

Then draw the desired nodes of the Bezier curve, such as the five points above and the desired starting and ending points of the Bezier curve. Finally we return a path object to complete the code:

import 'package:flutter/material.dart'; /** ** Founder: xuqing * Created on November 14, 2020 16:28:54 Class MyHomePage extends StatefulWidget {MyHomePage({Key Key}) : super(Key: Key); @override _MyHomePageState createState() { return _MyHomePageState(); } } class _MyHomePageState extends State<MyHomePage> { @override void initState() { super.initState(); } @override void dispose() { super.dispose(); } @override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: Column( children: [ ClipPath( clipper: BottomClippertest(), child: Container( color: Colors.deepOrangeAccent, height: 200, ), ) ], ), ); } } class BottomClippertest extends CustomClipper<Path>{ @override Path getClip(Size size) { var path=Path(); path.lineTo(0, 0); // the first point is path.lineTo(0, size.height-60); Var firstControlPoint=Offset(sie.width /2, sie.height); Var firstendPoint=Offset(sie.width, sie.height-60); Path. quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstendpoint.dx, firstendpoint.dy); path.lineTo(size.width, size.height-60); // Path.lineto (size.width,0); // return path; } @override bool shouldReclip(covariant CustomClipper<Path> oldClipper) { return false; }}Copy the code

Wavy Bezier curve implementation:

@override Widget build(BuildContext context) { // TODO: implement build return Scaffold( body: Column( children: [ ClipPath( clipper: BottomClipper(), child: Container( color: Colors.blue, height: 200, ), ) ], ), ); }}Copy the code

I wrote a ClipPath component that contains a Container component that is 200 tall and wide across the screen. Let’s focus on the implementation of the Clipper property:

class BottomClipper extends CustomClipper<Path>{ @override Path getClip(Size size) { var path=Path(); path.lineTo(0, 0); path.lineTo(0, size.height-40); var firstControlPoint=Offset(size.width/4, size.height); Var firstendPoint = Offset (size. Width / 2.25, the size height - 30); path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy, firstendPoint.dx, firstendPoint.dy); var secondConttorPoint=Offset(size.width/4*3, size.height-90); var secondendPoint=Offset(size.width, size.height-40); path.quadraticBezierTo(secondConttorPoint.dx, secondConttorPoint.dy, secondendPoint.dx, secondendPoint.dy); path.lineTo(size.width, size.height-40); path.lineTo(size.width,0); return path; } @override bool shouldReclip(covariant CustomClipper<Path> oldClipper) { return false; }}Copy the code

So again, we’re going to write a BottomClipper class that inherits from The CustomClipper class and override getClip and shouldReclip,shouldReclip returns false and the point is that in getClip we’re going to create a path object

var path=Path();
Copy the code

This wavy Bezier curve we have two control points at 1/4 of the screen width and 3/4 of the screen width

var firstControlPoint=Offset(size.width/4, size.height); Var firstendPoint=Offset(sie.width /2.25, sie.height-30); QuadraticBezierTo (firstControlPoint. Dx, firstControlPoint. Dy, firstendpoint.dx, firstendpoint.dy); quadraticBezierTo(firstControlPoint. var secondConttorPoint=Offset(size.width/4*3, size.height-90); Var secondendPoint=Offset(sie.width, sie.height-40); QuadraticBezierTo (SecondConttorPoint.dx, secondConttorPoint.dy, secondEndpoint.dx, secondEndpoint.dy);Copy the code

All the other points are the same as the normal Bezier curve above and finally we return path to achieve our wavy Bezier curve drawing and that’s the end of our basic Bezier curve drawing

Conclusion:

Sometimes in our work, we need to use some curve for background We can use Bessel curve drawing and corresponding color background Have students jumped out at this time A picture is done directly But we add images can increase the resource file also corresponding increase flutter project packaged as the volume of the installation package, Flutter provides a nice API for us to call and we just need to find the corresponding node and go back to the path to draw. The above simple example is just to share with the students, students can study and draw more cool curve effect, I will not expand on this side. Finally, I hope my article can help you solve the problem, and I will contribute more useful code to share with you in the future. If you think the article is good, please pay attention to it and star. Thank you. You can also add my personal QQ/ wechat (1693891473).

Project Address:

Yards cloud: gitee.com/qiuyu123/fl…

QQ Communication Group: