складывать изображение в два виджета (флаттер)

Question

Моя цель - создать вот так

я хочу, чтобы мое изображение отображалось в большом белом контейнере и на фоне

я пытался сделать это

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

и не работает, это складывается только в контейнере

Answer 1

попробуйте использовать Positioned внутри Stack и сделать переполнение 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'),
                ),
              )
            ],
          )