Flutter: How to place an Icon on a CircleAvatar and center it?
10,189
Solution 1
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.
Solution 2
Instead of using CircleAvatar prefer using a Container like this:
Container(
height: 46,
width: 46,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.green,
),
child: Icon(Icons.camera, color: Colors.white,),
alignment: Alignment.center,
),
Solution 3
Try this
CircleAvatar(
radius: 58,
backgroundImage: AssetImage("assets/images/Profile Image.png"),
child: Stack(
children: [
Align(
alignment: Alignment.bottomRight,
child: CircleAvatar(
radius: 18,
backgroundColor: Colors.white70,
child: Icon(CupertinoIcons.camera),
),
),
]
),
)
Author by
zweifärbbar
Updated on December 28, 2022Comments
-
zweifärbbar over 1 year
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)), ))) ], ), );
-
zweifärbbar about 3 yearsBoth ways did not work. It was not possible to wrap it in a Positioned because the ancestor is not a Stack.