I want to center the camera icon but i couldnt do it. I tried to use an image instead of an icon but this still didnt work. I think it doesnt work because it is not possible to place an icon on a CircleAvatar but there must be a way to this. Here is my Code:
return SizedBox(
height: 115,
width: 115,
child: Stack(
clipBehavior: Clip.none,
fit: StackFit.expand,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/Profile Image.png"),
),
Positioned(
right: -16,
bottom: 0,
child: SizedBox(
height: 46,
width: 46,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50),
side: BorderSide(color: Colors.white),
),
color: Color(0xFFF5F6F9),
onPressed: () {},
// TODO: Icon not centered.
child: Center(child: Icon(Icons.camera_alt_outlined)),
)))
],
),
);
Widget build(BuildContext context) {
return SizedBox(
height: 115,
width: 115,
child: Stack(
clipBehavior: Clip.none,
fit: StackFit.expand,
children: [
CircleAvatar(
backgroundImage: AssetImage("assets/images/Profile Image.png"),
),
Positioned(
bottom: 0,
right: -25,
child: RawMaterialButton(
onPressed: () {},
elevation: 2.0,
fillColor: Color(0xFFF5F6F9),
child: Icon(Icons.camera_alt_outlined, color: Colors.blue,),
padding: EdgeInsets.all(15.0),
shape: CircleBorder(),
)),
],
),
);
}
I've removed the SizedBox and used a RawMaterialButton instead.