CircleAvatar as leading in ListTile

In my ListTile, I want a CircleAvatar with a border, that’s why I have a CircleAvatar inside an other. The problem is the border doesn’t appear. And when I try my code outside a ListTile, it works …

Code:

class TestTile extends StatelessWidget {
  const TestTile({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column(children: const [
      /***** DOES NOT WORK *****/
      Card(
          child: SizedBox(
              width: 200,
              height: 100,
              child: ListTile(
                leading: CircleAvatar(
                    radius: 32,
                    backgroundColor: Colors.blue,
                    child: CircleAvatar(
                      radius: 30,
                      backgroundColor: Colors.red,
                    )),
                title: Text("test"),
              ))),
      /***** WORKS *****/
      CircleAvatar(
          radius: 32,
          backgroundColor: Colors.blue,
          child: CircleAvatar(
            radius: 30,
            backgroundColor: Colors.red,
          ))
    ]));
  }
}

>Solution :

It’s because a ListTile has a fixed height. The CircleAvatars simply don’t fit in them with your wanted radiuses so they both get shrunk down to largest size that does fit. If you try with smaller radiuses, like 20 and 18 for example you will see that it does work.

To increase the height of the ListTile you can also try to set the visualDensity for example like this, then it might fit

child: ListTile(
  visualDensity: VisualDensity(vertical: 2),