无法在 Flutter 中使用自定义绘画制作自定义平行四边形

Question

This Is the Shape I want to makeThis the Screen Shot from my phone

I am trying to make a Parallelogram in a container as it is the demand of the UI. What I've manages is this code to make it some what similar to a design Which is static. even in this, i am unable to move the origin or starting point of the shape. As you can see in the screen shot, The Green part is the shape and the Pink part is the container and all the information is to be displayed in the shape. Also if any one can suggest the way to add styling in the shape as well. I've pasted the code below and along this code I've Commented all of my work which I thought would work but didn't.

class MyParallelogram extends CustomPainter {


@override
  void paint(Canvas canvas, Size size) {
    // TODO: implement paint
    Paint paint = Paint();
    paint.style = PaintingStyle.fill;
    paint.color = Colors.green;
    //Path path = Path();

    // path.addPolygon(List Offset(points), bool close){

    // };
    // path.addRect(
    //   //   Rect.fromLTWH(
    //   //     20,
    //   //     3,
    //   //     50,
    //   //     30,
    //   //   ),
    //   Rect.fromPoints(
    //     Offset.zero,
    //     Offset(50, 30),
    //   ),
    // );

    final path = Path()
      ..lineTo(0.0, size.height / 2)
      ..lineTo(60, 90)
      ..lineTo(250, 60)
      ..lineTo(170, 20)
      ..lineTo(0.0, size.height / 2)
      // ..lineTo(size.width / 2, 0.0)
      // ..lineTo(0.0, size.height / 2)
      ..close();
    // parapath.moveTo(30.0, 38.0);

    // parapath.quadraticBezierTo(80, 5000, 80, 80);
//    parapath.

    // parapath.addRect(
    //   Rect.fromLTRB(70.0, 80.0, 20.0, 10),
    // );
    // parapath.addRRect(
    //   RRect.fromRectXY(Rect.fromLTRB(5, 80, 9, 50,)),
    // );
    //  p
    // paint.color = Colors.pink;
    canvas.drawPath(path, paint);
  }

感谢您的宝贵时间。

Answer 1

试试这个

class MyParallelogram extends CustomPainter{
  @override
  void paint(Canvas canvas, Size size) {

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 0, 0, 0)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 0.5;
     
    Path path_0 = Path();
    path_0.moveTo(0,0);
    path_0.lineTo(size.width,0);
    path_0.lineTo(size.width,size.height);
    path_0.lineTo(0,size.height);
    path_0.lineTo(0,0);
    path_0.close();

    canvas.drawPath(path_0, paint_0);

  Paint paint_1 = new Paint()
      ..color = Color.fromARGB(255, 0, 0, 0)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 0.5;
 
    Path path_1 = Path();
    path_1.moveTo(size.width*0.05,size.height*0.13);
    path_1.lineTo(size.width*0.80,size.height*0.13);
    path_1.lineTo(size.width*0.95,size.height*0.87);
    path_1.lineTo(size.width*0.20,size.height*0.87);
    path_1.lineTo(size.width*0.05,size.height*0.13);
    path_1.close();

    canvas.drawPath(path_1, paint_1);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return true;
  }
}

无法在 Flutter 中使用自定义绘画制作自定义平行四边形

Unable to make a custom parallelogram using Custom paint in Flutter

android

flutter

dart

material-design

mobile-application