Flutter give spacing on each person's bubble

Question

I'm trying to set a space on each person's bubble chat group like whatsapp:

Here is my code:

return ListView.builder(
                            scrollDirection: Axis.vertical,
                            reverse: true,
                            shrinkWrap: false,
                            padding: const EdgeInsets.all(2),
                            itemCount: chats.length!=0 ? chats.length : 0,
                            itemBuilder: (context, index) =>
                            chats[index].idSender == idUser ?
                            SwipeTo(
                              onLeftSwipe: () {
                              },
                              child: chats[index].content == null ? MyMessageCardPersonal(
                                  chats[index].text,
                                  DateFormat.Hm().format( DateTime.parse(chats[index].date) ),
                                  chats[index].sendStatus,
                                  index+1==chats.length?true:chats[index].idSender==chats[index+1].idSender?false:true,
                                  false
                              ):
                              MyMessageCardPersonal(
                                  chats[index].content!,
                                  DateFormat.Hm().format( DateTime.parse(chats[index].date) ),
                                  chats[index].sendStatus,
                                  false,
                                  true
                              ),
                            )
                                : chats[index].idSender == idReceiver ?
                            chats[index].content == null ?
                            FriendMessageCardPersonal(
                              chats[index].text,
                              DateFormat.Hm().format( DateTime.parse(chats[index].date) ),
                              index+1==chats.length?true:chats[index].idSender==chats[index+1].idSender?false:true,
                              false
                            ) :
                            FriendMessageCardPersonal(
                              chats[index].content!,
                              DateFormat.Hm().format( DateTime.parse(chats[index].date) ),
                              false,
                              true
                            )
                                : Container()
                        );

Where should I add a SizedBox(height: 10) to seperate each user's bubble chat?

Answer 1

use

ListView.separated(
  separatorBuilder: (context, index) {
    if (index == chats.length - 1) {
      return const SizedBox();
    }
    bool nextIsMy = chats[index + 1].idSender == idUser;
    bool currentIsMy = chats[index].idSender == idUser;
    return SizedBox(
      height: (nextIsMy && currentIsMy) ? 0 : 10,
    );
  },
  // other properties
);

instead of ListView.builder()