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.
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! 😄
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 😅😅
Oldest comments (1)
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',
),
),
)