is it possible to have custom bubble/widget in between chat?

[rmControls]

is it possible to have custom bubble/custom widget like below from both sender and receiver side along with normal chat bubble?

[demchenkoalex]

I don't think this is possible due to how items are inserted in the list, it is impossible to customise like at all.

[Mayb3Nots]

It is possible to make custom message widgets by creating your own Message class and then in use bubbleBuilder to build your wanted widget.

[demchenkoalex]

It is, but the question was about a widget between messages, which is impossible. Attaching it to the message is a workaround.

[rmControls]

I will be happy if I achieve what @Mayb3Nots showed... The only thing is that I want to achieve it on both sender and receiver side.. I wanted build custom bubble when there is an additional information available else regular bubble...

@Mayb3Nots if possible can you share the sample??

[Mayb3Nots]

I will be happy if I achieve what @Mayb3Nots showed... The only thing is that I want to achieve it on both sender and receiver side.. I wanted build custom bubble when there is an additional information available else regular bubble...

@Mayb3Nots if possible can you share the sample??

Sure take a look.

 Widget _bubbleBuilder(
      Widget child, BuildContext context, BoxConstraints constraints,
      {required chat.Message message, required bool nextMessageInGroup}) {
    final isAuthor = message.author.id == AuthService.to.currentUserID;

    final seenList = message.metadata?['seen_list'] as List?;
    final displayAvatarInGroupMessage = !isAuthor && !nextMessageInGroup;
    // Used for caching avatar images so they rebuild it doesn't cost more than needed but I think this was fixed 
    //  by https://github.com/flyerhq/flutter_chat_ui/pull/298
    if (displayAvatarInGroupMessage) {
      controller.downloadAndCacheImage(message.author.id);
    }

    return Column(
      crossAxisAlignment:
          isAuthor ? CrossAxisAlignment.end : CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment:
              isAuthor ? MainAxisAlignment.end : MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            if ((message is chat.ImageMessage && !isAuthor) ||
                displayAvatarInGroupMessage)
              _ChatProfileAvatar(username: username, uid: message.author.id),
            _MainContent(
              message: message,
              constraints: constraints,
              isAuthor: isAuthor,
              username: username,
              child: child,
              nextMessageInGroup: nextMessageInGroup,
            )
          ],
        ),
        _RowOfSeenUsers(
            message: message,
            isAuthor: isAuthor,
            seenList: seenList,
            username: username)
      ],
    );
  }

class _MainContent extends StatelessWidget {
  const _MainContent(
      {Key? key,
      required this.message,
      required this.isAuthor,
      required this.nextMessageInGroup,
      required this.username,
      required this.constraints,
      required this.child})
      : super(key: key);
  final chat.Message message;
  final bool isAuthor;
  final bool nextMessageInGroup;
  final String username;
  final BoxConstraints constraints;
  final Widget child;

  @override
  Widget build(BuildContext context) {
    final localMessage = message;
    final borderRadius = isAuthor
        ? BorderRadius.circular(20).copyWith(
            bottomRight: nextMessageInGroup ? null : const Radius.circular(0))
        : BorderRadius.circular(20).copyWith(
            bottomLeft: nextMessageInGroup ? null : const Radius.circular(0));
    final leftPadding =
        EdgeInsets.only(left: !isAuthor && nextMessageInGroup ? 40 : 0);

    bool isEmoji = false;
    if (localMessage is chat.TextMessage) {
      isEmoji =
          isConsistsOfEmojis(EmojiEnlargementBehavior.multi, localMessage);
    }
    if (localMessage is CommunityActivityMessage) {
      return _CommunityActivityMessage(
        constraints: constraints,
        isAuthor: isAuthor,
        message: localMessage,
        communityUsername: username,
      );
    }
    if (localMessage is chat.TextMessage) {
      return _CustomTextMessage(
          communityUsername: username,
          message: localMessage,
          leftPadding: leftPadding,
          borderRadius: borderRadius,
          isEmoji: isEmoji,
          isAuthor: isAuthor,
          child: child);
    }
    if (localMessage is chat.ImageMessage) {
      return _CustomImageMessage(
        message: localMessage,
        borderRadius: borderRadius,
        constraints: constraints,
        isAuthor: isAuthor,
        username: username,
        nextMessageInGroup: nextMessageInGroup,
      );
    }
    return const SizedBox();
  }
}

[rmControls]

Thank you... that helps. I will have a look