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

4 Answers

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.

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

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

Try this two things

You can wrap your Icon with Positioned widget then set top left right sizes for it.

again another way wrap with Align widget then set alignment: Alignment.center

1

Your Answer

Sign up or log in

Sign up using Google Sign up using Facebook Sign up using Email and Password Submit

Post as a guest

Post Your Answer Discard

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy