How to Implement the Flutter Chat reactions package

[msoftworksdev]

Tried using this package but it keeps showing as this

But it should show like this



I wrapped ChatMessage with ChatMessageWrapper as that is the only one that allows long press.

Any suggestion would help please.

[nicolasbraun]

hello @msoftworksdev

It's a bit hard to answer without more code or a reproductible example.
The first image you shared if the 'dialog' to add a reaction, when the second one is the list of messages showing reactions.

There is a PR #838 ongoing to add support directly in the lib.

Last time I check there were problems when using flutter_chat_reactions because it uses and Hero transition to display the dialog and long story short, the context (required by Provider to build the lib widget is) lost during navigation.
Still that overflows is kinda weird.

Are you using any FlyerChat Ui components or custom ones?

[msoftworksdev]

Hi @nicolasbraun, yes apologies for that, here is the code
These are the packages:
flutter_chat_core: ^2.0.0
flutter_chat_ui: ^2.0.0
flutter_chat_types: ^3.6.2
flyer_chat_text_message: ^2.0.0
flyer_chat_system_message: ^2.0.0
flyer_chat_image_message: ^2.0.0
flyer_chat_text_stream_message: ^2.0.0

And the code:

                 ` return Chat(
                    chatController: _chatController,
                    currentUserId: widget.currentUserId,
                    onMessageSend: canChat ? _handleSendPressed : null,
                    onAttachmentTap: canChat ? _handleAttachmentTap : null,
                    builders: Builders(
                      chatAnimatedListBuilder: (context, itemBuilder) {
                        return ChatAnimatedList(
                          itemBuilder: itemBuilder,
                          insertAnimationDurationResolver: (message) {
                            if (message is SystemMessage) {
                              return Duration.zero;
                            }
                            return null;
                          },
                        );
                      },

                      // system message builder
                      systemMessageBuilder: (
                        context,
                        message,
                        index, {
                        required bool isSentByMe,
                        MessageGroupStatus? groupStatus,
                      }) =>
                          FlyerChatSystemMessage(
                              message: message, index: index),

                      // text message ui builder
                      textMessageBuilder: (
                        context,
                        message,
                        index, {
                        required bool isSentByMe,
                        MessageGroupStatus? groupStatus,
                      }) {
                        return FlyerChatTextMessage(
                          message: message,
                          index: index,
                          borderRadius: BorderRadius.circular(20),
                          constraints: BoxConstraints(
                              maxWidth:
                                  MediaQuery.of(context).size.width / 1.5),
                          onlyEmojiFontSize: 60,
                          sentBackgroundColor: mainColor,
                          receivedBackgroundColor: background2,
                          sentTextStyle: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 14,
                            fontFamily: 'Font1',
                          ),
                          receivedTextStyle: TextStyle(
                            color: textFirst,
                            fontWeight: FontWeight.bold,
                            fontSize: 14,
                            fontFamily: 'Font1',
                          ),
                          sentLinksColor: secondaryColor,
                          receivedLinksColor: secondaryColor,
                          timeStyle: TextStyle(
                            color: textSecond,
                            fontFamily: 'Font1',
                            fontWeight: FontWeight.w600,
                            fontSize: 12,
                          ),
                          showTime: true,
                          showStatus: true,
                          timeAndStatusPosition:
                              TimeAndStatusPosition.inline,
                          timeAndStatusPositionInlineInsets:
                              EdgeInsets.only(left: 12, top: 0),
                          linkPreviewPosition: LinkPreviewPosition.top,
                        );
                      },

                      // chat message builder
                      chatMessageBuilder: (
                        context,
                        message,
                        index,
                        animation,
                        child, {
                        bool? isRemoved,
                        required bool isSentByMe,
                        MessageGroupStatus? groupStatus,
                      }) {
                        final isSystemMessage =
                            message.authorId == 'system';
                        final isFirstInGroup = groupStatus?.isFirst ?? true;
                        // final isLastInGroup = groupStatus?.isLast ?? true;
                        final shouldShowAvatar = !isSystemMessage &&
                            isRemoved != true &&
                            !isSentByMe &&
                            widget.conversation.type != 'private';
                        final isCurrentUser =
                            message.authorId == currentUserId;
                        final shouldShowUsername = !isSystemMessage &&
                            isFirstInGroup &&
                            isRemoved != true &&
                            widget.conversation.type != 'private' &&
                            !isSentByMe;
                        double avatarSize = 36;

                        // 2️⃣ Normalize to non-null DateTimes
                        final current =
                            message.createdAt?.toLocal() ?? DateTime.now();
                        final prevMsg = index > 0
                            ? _chatController.messages[index - 1]
                            : null;
                        final previous =
                            prevMsg?.createdAt?.toLocal() ?? current;

                        // 3️⃣ Decide which header (if any)
                        Widget? header;
                        if (!_isSameDay(previous, current) ||
                            current.difference(previous).abs() >
                                _timeGapThreshold) {
                          // a) day changed → date header
                          header = _buildDateandTimeHeader(current);
                        }
                        // avatar widget
                        Widget? avatar;
                        if (shouldShowAvatar) {
                          avatar = Padding(
                            padding:
                                const EdgeInsets.symmetric(horizontal: 5),
                            child: _cachedAvatar(
                                context, message.authorId, avatarSize),
                          );
                        }

                        // chat message widget
                        return ChatMessageWrapper(
                          messageId: message.id,
                          controller: _reactionsController,
                          onReactionAdded: (reaction) {
                            // Handle reaction added
                          },
                          onReactionRemoved: (reaction) {
                            // Handle reaction removed
                          },
                          onMenuItemTapped: (item) {
                            // Handle menu item tapped
                          },
                          child: ChatMessage(
                            message: message,
                            index: index,
                            animation: animation,
                            headerWidget: header,
                            isRemoved: isRemoved,
                            groupStatus: groupStatus,
                            topWidget: shouldShowUsername
                                ? Padding(
                                    padding: EdgeInsets.only(
                                      bottom: 4,
                                      left: isCurrentUser
                                          ? 0
                                          : !shouldShowAvatar
                                              ? 0
                                              : avatarSize + 10,
                                      right: isCurrentUser ? 48 : 0,
                                    ),
                                    child: Username(
                                      userId: message.authorId,
                                      style: TextStyle(
                                          fontFamily: 'Font1',
                                          fontSize: 12,
                                          fontWeight: FontWeight.bold,
                                          color: textSecond),
                                    ),
                                  )
                                : null,
                            leadingWidget: !isCurrentUser
                                ? (avatar)
                                : isSystemMessage
                                    ? null
                                    : SizedBox(width: avatarSize),
                            trailingWidget: isCurrentUser
                                ? avatar
                                : isSystemMessage
                                    ? null
                                    : const SizedBox(width: 40),
                            receivedMessageScaleAnimationAlignment:
                                (message is SystemMessage)
                                    ? Alignment.center
                                    : Alignment.centerLeft,
                            receivedMessageAlignment:
                                (message is SystemMessage)
                                    ? AlignmentDirectional.center
                                    : AlignmentDirectional.centerStart,
                            horizontalPadding:
                                (message is SystemMessage) ? 0 : 10,
                            verticalPadding: 20,
                            child: Container(
                              decoration: BoxDecoration(
                                color: isSentByMe ? mainColor : background2,
                                borderRadius:
                                    bubbleRadius(isSentByMe, groupStatus),
                              ),
                              child: child,
                            ),
                          ),
                        );
                      },

                      // link preview
                      linkPreviewBuilder: (context, message, isSentByMe) {
                        return LinkPreview(
                          text: message.text,
                          linkPreviewData: message.linkPreviewData,
                          squareImageSize: 30,
                          maxDescriptionLines: 1,
                          hideDescription: true,
                          hideTitle: true,
                          maxTitleLines: 2,
                          backgroundColor: background2,
                          onLinkPreviewDataFetched: (linkPreviewData) {
                            _chatController.updateMessage(
                              message,
                              message.copyWith(
                                  linkPreviewData: linkPreviewData),
                            );
                          },
                          titleTextStyle:
                              TextStyle(fontFamily: 'Font1', fontSize: 12),
                          descriptionTextStyle:
                              TextStyle(fontFamily: 'Font1', fontSize: 12),
                          forcedLayout: LinkPreviewImagePosition.bottom,
                          parentContent: message.text,
                        );
                      },

                      // image viewer
                      imageMessageBuilder: (
                        context,
                        message,
                        index, {
                        required bool isSentByMe,
                        MessageGroupStatus? groupStatus,
                      }) {
                        return FlyerChatImageMessage(
                          message: message,
                          index: index,
                          showTime: true,
                          borderRadius:
                              bubbleRadius(isSentByMe, groupStatus),
                          showStatus: true,
                          timeBackground: background2,
                          timeStyle: TextStyle(
                            color: textSecond,
                            fontFamily: 'Font1',
                            fontWeight: FontWeight.w600,
                            fontSize: 12,
                          ),
                          timeAndStatusPosition: TimeAndStatusPosition.end,
                        );
                      },

                      // composer buidlers
                      composerBuilder: (context) => Composer(
                        sendButtonDisabled: !canChat,
                        sendButtonHidden: !canChat,
                        attachmentIconColor: mainColor,
                        sendIconColor: mainColor,
                        textColor: textFirst,
                        allowEmptyMessage: false,
                        sendButtonVisibilityMode: canChat
                            ? SendButtonVisibilityMode.always
                            : SendButtonVisibilityMode.disabled,
                        hintText:
                            canChat ? 'Send a message' : 'Chat disabled',
                      ),

                      // composer builder
                    ),
                    resolveUser: (userId) async {
                      final doc = await FirebaseFirestore.instance
                          .collection('users')
                          .doc(userId)
                          .get();
                      final data = doc.data() ?? {};
                      return User(
                        id: userId,
                        name: data['full_name'] as String? ?? '',
                        imageSource: data['photo_1'] as String?,
                      );
                    },
                    backgroundColor: background,
                  );
       ` 

I did notice the PR and actually encountered the Provider context lost bug and was trying to fix it until i encountered the overflow bug.

[nicolasbraun]

I think both are elated, though I do not have time to test right now.

• The wrapper pushes the HeroRoute: https://github.com/Dexterfury/flutter_chat_reactions/blob/4384b3f63a31ae6151cb82064f2779f2178775ba/lib/src/widgets/chat_message_wrapper.dart#L77
• The message widget fails to build in ReactionsDialogWidget because of providers missing in the context (both in the dialog and during the inflight transition)
• Possibly the render engine cannot know height and overflows

I dont see any easy solution.
Maybe - but it's edgy - you could try something like

  final providers = ChatProviders.from(context); // From https://github.com/flyerhq/flutter_chat_ui/pull/838/commits/e96c6b8b859c1eea04669d4aa8c4316d88d68bb8
return Multiprovider(
providers:provider,
child: ChatMessageWrapper( ....)

but i suggest to wait a bit since the maintainer plans to remove Provider all together + the reaction PR is nearly done.

[msoftworksdev]

I think both are elated, though I do not have time to test right now.

• The wrapper pushes the HeroRoute: https://github.com/Dexterfury/flutter_chat_reactions/blob/4384b3f63a31ae6151cb82064f2779f2178775ba/lib/src/widgets/chat_message_wrapper.dart#L77
• The message widget fails to build in ReactionsDialogWidget because of providers missing in the context (both in the dialog and during the inflight transition)
• Possibly the render engine cannot know height and overflows

I dont see any easy solution. Maybe - but it's edgy - you could try something like

final providers = ChatProviders.from(context); // From e96c6b8
return Multiprovider(
providers:provider,
child: ChatMessageWrapper( ....)
but i suggest to wait a bit since the maintainer plans to remove Provider all together + the reaction PR is nearly done.

Yes, I tried everything possible with no luck that's why I came here 🥲, I will wait for the feature to be implemented then. Thank you for creating this package btw. Its a God send

[Nouradawy]

flutter_chat_bubble: ^2.0.2

you can implement it as follows:

textMessageBuilder:
                  (
                  context,
                  message,
                  index,
                  {
                required bool isSentByMe,
                types.MessageGroupStatus? groupStatus,
              }) {
                    final bool isMe = message.authorId == supabase.auth.currentUser!.id?true:false;
                    Widget buildReactions(BuildContext context, bool isMe) {
                      return isMe
                          ? Positioned(
                        bottom: 8,
                        right: 20,
                        child: StackedReactions(
                          messageId: message.id,
                          controller: _reactionsController,
                          maxReactionsToShow: 3,
                          size: 18,


                        ),
                      )
                          : Positioned(
                        bottom: 2,
                        left: 8,
                        child: StackedReactions(
                          messageId: message.id,
                          controller: _reactionsController,
                          maxReactionsToShow: 3,
                        ),
                      );
                    };
                    return ChatMessageWrapper(
                        messageId: message.id,
                        controller: _reactionsController,
                        onMenuItemTapped: (item){
                          if(item.label == "Reply") {
                            setState(() {
                              _repliedMessage = message;
                            });
                          }
                        },
                        child: Material(               //in order for reactions to work it needs to be wraped by a material widget 
                            color:Colors.transparent,
                            child: Stack(
                              children: [
                                ChatBubble(
                                    clipper: isMe
                                        ? ChatBubbleClipper5(type:BubbleType.sendBubble,radius: 10):ChatBubbleClipper1(
                                        type:BubbleType.sendBubble,
                                        radius: 10,
                                        nipRadius: 0,
                                        nipHeight: 14,
                                        nipWidth: 5
                                    ),
                                    child: Text(message.text)),  
                                buildReactions(
                                  context,
                                  isMe,
                                ),
                              ],
                            )));
                  }, 

I hope you find this useful. Cheers