Overflow hidden for CircleAvatar wiget (Flutter) - flutter

Question

I need to put icon into CircleAvatar Widget to allow user upload his image.
Something like this:
This is my code:
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,
)
But I have this result:
Internal box with camera icon overflow from parent widget (CircleAvatar);

Answer 1

What you want can be simply done with - ClipOval
Your Code:
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,
),
),
Output:

Answer 2

You can create your Custom Clipper to give the circular bottom to your widget.
You need to use the ClipPath widget for it, pass your widget in your case Container containing your camera icon.
and in clipper pass your CustomClipper.
ClipPath
return ClipPath(
child: your_widget,
clipper: BottomWaveClipper(),
);
CustomCliper
class BottomCircleClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
//your path to draw circle
}
#override
bool shouldReclip(TriangleClipper oldClipper) => false;
}
Here are some links that will help you.
https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/
https://medium.com/flutter-community/clipping-in-flutter-e9eaa6b1721a