flutter 使用canvas实现一个梯形

创建一个工具类
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
/*
首先使用 moveTo 方法移动到左上角，然后使用 lineTo 方法依次连接四个点形成一个梯形，
最后使用 close 方法闭合路径。在 paint 方法中，我们使用 Canvas 对象的
 drawPath 方法绘制这个梯形。
*/
class TrapeziumPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = Color.fromRGBO(235, 112, 3, 1);
    // final path = Path()
    //   ..moveTo(0, 0)
    //   ..lineTo(size.width * 0.8, 0.2)
    //   // 添加当前点到目标点（x，y）构成的直线到pathrLineTo(float dx, float dy) 
    //   // //基于当前坐标系，即以path最后的那个点//为坐标系原点（0,0）
    //   // ，如果前面没有path的点，默认是屏幕左上角（0,0）
    //   ..lineTo(size.width *0.8, size.height)
    //   ..lineTo(size.width * 0.4, size.height*0.2)
    //   ..close();
    Path path=Path();
     path
      ..relativeMoveTo(0, 0) //左上,
      ..relativeLineTo(350.w, 0) //右上,这里的横坐标和纵坐标都是根据上一个点来的，比如上一个点是10,20，那么下一个点就是根据10,20来，而不是0,0来
      ..relativeLineTo(-40, 60)//右下
      ..relativeLineTo(-140,0);//左下
    canvas.drawPath(path, paint);
  }
  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

在页面中使用TrapeziumPainter() 就可以生成了

Container(
                          width: 350.w,
                          height: 90.w,
                          child: CustomPaint(
                            painter: TrapeziumPainter(),
                          ),
                        )

效果图如下