how created custom-painter flutter

I don’t know where you checked, but there are a lot of resources to learn how to make a custom painter.

However, I’ve created a custom painter for you, but it does not have dynamic size, so the app bar won’t adjust based on different screen sizes. You must update the paths with dynamic sizes to make the CustomPainter responsive.

First create a custom AppBar

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Size get preferredSize => Size.fromHeight(120.0);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      flexibleSpace: CustomPaint(
        size: Size(MediaQuery.of(context).size.width, 120),
        painter: RPSCustomPainter(color: Colors.blue),
      ),
      title: Text('Custom App Bar'),
      centerTitle: true,
    );
  }
}

Then the next step is to create your desired CustomPainter

class NSKCustomPainter extends CustomPainter {
  
  final Color color;
  NSKCustomPainter({this.color = Colors.grey});
  
  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();

    path.moveTo(0,0);
    path.lineTo(284,0);
    path.lineTo(567,0);
    path.lineTo(567,64.5);
    path.lineTo(482,64.5);
    path.cubicTo(472.833,64.6667,452.206,71.4447,443,87);
    path.cubicTo(428.554,111.408,422.049,112.492,410.135,114.478);
    path.lineTo(410,114.5);
    path.cubicTo(404.137,115.477,345.953,115.509,284,115.235);
    path.cubicTo(222.047,115.477,163.863,115.477,158,114.5);
    path.lineTo(157.865,114.478);
    path.cubicTo(145.951,112.492,139.446,111.408,125,87);
    path.cubicTo(115.794,71.4447,95.1667,64.6667,86,64.5);
    path.lineTo(0,64.5);
    path.lineTo(0,0);
    path.close();

    Paint paintFill = Paint()..style=PaintingStyle.fill;
    paintFill.color = color;
    canvas.drawPath(path,paintFill);
  }

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

Finally, you can import your custom AppBar anywhere in the app.

Scaffold(
   appBar: CustomAppBar(),
   body: SizedBox(),
)

Just a tip: you can update your paths as follows to make them responsive.

path.moveTo(size.width,0);

If you prefer a simpler CustomPainter, you can use the code below. However, note that the AppBar shape may not exactly match the image you provided.

  @override
  void paint(Canvas canvas, Size size) {
    Path path = Path();
    
    path.moveTo(size.width,0);
    path.lineTo(0,0);
    path.lineTo(0,60);
    path.lineTo(80,60);
    path.cubicTo(91,60,100,68,100,80);
    path.cubicTo(100,91,108,100,120,100);
    path.lineTo(380,100);
    path.cubicTo(391,100,400,91,400,80);
    path.cubicTo(400,68,408,60,420,60);
    path.lineTo(500,60);
    path.lineTo(500,0);
    path.close();

    Paint paintFill = Paint()..style=PaintingStyle.fill;
    paintFill.color = color;
    canvas.drawPath(path,paintFill);
  }