Flutter – User Images from database aligned like the example

I am working on a small project trying to learn flutter. I have card events pulled from my database and I would like to visually show current users that are joined. I a similar way like the image bellow.

My biggest question is the frontend part of how to arrange them like that.

I already have the full database.

The structure is every Event has an ID and rest of the info, then it has a group which is all users who are joined and then each of those users [1][2][3] has their user details and userimage: ‘avatar1example.png’is one of them. I know how to pull the image id and connect it with the imageasset (images are preset avatars not user uploads) so my question is mostly the frontend part + the number.

>Solution :

You can use this widget:

_buildImages() {
    int limmit = 3;
    List<Widget> _children = [];
    int index = 0;
    for (var element in _images) {
      if (index < limmit) {
        Widget image = Container(
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(width: 1, color: Colors.white)),
          child: CircleAvatar(
            foregroundImage: AssetImage(element),
            radius: 15,
          ),
        );
        if (index != 0) {
          _children.add(Positioned(
            child: image,
            left: index * 20,
            top: 0,
          ));
        } else {
          _children.add(image);
        }
      } else {
        int number = _images.length - limmit;
        _children.add(Positioned(
          left: index * 20,
          top: 0,
          child: Container(
            decoration: BoxDecoration(
                shape: BoxShape.circle,
                border: Border.all(width: 1, color: Colors.white)),
            child: CircleAvatar(
              child: Center(child: Text('+$number')),
              radius: 15,
            ),
          ),
        ));
        break;
      }
      index++;
    }
    return SizedBox(
      width: double.infinity,
      height: 30 + 2, // image height + 2 white border width
      child: Stack(
        children: _children,
      ),
    );
  }

and use it like this:

_buildImages(),

also remember _images is list of your profile image.