Невозможно создать пользовательский параллелограмм, используя пользовательскую краску в Flutter

#android #flutter #dart #material-design #mobile-application

#Android #flutter #dart #материал-дизайн #мобильное приложение

Вопрос:

Это форма, которую я хочу создать This the Screen Shot from my phone

Я пытаюсь создать параллелограмм в контейнере, поскольку это требование пользовательского интерфейса. Что мне удалось, так это этот код, чтобы сделать его немного похожим на статический дизайн. даже в этом случае я не могу переместить начало координат или начальную точку фигуры. Как вы можете видеть на снимке экрана, зеленая часть — это форма, а розовая часть — контейнер, и вся информация должна отображаться в форме. Также, если кто-нибудь может предложить способ добавления стиля в форму. Я вставил приведенный ниже код, и в этом коде я прокомментировал всю свою работу, которая, как я думал, сработает, но не сработала.

 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);
  }
  

Спасибо, что уделили вам время.

Ответ №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;
  }
}