How to design the below appbar shape in CustomPainter in Flutter?

Question

I am struggling with designing the below appbar design of the app in flutter i have checked various online resources,documentation,official flutter website but too much confused how to design the specifically this type of app bar in Flutter and dart.

This is image of the design that i am coding in flutter:

The problem i am facing is that i had try to build this design by using custompainter in the leading widget of the appbar but leading widget has fix space and we can not expand its space so i tried to design in the title of the app bar but i need these shapes in the start of the appbar and that i have researched this issue over google and find that we can design customappbaar by implementing the prefferedsize widget but in that as well i am unable to code i know this that it can be drawn by using the custom painter function canvas.draw but i am unable to know the parameters of that function and i am stuck on this problem from one week if anyone can guide how to do this i will be very helpful .Thanks

its my code i have obsoleted the wrong code so that if someone can see my approach and help me thanks

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext Context) {
    return AppBar(
        title: Container(
      color: Colors.blue,
      child: CustomPaint(
        painter: CustomPainter1(),
      ),
    ));
  }

  @override
  Size get preferredSize => Size.fromHeight(80.0);
}

class CustomPainter1 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(0xff55847A).withOpacity(0.5)
      ..style = PaintingStyle.fill;
//a circle
    canvas.drawCircle(Offset(10, 50), 100, paint1);
    canvas.drawCircle(Offset(30, -10), 100, paint1);
  }

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

Answer 1

You can use the preferredSize for CustomPaint size. Also shift radius px the top circle. I am use ClipRRect for on top to clip the top-left corner, we can also play with paint.

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return ClipRRect(
      borderRadius: const BorderRadius.only(
        topLeft: Radius.circular(20),
      ),
      child: CustomPaint(
        size: preferredSize,
        painter: CustomPainter1(),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(200.0);
}

class CustomPainter1 extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final radius = size.height / 2;

    var paint1 = Paint()
      ..color = const Color(0xff55847A).withOpacity(0.5)
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(0, 50), radius, paint1);
    canvas.drawCircle(Offset(radius, 0), radius, paint1);
  }

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