Paint shape with flutter customPainter widget

Question

How i can paint something like this in flutter with CustomPainter: image

Answer 1

Try this and tweak the values to your convenience

class CurvedBarPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = Paint() 
    ..color = Colors.black;

    Path path = Path();
    path.lineTo(0.0, size.height * .58);
    path.quadraticBezierTo(size.width * .01, size.height * .95 , size.width * .15, size.height);
    path.lineTo(size.width * .85, size.height);
    path.quadraticBezierTo(size.width * .99, size.height * .95 , size.width, size.height * .6);
    path.lineTo(size.width, size.height * .2);
    path.quadraticBezierTo(size.width * .99, size.height * -.02, size.width * .9, 0.0);
    path.lineTo(size.width * .8, 0.0);
    path.quadraticBezierTo(size.width * .7, size.height * .01, size.width * .65, size.height * .3);
    path.quadraticBezierTo(size.width * .5, size.height , size.width * .35, size.height * .3);
    path.quadraticBezierTo(size.width * .3, size.height * .01, size.width * .2, 0.0);
    path.lineTo(size.width * .1, 0.0);
    path.quadraticBezierTo(size.width * .01, size.height * -.02, 0.0, size.height * .2);

    canvas.drawPath(path, paint);


  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;

}