How to paint arc or moon shape over another circle in flutter

Question

I really need your help to create or paint this kind of container in a flutter,

What I Want is below pic as a result

this is to show user profiles or different users inside this container like this, please help me out with how to do this I would really like you to appreciate your help, thanks in advance

What I did so far:

 Container(
                              decoration: BoxDecoration(
                                  gradient: LinearGradient(
                                    begin: Alignment.topRight,
                                    end: Alignment.bottomLeft,
                                    colors: [
                                      Color(0XFF8134AF),
                                      Color(0XFFDD2A7B),
                                      Color(0XFFFEDA77),
                                      Color(0XFFF58529),
                                    ],
                                  ),
                                  shape: BoxShape.circle),
                              child: Container(
                                decoration: BoxDecoration(
                                  color: Colors.white,
                                  shape: BoxShape.circle,
                                  image: DecorationImage(
                                    image: AssetImage(
                                      IconAssets.user_icon,
                                    ),
                                    fit: BoxFit.cover,
                                  ),
                                ),
                                margin: EdgeInsets.all(AppMargin.m2),
                                padding: const EdgeInsets.all(AppPadding.p3),
                              ),
                            ),

Result:

please help me out how to create like above picture , thank you

Answer 1

I am using PathOperation.difference to paint the moon.

class MoonPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final center = Offset(size.width / 2, size.height / 2);
    final paint = Paint()
      ..shader = const LinearGradient(
        begin: Alignment.topRight,
        end: Alignment.bottomLeft,
        colors: [
          Color(0XFF8134AF),
          Color(0XFFDD2A7B),
          Color(0XFFFEDA77),
          Color(0XFFF58529),
        ],
      ).createShader(Rect.fromLTRB(0, 0, size.width, size.height));

    Path path1 = Path()
      ..addOval(Rect.fromCenter(
          center: center, width: size.width, height: size.height));

    Path path2 = Path()
      ..addOval(
        Rect.fromCenter(
          center: Offset(
            center.dx - 10,
            center.dy - 10,
          ),
          width: size.width - 10,
          height: size.height - 10,
        ),
      );
    canvas.drawPath(
      Path.combine(PathOperation.difference, path1, path2),
      paint,
    );
  }

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

SizedBox(
  width: 300,
  height: 300,
  child: CustomPaint(
    painter: MoonPainter(),
  ),
),

You can include another oval inside paint. Change the color and decorate the way you like

Answer 2

This gives you a basic idea of how you can draw an arc using paint and place it over another widget.

https://dartpad.dev/?null_safety=true&id=0cc9f5ad27e13bc76b8cee125dabfd71

Answer 3

Is this what you want?

child: Container(
          width: 400,
          height: 400,
          decoration: BoxDecoration(
              gradient: LinearGradient(
                begin: Alignment.topRight,
                end: Alignment.bottomLeft,
                colors: [
                  Color(0XFF8134AF),
                  Color(0XFFDD2A7B),
                  Color(0XFFFEDA77),
                  Color(0XFFF58529),
                ],
              ),
              shape: BoxShape.circle),
          child: Align(
            child: Container(
              width: 350,
              height: 350,
              decoration: BoxDecoration(
                color: Colors.blue,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ),