Ways to create a rounded image or image avatar in Flutter

When writing a flutter application, most of the time we come across situations when we have to use circular images. These images are required to create beautiful UI’s where a profile pic or an avatar is required, just like a WhatsApp profile pic. In this article, I am writing about the ways you can create an avatar in Flutter.

Container with a rounded image:

The first and very useful way is to create a container and inside the container, decoration uses a decorated image.

Container(
  decoration: BoxDecoration(
    image: DecorationImage(image:     AssetImage("assets/images/profile_default.jpeg"),fit: BoxFit.fill),
    color: Colors.white,
    shape: BoxShape.circle,
  ),
)

Using a container helps in setting the custom size of the avatar. And the property named shape helps in setting the shape of the box. In the case of a circular avatar, we write BoxShape.circle. As we are using BoxFit.fill so the image will try to fill the circular box giving an elegant look.

Using Circle Avatar:

To have a circular profile pic, you can have a circular avatar with an image loaded from assets. To give a custom size to the avatar using a Sized Box Widget.

Here Clip Oval is used to force the seized box to stay inside the Circle Avatar.

CircleAvatar(
    backgroundColor: Colors.transparent,
    child: SizedBox(
      width: 60,
      height: 60,
      child: ClipOval(
        child: Image.asset("Assets/Images/music_default.png",
      ),
    )
)

Loading Image from a Custom Url:

To load an image from Custom URL into a circle avatar use the Network Image widget that downloads images from the internet and shows it inside the app.

CircleAvatar(
   radius: 30.0,
   backgroundImage:NetworkImage('https://via.placeholder.com/150'),     backgroundColor: Colors.transparent,)

Using Clip Oval:

You can always use the ClipOval widget if you don’t want to use the Circle Avatar.

ClipOval(
  child: Image.network(
    'https://via.placeholder.com/150',
    width: 100,
    height: 100,
    fit: BoxFit.cover,
  ),
),

You can see this in action on the music player programmed by me.

If the article helped in increasing knowledge don’t forget to clap.