CircleAvatar as leading in ListTile-CodePudding

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,
          ))
    ]));
  }
}

CodePudding user response：

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),

CodePudding user response：

Instead of putting two CircleAvatar inside each other to get border, use Container with decoration property, like this:

Card(
  child: SizedBox(
      width: 200,
      height: 100,
      child: ListTile(
        leading: Container(
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(color: Colors.blue, width: 2)),
          child: CircleAvatar(
            radius: 30,
            backgroundColor: Colors.red,
          ),
        ),
        title: Text("test"),
      ))),