list of circle avatars that are on top of each other

Question

I am working in a Flutter project and I have an issue. I have a list of people and I wanna show their pictures one by one as in the image below.

I saw an answer like below:

       SizedBox(
    height: 40,
    child: Stack(
      children: [
        for (var i = 0; i < [1, 2, 3, 4].length; i++)
          Positioned(
            left: (i * (1 - .4) * 40).toDouble(),
            top: 0,
            child: CircleAvatar(
              backgroundColor: Colors.blue,
              child: Container(
                clipBehavior: Clip.antiAlias,
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey, width:2),
                    borderRadius: BorderRadius.circular(50)),
                padding: const EdgeInsets.all(5.0),
                child: Image.network(
                  "https://github.com/identicons/guest.png",
                ),
              ),
              radius: 18,
            ),
          ),
      ],
    ),
  ),

but the problem is that the image is repeating and I want each photo to be different from each other.

check it here

Answer 1

Try this:

return LimitedBox(
  maxHeight: 28,
  maxWidth: 50,
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 4,
    reverse: true,
    shrinkWrap: true,
    itemBuilder: (context, index) {
      return Align(
        widthFactor: 0.6,
        child: ClipOval(
          child: Container(
            color: Colors.white,
            child: Container(
                height: 28,
                width: 28,
                child : Image.network(
                  "https://github.com/identicons/guest.png",
                ) //build your avatar view
            ),
          ),
        ),
      );
    },
  ),
);

Answer 2

You can do like this if you don't want to disturb your code.

List<String> someList=["imageLink1","imageLink2","imageLink3","imageLink4"];

    SizedBox(
        height: 40,
        child: Stack(
          children: [
            for (var i = 0; i < someList.length; i++)
              Positioned(
                left: (i * (1 - .4) * 40).toDouble(),
                top: 0,
                child: CircleAvatar(
                  backgroundColor: Colors.blue,
                  child: Container(
                    clipBehavior: Clip.antiAlias,
                    decoration: BoxDecoration(
                        border: Border.all(color: Colors.grey, width:2),
                        borderRadius: BorderRadius.circular(50)),
                    padding: const EdgeInsets.all(5.0),
                    child: Image.network(
                      someList[i],
                    ),
                  ),
                  radius: 18,
                ),
              ),
          ],
        ),
      ),