DEV Community

loading...
Cover image for Let's Create A Circle Image (Avatar) With A Border In Flutter

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

issamelnass profile image Issam El Nasiri Updated on ・1 min read

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 (0)

pic
Editor guide