How to draw and Horizontal list of circle avatars that are on top of each other


I have a row that contains a list of circle avatars widgets, which are profile images of people.

enter image description here

Row(children: [
  for (var i in listOfEvents[i].attendeesList)
         backgroundImage: NetworkImage(""),
         radius: 18,

Am looking for a way to move all the circle avatars a little bit to the left so the avatars seem like they are on top of each other to save space

like this illustration

enter image description here

I have been trying to add a negative padding or negative position using the Padding widget but it doesn’t work

If anyone knows how to do the trick it would be great!


You can use a Stack which wraps your avatar widgets in Positioned widgets, and you can use perhaps the radius to adjust the overlapping, as in:

  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30),
      child: Stack(
        children: List.generate(
          listOfEvents[i].attendeesList.length, (index) {
            return Positioned(
              left: index * 30,
              child: const CircleAvatar(
                backgroundImage: NetworkImage(""),
                radius: 30,

And you’ll end up with something like this:

enter image description here

Answered By – Roman Jaquez

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *