Flutter 画图

1.设置一个组件

组件 child使用 CustomPaint 对当前组件进行作图

class CustomPaintRoute extends StatelessWidget {
  var myWidth = 300.0;
  var myHeight = 300.0;
  var backColor = Colors.black;
  CustomPaintRoute(color,{width=300.0,height=300.0}){
    myWidth = width;
    myHeight = height;
    backColor = color;

  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint(
        size: Size(myWidth, myHeight), //指定画布大小
        painter: MyPainter(backColor),
        // child: Container(
        //   width: width,
        //   height: height - 100,
        //   color: Colors.tealAccent,
        // ),
      ),
    );
  }
}





class MyPainter extends CustomPainter {

  var backColor = Colors.red;
  MyPainter(color){
    this.backColor = color;
  }

  @override
  void paint(Canvas canvas, Size size) {

    //背景
    var paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.fill //填充
      ..color = backColor; //背景为纸黄色

//画线
// canvas.drawLine(Offset(0, 0), Offset(size.width, 0), paint);
// canvas.drawLine(Offset(size.width, 0), Offset(size.width, 100), paint);
// canvas.drawLine(Offset(size.width, 100), Offset(0, 100), paint);
// canvas.drawLine(Offset(0,100), Offset(0, 0), paint);

//画矩形
// canvas.drawRect(Rect.fromLTWH(0, 0, size.width, size.height/2), paint);

//画圆
// Rect rect2 = Rect.fromCircle(center: Offset(size.width/2, - size.width + size.height), radius: size.width);
    // canvas.drawArc(rect2, 0.0, math.pi, true, paint);
    // canvas.a


      // Rect rect = Rect.fromCircle(
    // center: Offset(size.width / 2, 0), radius: size.width);

    // Rect rect = Rect.fromLTRB(-10, 0, size.width + 20, size.height);
    //画椭圆
    // canvas.drawArc(rect, 0, math.pi , true, paint);      
  }
  //在实际场景中正确利用此回调可以避免重绘开销，本示例我们简单的返回true
  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}