align reaction picker bubbles

lib/src/message_actions_modal.dart

@@ -96,6 +96,7 @@ class MessageActionsModal extends StatelessWidget {
                         showUserAvatar: showUserAvatar,
                         showTimestamp: false,
                         translateUserAvatar: false,
+                        showReactionPickerIndicator: true,
                         showSendingIndicator: DisplayWidget.gone,
                         shape: messageShape,
                       ),

lib/src/message_reactions_modal.dart

@@ -89,6 +89,7 @@ class MessageReactionsModal extends StatelessWidget {
                         translateUserAvatar: false,
                         showSendingIndicator: DisplayWidget.gone,
                         shape: messageShape,
+                        showReactionPickerIndicator: true,
                       ),
                     ),
                     SizedBox(

lib/src/message_widget.dart

@@ -106,6 +106,9 @@ class MessageWidget extends StatefulWidget {
   /// The function called when tapping on a link
   final void Function(String) onLinkTap;
 
+  /// Used in [MessageReactionsModal] and [MessageActionsModal]
+  final bool showReactionPickerIndicator;
+
   final List<Read> readList;
 
   /// If true show the users username next to the timestamp of the message
@@ -131,6 +134,7 @@ class MessageWidget extends StatefulWidget {
     this.borderRadiusGeometry,
     this.attachmentBorderRadiusGeometry,
     this.onMentionTap,
+    this.showReactionPickerIndicator = false,
     this.showUserAvatar = DisplayWidget.show,
     this.showSendingIndicator = DisplayWidget.show,
     this.showReplyIndicator = true,
@@ -251,7 +255,10 @@ class _MessageWidgetState extends State<MessageWidget> {
                             ),
                             portalAnchor: Alignment(-1.0, -1.0),
                             childAnchor: Alignment(1, -1.0),
-                            child: Padding(
+                            child: Stack(
+                              clipBehavior: Clip.none,
+                              children: [
+                                Padding(
                                   padding: widget.showReactions
                                       ? EdgeInsets.only(
                                           top: widget.message.reactionCounts
@@ -263,7 +270,8 @@ class _MessageWidgetState extends State<MessageWidget> {
                                       : EdgeInsets.zero,
                                   child: (widget.message.isDeleted &&
                                           widget.message.status !=
-                                          MessageSendingStatus.FAILED_DELETE)
+                                              MessageSendingStatus
+                                                  .FAILED_DELETE)
                                       ? Transform(
                                           alignment: Alignment.center,
                                           transform: Matrix4.rotationY(
@@ -285,6 +293,25 @@ class _MessageWidgetState extends State<MessageWidget> {
                                           ],
                                         ),
                                 ),
+                                if (widget.showReactionPickerIndicator)
+                                  Positioned(
+                                    right: 0,
+                                    top: -6,
+                                    child: Transform(
+                                      transform: Matrix4.rotationY(
+                                          widget.reverse ? pi : 0),
+                                      child: CustomPaint(
+                                        painter: ReactionBubblePainter(
+                                          widget.messageTheme
+                                              .reactionsBackgroundColor,
+                                          widget.messageTheme
+                                              .reactionsBorderColor,
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                              ],
+                            ),
                           ),
                         ),
                       ],

lib/src/reaction_picker.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/reaction_bubble.dart';
 
 import '../stream_chat_flutter.dart';
 
@@ -22,10 +21,7 @@ class ReactionPicker extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final reactionIcons = StreamChatTheme.of(context).reactionIcons;
-    return Stack(
+    return Material(
-      fit: StackFit.passthrough,
-      children: [
-        Material(
       color: messageTheme.reactionsBackgroundColor,
       clipBehavior: Clip.hardEdge,
       shape: RoundedRectangleBorder(
@@ -63,18 +59,6 @@ class ReactionPicker extends StatelessWidget {
           );
         }).toList(),
       ),
-        ),
-        Positioned(
-          right: 14,
-          bottom: 0,
-          child: CustomPaint(
-            painter: ReactionBubblePainter(
-              messageTheme.reactionsBackgroundColor,
-              messageTheme.reactionsBorderColor,
-            ),
-          ),
-        ),
-      ],
     );
   }