stack an image in two widgets (flutter)

Question

My Goal is to create like this

i want my image to show in the white big container and the background

i tried to do that

        Stack(
          overflow: Overflow.clip,
          alignment: AlignmentDirectional.topCenter,
          fit: StackFit.loose,
          children: <Widget>[


            Container(
              height: 458.4,
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(20),
                    topRight: Radius.circular(20)
                )
              ),
            ),

            GFAvatar(
              backgroundImage:AssetImage(url),
              shape: GFAvatarShape.standard,
              radius: 70,
              borderRadius: BorderRadius.circular(20),
            )
          ],
        ),
]

and not working it is stacken in the container only

Solution

try to use Positioned inside the Stack and make the overflow Overflow.visible

Stack(
            overflow: Overflow.visible,
            alignment: AlignmentDirectional.topCenter,
            fit: StackFit.loose,
            children: <Widget>[
              Container(
                height: 400.4,
                width: double.infinity,
                decoration: BoxDecoration(
                    color: Colors.amberAccent,
                    borderRadius: BorderRadius.only(
                        topLeft: Radius.circular(20),
                        topRight: Radius.circular(20))),
              ),
              Positioned(
                top: -50,
                child: CircleAvatar(
                  radius: 50,
                  backgroundImage:
                      NetworkImage('https://picsum.photos/250?image=2'),
                ),
              )
            ],
          )