how to overlay a circular image on the top of a card (half in the card and half outside the card)?

Question

I'm new to flutter and recently I tried to design a page where I have to put an image on the top of a card with half of it on the card and half of it outside the card, I tried Stack but couldn't design what I wanted! here is an example of what I'm trying to design.

here is the code that isn't giving the desired result like the image below:

class ContainerWithCircle extends StatelessWidget {
final double circleRadius = 100.0;
final double circleBorderWidth = 8.0;
@override
Widget build(BuildContext context) {
   return Stack(
  alignment: Alignment.topCenter,
  children: <Widget>[

    Container(
      width: circleRadius,
      height: circleRadius,
      decoration:
          ShapeDecoration(shape: CircleBorder(), color: Colors.white),
      child: Padding(
        padding: EdgeInsets.all(circleBorderWidth),
        child: DecoratedBox(
          decoration: ShapeDecoration(
              shape: CircleBorder(),
              image: DecorationImage(
                  fit: BoxFit.cover,
                  image: NetworkImage(
                    'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
                  ))),
        ),
      ),
    ),
    Padding(
      padding: EdgeInsets.only(top: circleRadius / 2.0),
      child: Container(
        // Some content
      ),
    ),
  ],
);

} }

Answer 1

In order to create a layout like the one you specified, you can simply use a Stack and place the card with a padding to the top. Resources for you to look up: Stack, DecoratedBox & CircleBOrder. The following code shows an example implementation:

class ContainerWithCircle extends StatelessWidget {
  final double circleRadius = 100.0;
  final double circleBorderWidth = 8.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.topCenter,
      children: <Widget>[
        Padding(
          padding: EdgeInsets.only(top: circleRadius / 2.0),
          child: Container(
            //replace this Container with your Card
            color: Colors.white,
            height: 200.0,
          ),
        ),
        Container(
          width: circleRadius,
          height: circleRadius,
          decoration:
              ShapeDecoration(shape: CircleBorder(), color: Colors.white),
          child: Padding(
            padding: EdgeInsets.all(circleBorderWidth),
            child: DecoratedBox(
              decoration: ShapeDecoration(
                  shape: CircleBorder(),
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage(
                        'https://upload.wikimedia.org/wikipedia/commons/a/a0/Bill_Gates_2018.jpg',
                      ))),
            ),
          ),
        )
      ],
    );
  }
}