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.

[![enter image description here][1]][1]

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.

EDIT: After using the code below i got this.

Widget userImages (data) {
      int limmit = 3;
    List<Widget> _children = [];
    int index = 0;
    for (var element in data.users) {
      if (index < limmit) {
        Widget image = Image(
          image: AssetImage(element.userDetails.imageUrl),
        );
        if (index != 0) {
          _children.add(Positioned(
            child: image,
            left: index * 20.0,
            top: 0,
          ));
        } else {
          _children.add(image);
        }
      } else {
        int number = data.users.length - limmit;
        _children.add(Positioned(
          left: index * 20.0,
          top: 0,
          child: CircleAvatar(
            child: Center(child: Text(' $number')),
            radius: 15,
          ),
        ));
        break;
      }
      index  ;
    };
    return Container(
      width: double.infinity,
      height: 30,
      child: Stack(
        children: _children,
      ),
    );
  }

And i use it like this

Container(
                                                        decoration: BoxDecoration(color: Colors.pink),
                                                        child: Row(
                                                          mainAxisAlignment:
                                                              MainAxisAlignment
                                                                  .center,
                                                          children: [
                                                            Container(
                                                              width: MediaQuery.of(context).size.width * 0.6,
                                                              alignment: Alignment.centerLeft,
                                                                child: cardDescJoined(
                                                                    snapshot.data[
                                                                        index])),
                                                            Container(
                                                              height: 80,
                                                              decoration: BoxDecoration(color: Colors.yellow),
                                                              width: MediaQuery.of(context).size.width * 0.9,
                                                              child: userImages(snapshot.data[index].group)
                                                            ),
                                                          ],
                                                        ),
                                                      ),

CodePudding user response：

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.