Change CircleAvatar size in ListTile

Question

I want to increase the size of an CircleAvatar as Leading of a Listtile. But if i increase the Radius the Circle doesnt keep its ratio and becomes an ellipse.

Here is my Code:

ListView.builder(
itemCount: friendlist.length,
itemBuilder: (BuildContext context, int index) {
print(friendlist[index]);
return ListTile(
        title: Text(friendlist[index]["nickname"],
                style: TextStyle(fontSize: 20)),
        leading: CircleAvatar(
            radius: 50,
            backgroundColor: Colors.transparent,
            backgroundImage: CachedNetworkImageProvider(core.url + "profiles/" + friendlist[index]["avatar_id"]),
          ),
        subtitle:
        Text(friendlist[index]["lost_last"])
    );
}));

What I tried:

1. Nesting the Circle Avatar into a Container with fixed Width and Height -> Circle is still an ellipse
2. Changing the ItemExtent of the ListView.builder -> The Circle still cant use all of the empty space and becomes an ellipse.

Thanks

Triad

Answer 1

This is not currently possible with ListTitle, as this is the applied restrictions they have added for the standard of the widget

To be accessible, tappable leading and trailing widgets have to be at least 48x48 in size. However, to adhere to the Material spec, trailing and leading widgets in one-line ListTiles should visually be at most 32 (dense: true) or 40 (dense: false) in height, which may conflict with the accessibility requirement.

You can create custom widget for your requirement.

Indign

Answer 2

There is a way to change the CircleAvatar actually , There are two properties related to size: minRadius and maxRadius. The are used to set the minimum and maximum radius respectively. If you already use radius, you are not allowed to use minRadius and/or maxRadius. On the contrary, if either minRadius or maxRadius is set, you are not allowed to use radius :

CircleAvatar(
    backgroundImage: NetworkImage('https://www.woolha.com/media/2020/03/eevee.png'),
    minRadius: 50,
    maxRadius: 75,
  )

Marisolmarissa