Creating Circular Image/CircleAvatar in Flutter The Best Way (Code)

4 min read

While developing a Flutter app, you may want to display an image in a circle shape for showing a user’s photo on a profile page or in a chat listing. Flutter allows you to design a circular image in multiple ways such as using ClipRRect, Container, etc. But in this tutorial, we’ll learn to create a circular image in Flutter using CircleAvatar.

Here’s what we’ll cover:

• How to Create a Circular Image using CircleAvatar in Flutter
• Showing Circular Image or CircleAvatar from Internet
• Changing Circular Image or CircleAvatar Size
• Adding Border to Circular Image or CircleAvatar
• Changing Circular Image or CircleAvatar border size
• Changing Background Color
• Handling ErrorCallback

How to Create a Circular Image using CircleAvatar in Flutter

To create a Circular Image in Flutter, use a widget called CircleAvatar. CircleAvatar is simply a widget used to display a user profile picture. In the absence of a user’s profile picture, CircleAvatar can display the user’s initials. 

Steps to create a circular image in Flutter:

1. Add the CircleAvatar widget to your dart file.
2. Add backgroundImage parameter.
3. Display local image using AssetImage(‘YOUR-IMAGE-PATH’) and assign it to backgroundImage.
4. Run your app.

Code Example

CircleAvatar(
  backgroundImage: AssetImage('assets/images/cat3.png'),
)

Output

Tip: Before you add a circular image, ensure you have an image added to your app first. See how to do it here.

Showing Circular Image or CircleAvatar from Internet

You may want to display a circular image from the internet to show the user’s profile picture.

To show an image from the internet, simply add the NetworkImage(‘YOUR-IMAGE-PATH’) to the backgroundImage parameter of the CircleAvatar.

Code Example

CircleAvatar(
  backgroundImage:
      NetworkImage('https://picsum.photos/id/237/200/300'),
)

Output

Looking to add some pizzazz to your Flutter app design? Then you’ll definitely want to check out our blog post on how to set background images in Flutter. By pairing that technique with the circular image creation we’re exploring in this post, you’ll have all the tools you need to create beautiful and engaging interfaces that will stand out from the crowd.

Changing Circular Image or CircleAvatar Size

To change the size of the circular image, add the radius parameter inside the CircleAvatar and assign the appropriate value.

Code Example

CircleAvatar(
  backgroundImage: AssetImage('assets/images/cat3.png'),
  radius: 220,
)

Output

Adding Border to Circular Image or CircleAvatar

Sometimes you may want to display a border around your circular image/CircleAvatar to stand out in a design.

CircleAvatar doesn’t have any parameter specific to the border. Instead, you can add CircleAvatar (with a smaller radius) inside another CircleAvatar to create a UI-like border.

To add border to CircleAvatar:

1. Add one CircleAvatar with backgroundColor set to Colors.black and radius set to 120.
2. Add the child parameter and assign the new CircleAvatar with backgroundImage parameter and radius set to 110 (smaller than the outer CircleAvatar).

Code Example

CircleAvatar(
  backgroundColor: Colors.black,
  radius: 120,
  child: CircleAvatar(
    radius: 110,
    backgroundImage: AssetImage('assets/images/cat3.png'),
  ),
)

Output

Changing Circular Image or CircleAvatar border size

To change the CircleAvatar border size, first, create a border around CircleAvatar by wrapping it inside another CircleAvatar. Set the parent CircleAvatar radius to higher than the inner CircleAvatar.

Code Example

CircleAvatar(
  backgroundColor: Colors.black,
  radius: 150,
  child: CircleAvatar(
    radius: 110,
    backgroundImage: AssetImage('assets/images/cat3.png'),
  ),
)

Output

Changing Background Color

To change the background color of the circular image, add the backgroundColor parameter inside the CircleAvatar and assign a suitable color.

Code Example

CircleAvatar(
  backgroundImage: AssetImage('assets/images/cat3.png'),
  backgroundColor: Colors.greenAccent,
  radius: 120,
)

Output

Handling ErrorCallback

Your app might have some issues in showing the image. Without handling ErrorCallback it becomes difficult to identify the issue and fix it.

To add ErrorCallback to a circular image:

• Add the onBackgroundImageError parameter inside the CircleAvatar.
• Assign the function that you will utilize to understand the issue.

Code Example

CircleAvatar(
  backgroundImage: const AssetImage('assets/images/cat3.png'),
  radius: 120,
  onBackgroundImageError: (e, s) {
    debugPrint('image issue, $e,$s');
  },
)

Output

Hint: To see ErrorCallback in action, try changing the name of the image in the code and run the app.

Thanks!

Conclusion

In this tutorial, we learned how to create a circular image in Flutter using CircleAvatar. We also learned how to display images from the network, change the size of the circular image and add borders to it.

Take a look at other interesting Flutter tutorials.

Check Platform in Flutter The Right Way in 2023 (Code)

3 Easy Steps to Close Keyboard in Flutter with Code (2023)