代码：
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