how to overlap image on custompaint in Flutter? - flutter

Question

I'm a beginner at flutter. So I don't know if I'm doing this right or not!
I want to design like this -> design
Here's my custom paint ->
class RPSCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill;
Path path_0 = Path();
path_0.moveTo(size.width * 0.04, size.height * 1.04);
path_0.lineTo(size.width * 0.8, size.height * 1.04);
path_0.quadraticBezierTo(size.width * 0.79, size.height * 0.21,
size.width * 0.79, size.height * 0.16);
path_0.cubicTo(size.width * 0.79, size.height * -0.01, size.width * 0.27,
size.height * -0.18, size.width * 0.04, size.height * -0.4);
path_0.quadraticBezierTo(size.width * 0.05, size.height * -0.10,
size.width * 0.04, size.height * 1.04);
path_0.close();
canvas.drawPath(path_0, paint_0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
I tried to get the image on top of my CustomPaint but can't do it.
Here's the method I tried :
Image in customPaint
CustomPaint(
painter: RPSCustomPainter(),
child: Image.asset(
'assets/images/avater/cod2.png',
fit: BoxFit.fitHeight,
alignment: Alignment.center,
),
),
Custompaint and image in a Stack
Stack(
children: [
CustomPaint(
child: Container(),
painter: RPSCustomPainter(),
),
Container(
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
color: Colors.black,
),
child: Image.asset(
'assets/images/avater/pubg2.png',
fit: BoxFit.fill,
),
),
],
),
I implemented a Gridview.Count and I passed those methods on its children.
Here's the output :my output