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

Issue

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

Row(children: [
  for (var i in listOfEvents[i].attendeesList)
      CircleAvatar(
         backgroundImage: NetworkImage("https://github.com/identicons/guest.png"),
         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

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!

Solution

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:

@override
  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("https://avatars.githubusercontent.com/u/61495501?v=4"),
                radius: 30,
              )
            );
          }
        )
      )
    );
  }

And you’ll end up with something like this:

Answered By – Roman Jaquez

Answer Checked By – Katrina (FlutterFixes Volunteer)