In Flutter, I can't properly position in Stack

Question

   Stack(
      children: [
        Container(
          height: MediaQuery.of(context).size.height * 0.5,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(100.0),
                bottomRight: Radius.circular(100.0)),
            color: darkBlue,
          ),
        ),
        Positioned(
            bottom: 0,
            left: MediaQuery.of(context).size.width / 3,
            child: CircleAvatar(
                backgroundColor: white,
                radius: 70,
                child: Image.asset('assets/images/homepage.png'))),
      ],
    )

When I set the value as bottom: 0 in the code, since the image is inside the Stack, it sees it as a border and moves the image to the bottom of the Stack. But what I want is to place the image in the center of the Container, as shown by the black circle in the image.

Answer 1

You need to pass negative half of height to bottom value to get that, don't forget to set Stack's clipBehavior to none . Try this:

Stack(
    clipBehavior: Clip.none,// <-- add this
    children: [
      Container(
        height: MediaQuery.of(context).size.height * 0.5,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(100.0),
              bottomRight: Radius.circular(100.0)),
          color: darkBlue,
        ),
      ),
      Positioned(
          bottom: -100/2,// <-- add this
          left: MediaQuery.of(context).size.width / 3,
          child: CircleAvatar(
              backgroundColor: white,
              radius: 70,
              child: Image.asset('assets/images/homepage.png'))),
    ],
  ),

Answer 2

try this:

   Stack(

  alignment: Alignment.center
  children: [
    Container(
      height: MediaQuery.of(context).size.height * 0.5,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(100.0),
            bottomRight: Radius.circular(100.0)),
        color: darkBlue,
      ),
    ),
    CircleAvatar(
            backgroundColor: white,
            radius: 70,
            child: Image.asset('assets/images/homepage.png'))
  ],
)

Answer 3

Placing bottom on half image will be bottom:-halfImageHeight , And the default clipBehavior of Stack is hardEdge which is needed to to set Clip.none

     Stack(
        clipBehavior: Clip.none,
        children: [
        /// background widgets

        Position(
         bottom: -70 // while radius is 70
         left: MediaQuery.of(context).size.width / 2 - 70, // remove half width , maybe left:0 and right:0 will work as well

---

Placing center you can use Align widget

Align(
  alignment: Alignment.center, //default
  child: CircleAvatar(
      
)