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

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

CodePudding user response：

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,
              ),
            ),
          ),
        ),

CodePudding user response：

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