Пользовательский интерфейс дизайна художника Flutter

Question

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

UI я пытаюсь достичь

Answer 1

Вы можете использовать создатель формы, создатель флаттершэйпмейкера

      import 'dart:ui' as ui;

child: CustomPaint(
  size: Size(WIDTH,(WIDTH*0.5833333333333334).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
  painter: RPSCustomPainter(),
),

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

  Paint paint_0 = new Paint()
      ..color = Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;
     
         
    Path path_0 = Path();
    path_0.moveTo(size.width*0.2498333,size.height*0.6431429);
    path_0.quadraticBezierTo(size.width*0.3126667,size.height*0.6487857,size.width*0.3318333,size.height*0.6125714);
    path_0.quadraticBezierTo(size.width*0.3334583,size.height*0.5638571,size.width*0.3763333,size.height*0.5537143);
    path_0.quadraticBezierTo(size.width*0.4162083,size.height*0.5637143,size.width*0.4181667,size.height*0.6108571);
    path_0.quadraticBezierTo(size.width*0.4385833,size.height*0.6505714,size.width*0.4998333,size.height*0.6417143);

    canvas.drawPath(path_0, paint_0);
  
    
  }

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