Question 79996 in Flutter Question posted in
The official Flutter documentation can be found here.

CircleAvatar as leading in ListTile – Flutter

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

2

Answers


  1. 0

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

    enter image description here

    Login or Signup to reply.
  2. 0

    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),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search