Flutter Course, 7.8 Using CircleAvatar Widget

Hello! Today, we will learn about the CircleAvatar widget, which is one of the user interface (UI) components in Flutter. In this tutorial, we will detail the basic concepts of the CircleAvatar widget, various usage examples, and how to customize it. Learn how to enhance the user experience of your app using the CircleAvatar widget.

1. What is CircleAvatar?

CircleAvatar is a widget that is commonly used to display profile pictures or user avatars, having a circular shape. This widget can show various contents such as images, icons, and text in a circular format. The CircleAvatar widget is a very useful element for implementing various designs in user interfaces.

1.1 Basic Usage of CircleAvatar

To use the CircleAvatar widget, you can follow this basic format:

CircleAvatar(
  radius: 30.0,
  backgroundImage: NetworkImage("https://example.com/image.png"),
)

In the code above, radius sets the radius of the avatar, and backgroundImage specifies the image to be displayed inside the circle. This allows for a simple creation of a circular avatar.

2. Description of CircleAvatar Properties

The CircleAvatar widget provides various properties that enable customized designs. The main properties are as follows:

  • backgroundColor: Sets the background color of the avatar. You can specify the color to display when the image is not loaded.
  • backgroundImage: Sets the image to be displayed on the avatar. You can use either NetworkImage or AssetImage.
  • radius: Sets the radius of the avatar. The default value is 20.
  • child: This is a widget that can be added inside the avatar. It is typically used to add text or icons.

2.1 Example of CircleAvatar Properties

CircleAvatar(
  radius: 50,
  backgroundColor: Colors.blue,
  child: Text("A", style: TextStyle(color: Colors.white, fontSize: 24),),
)

The above example creates a circular avatar with a blue background color and displays the text ‘A’ in white. This example illustrates how to create a CircleAvatar widget that includes text.

3. Various Usage Examples of CircleAvatar

The CircleAvatar widget can be used for various purposes beyond representing a profile picture. Below are some usage examples.

3.1 User Profile Image

CircleAvatar is often used to display user profile images in social media apps. Here is an example of loading a profile image:

CircleAvatar(
  radius: 40,
  backgroundImage: NetworkImage("https://example.com/user_profile.jpg"),
)

3.2 Color-Based Avatar

It is also nice to create avatars that can be identified by color based on specific users or categories. For example, it can be implemented in the following format:

CircleAvatar(
  radius: 30,
  backgroundColor: Colors.red,
  child: Text("U", style: TextStyle(color: Colors.white)),
)

3.3 Alternative Image

If loading an image from the network is not possible, it is also possible to provide an alternative image. In this case, the backgroundColor property can be utilized to set the background color of the avatar. This can be implemented in the following manner:

CircleAvatar(
  radius: 30,
  backgroundColor: Colors.grey,
  child: Icon(Icons.person, color: Colors.white),
)

4. Customizing CircleAvatar

To make CircleAvatar more unique, you can combine its properties appropriately to apply your own style. Below are some tips for customizing CircleAvatar:

4.1 Adding a Border

If you want to add a border to CircleAvatar, you can wrap the CircleAvatar with a Container widget. Here is an example of a CircleAvatar with a border:

Container(
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    border: Border.all(
      width: 2.0,
      color: Colors.blue,
    ),
  ),
  child: CircleAvatar(
    radius: 40,
    backgroundImage: NetworkImage("https://example.com/image.jpg"),
  ),
)

4.2 Changing Size

You can use different radius values to have avatars of various sizes. By adjusting the radius, you can dynamically change the size of the avatar.

4.3 Combining Text and Icons

It is also possible to combine text and icons inside CircleAvatar. This can be implemented in the following manner:

CircleAvatar(
  radius: 40,
  backgroundColor: Colors.green,
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      Icon(Icons.person, color: Colors.white),
      SizedBox(width: 5),
      Text("User", style: TextStyle(color: Colors.white)),
    ],
  ),
)

5. Using CircleAvatar with ListView

It is possible to dynamically display multiple avatars by combining the CircleAvatar widget with ListView. Here is an example of using ListView to display multiple avatars:

ListView.builder(
  itemCount: 10,
  itemBuilder: (context, index) {
    return ListTile(
      leading: CircleAvatar(
        radius: 30,
        backgroundImage: NetworkImage("https://example.com/user_$index.jpg"),
      ),
      title: Text("User $index"),
    );
  },
)

6. Considerations When Using CircleAvatar

When using CircleAvatar, consider the following points:

  • When selecting images, it is important to choose the appropriate size and format to reduce load time.
  • When using network images, logic to handle loading errors is also necessary.
  • Colors and sizes should be adjusted to harmonize with the UI design.

7. Conclusion

In this post, we learned about various ways of using and customizing the CircleAvatar widget in Flutter. CircleAvatar is a simple yet powerful UI element. By utilizing it, you can provide a strong user experience in various apps. Try implementing CircleAvatar yourself and make your app more attractive with your own style!

Thank you!