flutter - 为 Circle Avatar 小部件 overflow hidden (Flutter)

Question

我需要将图标放入 CircleAvatar Widget 以允许用户上传他的图像​​。

像这样:

这是我的代码:

child: CircleAvatar(
  child: Stack(
    children: <Widget>[
      Positioned(
        bottom: 0,
        right: 0,
        left: 0,
        height: 33,
        child: Container(
          height: 20,
          width: 30,
          color: Color.fromRGBO(0, 0, 0, .74),
          child: Center(
            child:
                Icon(Icons.photo_camera, color: Colors.grey),
          ),
        ),
      )
    ],
  ),
  radius: 68.0,
  backgroundImage:
      NetworkImage('https://via.placeholder.com/300'),
  backgroundColor: Colors.transparent,
)

但我有这样的结果:

带有相机图标的内部框从父小部件 (CircleAvatar) 溢出；

Answer 1

你想要的可以简单地用 - ClipOval

您的代码:

body: Center(
        child: CircleAvatar(
          child: ClipOval(
            child: Stack(
              children: <Widget>[
                Image.network('https://via.placeholder.com/300'),
                Positioned(
                  bottom: 0,
                  right: 0,
                  left: 0,
                  height: 33,
                  child: GestureDetector(
                    onTap: (){
                      print('upload Clicked');
                    },
                    child: Container(
                      height: 20,
                      width: 30,
                      color: Color.fromRGBO(0, 0, 0, .74),
                      child: Center(
                        child: Icon(Icons.photo_camera, color: Colors.grey),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          radius: 68.0,
          // backgroundImage: NetworkImage('https://via.placeholder.com/300'),
          backgroundColor: Colors.transparent,
        ),
      ),

输出: