diff --git a/lib/src/message_actions_bottom_sheet.dart b/lib/src/message_actions_bottom_sheet.dart index 1e81900f..53ad4d22 100644 --- a/lib/src/message_actions_bottom_sheet.dart +++ b/lib/src/message_actions_bottom_sheet.dart @@ -2,6 +2,7 @@ import 'package:flutter/material.dart'; import 'package:stream_chat/stream_chat.dart'; import 'package:stream_chat_flutter/src/reaction_picker.dart'; import 'package:stream_chat_flutter/src/stream_channel.dart'; +import 'package:stream_chat_flutter/src/user_reaction_display.dart'; import '../stream_chat_flutter.dart'; import 'message_input.dart'; @@ -43,6 +44,14 @@ class MessageActionsBottomSheet extends StatelessWidget { mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ + if (showReactions && + (message.status == MessageSendingStatus.SENT || + message.status == null) && + message.latestReactions.isNotEmpty) + UserReactionDisplay( + reactionToEmoji: reactionToEmoji, + message: message, + ), if (showReactions && (message.status == MessageSendingStatus.SENT || message.status == null)) diff --git a/lib/src/user_reaction_display.dart b/lib/src/user_reaction_display.dart new file mode 100644 index 00000000..92f66aa2 --- /dev/null +++ b/lib/src/user_reaction_display.dart @@ -0,0 +1,55 @@ +import 'package:flutter/material.dart'; +import 'package:stream_chat/stream_chat.dart'; +import 'package:stream_chat_flutter/src/user_avatar.dart'; + +class UserReactionDisplay extends StatelessWidget { + const UserReactionDisplay({ + Key key, + @required this.reactionToEmoji, + @required this.message, + this.size = 30, + }) : super(key: key); + + final Map reactionToEmoji; + final Message message; + final double size; + + @override + Widget build(BuildContext context) { + return Container( + color: Colors.black87, + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.center, + mainAxisSize: MainAxisSize.min, + children: reactionToEmoji.keys.map((reactionType) { + var firstUserReaction = message.latestReactions.firstWhere( + (element) => element.type == reactionType, orElse: () { + return null; + }); + + if (firstUserReaction == null) { + return IconButton( + iconSize: size, + icon: Container(), + onPressed: null, + ); + } + + return IconButton( + iconSize: size, + icon: UserAvatar( + user: firstUserReaction.user, + constraints: BoxConstraints( + maxHeight: size - 5, + maxWidth: size - 5, + ), + onTap: (user) {}, + ), + onPressed: () {}, + ); + }).toList(), + ), + ); + } +}