画曲线

代码：

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {

const HomePage({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

body: Column(

children: <Widget>[

ClipPath(//路径裁切

clipper: BottomClipper(),///路径

child: Container(

color: Colors.deepPurpleAccent,

height: 200.0,

),

)

],

),

);

}

}

class BottomClipper extends CustomClipper<Path> {

@override

Path getClip(Size size) {//child 元素的size

var path = Path();

path.lineTo(0, 0);//起始点

path.lineTo(0, size.height - 30);//第二个点

var controlPoint = Offset(size.width/2, size.height);//控制点

var endPoint = Offset(size.width, size.height - 30);//结束点

path.quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy);// 画了贝塞尔曲线

path.lineTo(size.width, size.height - 30);//第三个点

path.lineTo(size.width, 0);//第四个点

return path;

}

@override

bool shouldReclip(CustomClipper<Path> oldClipper) => false;

}

 

总结：

//画曲线

 

ClipPath（

clipper:xxx 重写的类

child:

）

 

画曲线 首先要继承 CustomClipper

 

重写两个方法 

1.getClip

//初始化 线

     var path = Path();

path.lineTo(x,y)  点相连

 

path.quadraticBezierTo(x1,y1,x2,y2)//贝塞尔曲线 x1,y1 是控制点 x2,y2 结束点

 

 

2.shouldReclip 返回flase