flutter - Flutter 自定义 Painter 设计 UI

Question

在过去的两天里，我正在尝试使用 Custom Painter 实现这样的 UI，但我仍然无法实现。有人可以帮我解决这个问题。如何在自定义画家中编写我的绘画功能以实现这样的 UI？

我正在努力实现的 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;
  }
  
}