DEV Community

Cover image for Let's Create A Circle Image (Avatar) With A Border In Flutter
Issam El Nasiri
Issam El Nasiri

Posted on • Updated on

Let's Create A Circle Image (Avatar) With A Border In Flutter

Circle Images or Avatars with a border are pretty much everywhere. There wasn't any simple example code in Flutter to achieve this. So I've created my own small tutorial to create an Avatar in Flutter.

This is what we want:
Alt Text

The easiest way to achieve this is by using a container with a decoration. In the decoration you would change the shape to a Circle with BoxShape.circle. Also give the container a padding (to all sides) by using EdgeInsets.all(7). And in the boxDecoration, give it a color for the border.

In the child, you'll pass the CircleAvatar with the image and radius.

And that should be it! 😄

Code:
Alt Text

I hope you find this tutorial somewhat useful. I apologize for my writing skills as I am still learning on how to explain things in a better way 😅😅

Discussion (1)

Collapse
yunweneric profile image
Erickeyz

I came through something similar like this.

Here is my approach.

CircleAvatar(
radius: 40.0,
backgroundColor: Style.greenColor,
child: CircleAvatar(
radius: 36.0,
backgroundImage: AssetImage(
'assets/images/ejaraLauncherIcon.jpg',
),
),
)