title: how to overlay a circular image on the top of a card (half in the card and half outside the card)?
body: <p>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.</p>
  
  <p>here is the code that isn't giving the desired result like the image below:</p>
  
  <pre><code>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: &lt;Widget&gt;[
  
      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
        ),
      ),
    ],
  );
  </code></pre>
  
  <p>}
  }</p>
  
  <p><a href="https://i.stack.imgur.com/YU7T2.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/YU7T2.jpg" alt="enter image description here"></a></p>