flutter - 为CircleAvatar wiget overflow hidden (Flutter)

我需要把图标放入CircleVatar小部件，允许用户上传他的图像。
像这样：

这是我的代码：

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

但我有这样的结果：

带有摄像头图标的内部框从父窗口小部件溢出（CircleVatar）；

最佳答案

你想要的可以简单地用-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,
        ),
      ),

输出：