将图像堆叠在两个小部件中（颤动）

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

尝试在 Stack 中使用 Positioned 并使溢出 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'),
                ),
              )
            ],
          )

将图像堆叠在两个小部件中（颤动）

stack an image in two widgets (flutter)

stack

background

image

dart

flutter