/ SDKs / Flutter
SDKs
Chat SDKs Flutter v4
Chat SDKs Flutter
Chat SDKs
Flutter
Version 4

React to a message in a group channel

Copy link

Message reactions help you build a more engaging chat experience that goes beyond text messages. They are a quick and easy way for users to respond to a message. Users can express their feelings about a message by adding reactions instead of typing a response. They can also view and delete their reactions to the message.

Note: Message reactions are supported in Group and Supergroup channels. This feature isn't supported in Open channels and custom message types.


Add or remove a reaction

Copy link
final emojiKey = 'smile'

// The BASE_MESSAGE argument below indicates a BaseMessage object to add a reaction to.
try {
  final event = await groupChannel.addReaction(BASE_MESSAGE, key: emojiKey);
} catch (e) {
  // Handle error.
}

// The BASE_MESSAGE argument below indicates a BaseMessage object to remove a reaction from.
try {
  final event = await groupChannel.deleteReaction(BASE_MESSAGE, key: emojiKey);
} catch (e) {
  // Handle error.
}

// To add or remove an emoji that matches the emojiKey under a message in the current user's chat view, the apply() method should be called in the channel event handler's updatedReaction() method.

Retrieve reactions

Copy link

You can decide how to display reactions that were added to messages in the current user’s chat view.

try {
  final currentUserId = SendbirdChat.currentUser.userId;
  final params = MessageListParams()
    ..includeReactions = true
    ..previousResultSize = 20;
  final messages = await groupChannel.getMessagesByTimestamp(TIMESTAMP, params);
  messages.forEach((m) {
    m.reactions.forEach((reaction) {
      // Check if this emoji has been used when the current user reacted to the message.
      if (reaction.userIds.firstWhere((userId) => currentUserId == userId) != null) {
        final key = reaction.key
        final updatedAt = reaction.updatedAt

        // Show the emoji however you want on the current user's chat view.
      }
    })
  });
} catch (e) {
  // Handle error.
}

Note: By using the PreviousMessageListQuery instance's load() method, messages along with their reactions can also be retrieved. To learn more, see the load previous messages page.


Receive reaction events in real time

Copy link

When one of the channel members reacts to a message, the onReactionUpdated() method in the channel event handler is invoked on all channel members’ devices including the one that belongs to the current user. The applyReactionEvent() method reflects the reaction change to the message in real time.

class MyOpenChannelHandler extends OpenChannelHandler {
  @override
  void onReactionUpdated(BaseChannel channel, ReactionEvent event) {
    // If there is a message with the reactionEvent.messageId, you can apply the reaction change to the message by calling the message.apply(reactionEvent) method.
    // Add or remove an emoji that appears below the message on the current user's chat view.
  }
}