Futurism logo

Mastering Circle Avatar image in Flutter

Circle image in Flutter

By IonicFireBaseAppPublished 29 days ago 3 min read
Like
Mastering Circle Avatar image in Flutter

While developing a Flutter app, we often need to display an image in a circular shape. This is mostly used in profile picture or in chat list screen. Seeing this demand, the Flutter team created a widget in the Material Library called Circle Avatar. Today we will do a deep dive in the Circle Avatar widget and explore all the amazing feature it provides with some examples and their implementation.

We will cover:

  • Displaying a Circular Image using Circle Avatar in Flutter
  • Displaying name Initials using Circle Avatar in Flutter
  • Changing the size of the Circle Avatar
  • Changing the color of the Circle Avatar
  • Adding Border to the Circle Avatar
  • Handling Image Error in Circle Avatar

Displaying a Circular Image using Circle Avatar in Flutter

For creating a Circular Image in Flutter we use a widget called Circle Avatar. Circle Avatar is a widget used to display a user’s profile picture. If the user’s profile picture is missing, we display the user’s initials and if that is missing as well then we fallback to a background color.

Steps to create a circular image in Flutter using assets:

  1. Add the image you want displayed in the asset and your pubspec.yaml file.
  2. Add the CircleAvatar widget to your dart file.
  3. Add backgroundImage parameter in the widget.
  4. Display asset image using Image.asset(‘IMAGE-FILE-PATH’) and assign it to backgroundImage parameter.

CircleAvatar(

backgroundImage: Image.asset('assets/images/avatar.png'),

),

Steps to create a circular image in Flutter using images from the internet:

  1. Create the Circle Avatar widget to your dart file.
  2. Add backgroundImage parameter in the widget.
  3. Display image from the internet using Image.network(‘IMAGE-URL-LINK’) and assign it to backgroundImage.

CircleAvatar(

backgroundImage: Image.network('https://picsum.photos/id/337/200/300'),

)

Displaying name Initials using Circle Avatar in Flutter

Sometimes we just want to display initials of the user in the Circle Avatar as seen in the contacts app.

To add Strings to a Circle Avatar we use the child parameter of the widget.

CircleAvatar(

child: Text('MH'),

)

Changing the size of the Circle Avatar

To change the size of the circular image, use the radius parameter in the Circle Avatar and assign a double value to it.

CircleAvatar(

backgroundImage: Image.asset('assets/images/avatar.png'),

backgroundColor: Colors.blue,

)

To change the foreground color of the circular image, use the foregroundColor parameter in the Circle Avatar and assign a color to it.

CircleAvatar(

backgroundImage: Image.asset('assets/images/avatar.png'),

foregroundColor: Colors.yellow,

)

Adding Border to the Circle Avatar

Sometimes we want to a show a border to the Circle Avatar but the widget doesn’t provide a parameter to add a Border. To create a border, we add a bigger Circle Avatar to a smaller Circle Avatar.

To add border to the Circle Avatar:

  1. Create one Circle Avatar with backgroundColor as Colors.black and radius set to 100.
  2. Add a child parameter to the Circle Avatar and assign the new Circle Avatar with backgroundImage parameter and radius set to 80 (smaller radius than the outer Circle Avatar).

CircleAvatar(

backgroundColor: Colors.black,

radius: 100,

child: CircleAvatar(

radius: 80,

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

),

)

Handling Image Error in Circle Avatar

Sometimes there can be an issue while trying to display the image. To easily identify and handle these issues, we use the errorCallBack provided to us by Circle Avatar.

To add on Background Image Error to the CircleAvatar:

Add the onBackgroundImageError parameter inside the CircleAvatar to identify backgroundImage errors.

CircleAvatar(

backgroundImage: Image.asset('assets/images/avatar.png'),

radius: 100,

onBackgroundImageError: (exception, stackTrace) {

debugPrint('Background Image Issue: $exception,$stackTrace');

},

)

To add on Foreground Image Error to the Circle Avatar:

Add the onForegroundImageError parameter inside the CircleAvatar to identify backgroundImage errors.

CircleAvatar(

foregroundImage: Image.asset('assets/images/avatar.png'),

radius: 100,

onForegroundImageError: (exception, stackTrace) {

debugPrint('Foreground Image Issue: $exception,$stackTrace');

},

)

Handling Circle Avatar with ListView.builder

To create a List of users with Circle Avatar, we can use ListView.builder to generate a list of CircleAvatar.

ListView.builder(

itemCount: items.length,

itemBuilder: (BuildContext context, int index) {

return ListTile(

leading: CircleAvatar(

backgroundImage: NetworkImage(items[index].imageUrl),

radius: 20,

),

title: Text(items[index].name),

subtitle: Text(items[index].email),

);

},

)

Handling Circle Avatar with GridView.builder

To create a Grid of users with Circle Avatar, we can use Grid View.builder to generate a grid of Circle Avatar.

GridView.builder(

gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 3,

childAspectRatio: 1,

),

itemCount: items.length,

itemBuilder: (BuildContext context, int index) {

return GridTile(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

CircleAvatar(

backgroundImage: NetworkImage(items[index].imageUrl),

radius: 30,

),

Text(items[index].name),

],

),

);

},

)

Conclusion

In this tutorial, we took a deep dive into how to create a circular image in Flutter using Circle Avatar. Implement the Circle Avatar into your app can help you beautify the app and meet the Material Design standards set by Google Material Design team. It also helps personalize the user experience and adds a layer of sophistication to your UI. By mastering the Circle Avatar flutter widget, you can create visually appealing profiles images and chat images.

tech
Like

About the Creator

IonicFireBaseApp

IonicFireBase - Being a reliable mobile app development company we have delivered hundreds of readymade and custom apps that are working great on the play store. To solve all your app development needs and to provide the best apps.

Reader insights

Be the first to share your insights about this piece.

How does it work?

Add your insights

Comments

There are no comments for this story

Be the first to respond and start the conversation.

Sign in to comment

    Find us on social media

    Miscellaneous links

    • Explore
    • Contact
    • Privacy Policy
    • Terms of Use
    • Support

    © 2024 Creatd, Inc. All Rights Reserved.