Menu
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)),
)))
],
),
);
465
Flutter Square Avatar This is a representation of an image profile into a square shape. In this avatar, your profile image edges will be a square instead of standard and circle.
Adding Circle Avatar Adjusting Size and background color of Circle Avatar Sample Output: (Images, Icon and Circle Avatar together) Full Application Code: Adding Images Step 1: First of all, open your flutter application(project) folder. On the top of the android studio, you may find this location if you forgot. Step 2:
In this example, we are going to show you how to add icons to your Flutter app. You will also learn to change the size, color, or icon as well as to add icon buttons, and make the default icon clickable in your Flutter App. See the examples below: How to Add Icon in Flutter App? You can use Icon () widget to add icons to your Flutter App.
There you need to create a new folder for keeping your images. As an example, we create a folder named ‘images’. Step 3: Put the images those you want to insert into your flutter project. As an example an image, two png images named ‘rose’, and ‘dahlia’ are placed. Step 4: In android studio, make the application program in ‘Project’ explorer mode.
Flutter Circle Avatar is most commonly used for applications. It typically represents an image in a circular shape or the user's initial if the image is not used. The real-time app examples are Facebook, Twitter, Instagram, Linked In, and others. Flutter Standard Widget is commonly used for the Dev forum community or the public forum community.
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.
90
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),
),
),
]
),
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
