Flutter中如何通过Stack将IconButton放置在Container头像的右下角

问题原因 #

Positioned 组件仅能作为 Stack 的直接子节点时生效，你当前将其嵌套在头像容器内部，定位属性无法被Stack识别，因此无法展示到预期位置。

修正后代码 #

Center(
  child: Column(
    children: <Widget>[
      Stack(
        clipBehavior: Clip.none,
        children: [
          // 头像容器
          Container(
            margin: EdgeInsets.only(bottom: defaultSize),
            height: defaultSize * 15,
            width: defaultSize * 15,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                  color: Colors.white, width: defaultSize * 0.5),
              image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage(
                    'https://th.bing.com/th/id/OIP.1FbFcWycnyeemiMMsoIJ7gHaF7?w=182&h=145&c=7&r=0&o=5&dpr=1.25&pid=1.7'),
              ),
            ),
          ),
          // 右下角图标按钮
          Positioned(
            right: 0,
            bottom: 0,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                shape: BoxShape.circle,
              ),
              child: IconButton(
                  onPressed: () {}, icon: Icon(Icons.image)),
            )
          ),
        ],
      ),
      const Text("Nama Kamu Siapa ")
    ],
  )
)

注：额外给按钮外层加了白色圆形背景，避免图标和头像重叠时看不清，不需要可以自行删除该部分样式。

内容的提问来源于stack exchange，提问作者Imam Rizky GANTENG