如何在一张油漆上绘制 2 个重叠的图标 canvas flutter

Question

I want to make 2 overlapped circle icons on a Custom paint as in the diagram at the end. I don't know how I can implement the children widget on the Paint widget or maybe put the icons on the CustomPaint() widget and then overlap it on the canvas. Is there a way to do this and have them in one canvas and place them in an overlapping manner?

What I have

return Container(
  height: 170,
  width: 300,
  margin: EdgeInsets.only(bottom: 20, left: 20, right: 20),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(30),
    color: Color(0xFFf7f7f7),
  ),
  child:Row(
    children: [
      Expanded(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
                  Align(
                    alignment: Alignment(1.5, 5),
                    child: Text(
                      "Zilla Card",
                      textAlign: TextAlign.left,
                      style: TextStyle(fontWeight: FontWeight.bold),
                    ),
                  ),
            SizedBox(height: 20),
            Align(
              alignment: Alignment(1.5, 5),
              child: Text(
                "\$4,158.29",
                textAlign: TextAlign.left,
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            Align(
              alignment: Alignment(1.5, 5),
              child: Text(
                "**** 5722",
                textAlign: TextAlign.left,
              ),
            ),
          ],
        ),
      ),
      Stack(
        children: [
              Container(
                width: 230,
                height: 170,
                child: CustomPaint(
                  size: Size(230,(300*0.5666666666666667).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
                  painter: RPSCustomPainter(),
                ),
              ),
          Align(
            alignment: Alignment(1, 1),
            child: Container(
              height: 20,
              width: 20,
              alignment: FractionalOffset(2, 0),
              //child: Image.asset("assets/images/overlap.png"),
              clipBehavior: Clip.none,
            ),
          ),

        ],
      ),
    ],
  ),
);

CustomPainter code

I simply painted the circle icon on the canvas but when I try to paint another icon, there was an error: The name 'icon' is already defined since I already used icon for the first icon.

class RPSCustomPainter extends CustomPainter{
@override
void paint(Canvas canvas, Size size) {
Paint paint0 = Paint()  
..color = Color(0xFF004952)
..style = PaintingStyle.fill  
..strokeWidth = 1;
Path path0 = Path();
path0.moveTo(size.width,size.height*0.2347647);
path0.lineTo(size.width,size.height*0.3320588);
path0.quadraticBezierTo(size.width,size.height*0.7058235,size.width,size.height*0.8304118);
path0.cubicTo(size.width*1.0056000,size.height*0.9074118,size.width*0.9682667,size.height*0.9868824,size.width*0.9194667,size.height);
path0.cubicTo(size.width*0.7554333,size.height*0.9941176,size.width*0.4273667,size.height,size.width*0.2633333,size.height);
path0.cubicTo(size.width*0.3417000,size.height*0.9793529,size.width*0.2974667,size.height*0.7336471,size.width*0.4286667,size.height*0.6625294);
path0.cubicTo(size.width*0.5660333,size.height*0.6025294,size.width*0.6275667,size.height*0.6554118,size.width*0.7332333,size.height*0.3844118);
path0.quadraticBezierTo(size.width*0.8802000,size.height*0.1584706,size.width,size.height*0.1562353);
path0.lineTo(size.width,size.height*0.2347647);
path0.close();

canvas.drawPath(path0, paint0);


Paint paint1 = Paint()
  ..color = Color(0XFFe8f64b)
  ..style = PaintingStyle.fill
  ..strokeWidth = 1;


Path path1 = Path();
path1.moveTo(size.width*0.9584333,size.height*0.1626471);
path1.cubicTo(size.width*0.8021333,size.height*0.1377647,size.width*0.6861667,size.height*0.2499412,size.width*0.6637667,size.height*0.3031765);
path1.cubicTo(size.width*0.5617333,size.height*0.4976471,size.width*0.4517000,size.height*0.5153529,size.width*0.3221333,size.height*0.6101765);
path1.cubicTo(size.width*0.2196000,size.height*0.6835882,size.width*0.1613667,size.height*0.9211765,size.width*0.1905667,size.height);
path1.cubicTo(size.width*0.2107167,size.height,size.width*0.2510167,size.height,size.width*0.2711667,size.height);
path1.cubicTo(size.width*0.3202333,size.height*0.9939412,size.width*0.3097000,size.height*0.7321176,size.width*0.4311667,size.height*0.6568824);
path1.cubicTo(size.width*0.6090333,size.height*0.6081765,size.width*0.6445000,size.height*0.5932941,size.width*0.7236667,size.height*0.4056471);
path1.cubicTo(size.width*0.7604333,size.height*0.3480588,size.width*0.8155333,size.height*0.2334118,size.width*0.9584333,size.height*0.1626471);
path1.close();

canvas.drawPath(path1, paint1);

final icon = Icons.circle_outlined;
TextPainter textPainter = TextPainter(textDirection: TextDirection.rtl);
textPainter.text = TextSpan(text: String.fromCharCode(icon.codePoint),
    style: TextStyle(fontSize: 40.0,fontFamily: icon.fontFamily));
textPainter.layout();
textPainter.paint(canvas, Offset(170.0,100.0));
}
@override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}

}

What I want to achieve

Answer 1

This is what I would do

• create 2 white circle with canvas.drawCircle

• create 2 green (background color) circle as a outer border and inner border of the 2nd circle

  Paint paintWhite = Paint()..color = Color(0XFFffffff)..style = PaintingStyle.stroke..strokeWidth = 2; Paint paintGreenBackground = Paint()..color = Color(0xFF004952)..style = PaintingStyle.stroke..strokeWidth = 2; // 1st white circle canvas.drawCircle( Offset(size.width * 0.8, size.height * 0.8), 12, paintWhite); // 2nd white circle canvas.drawCircle( Offset(size.width * 0.8 - 15, size.height * 0.8), 12, paintWhite); // outer border canvas.drawCircle( Offset(size.width * 0.8 - 15, size.height * 0.8), 14, paintGreenBackground); // inner border canvas.drawCircle( Offset(size.width * 0.8 - 15, size.height * 0.8), 10, paintGreenBackground);