fix reaction modal ui

2020-10-16 12:50:58 +02:00
parent c4a890d069
commit b0ad9c673e
8 changed files with 175 additions and 112 deletions
@@ -1,4 +1,7 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/reaction_bubble.dart';

 import '../stream_chat_flutter.dart';

@@ -23,44 +26,60 @@ class ReactionPicker extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final reactionAssets = StreamChatTheme.of(context).reactionIcons;
-    return Material(
-      color: messageTheme.ownReactionsBackgroundColor,
-      clipBehavior: Clip.hardEdge,
-      shape: RoundedRectangleBorder(
-        borderRadius: BorderRadius.circular(24),
-      ),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        mainAxisAlignment: MainAxisAlignment.center,
-        mainAxisSize: MainAxisSize.min,
-        children: reactionAssets.map((reactionIcon) {
-          final ownReactionIndex = message.ownReactions?.indexWhere(
-                  (reaction) => reaction.type == reactionIcon.type) ??
-              -1;
-          return IconButton(
-            iconSize: 24,
-            icon: Icon(
-              reactionIcon.iconData,
-              color: ownReactionIndex != -1
-                  ? StreamChatTheme.of(context).accentColor
-                  : Theme.of(context).iconTheme.color,
+    return Stack(
+      fit: StackFit.passthrough,
+      children: [
+        Material(
+          color: messageTheme.ownReactionsBackgroundColor,
+          clipBehavior: Clip.hardEdge,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(24),
+          ),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            mainAxisAlignment: MainAxisAlignment.center,
+            mainAxisSize: MainAxisSize.min,
+            children: reactionAssets.map((reactionIcon) {
+              final ownReactionIndex = message.ownReactions?.indexWhere(
+                      (reaction) => reaction.type == reactionIcon.type) ??
+                  -1;
+              return IconButton(
+                iconSize: 24,
+                icon: Icon(
+                  reactionIcon.iconData,
+                  color: ownReactionIndex != -1
+                      ? StreamChatTheme.of(context).accentColor
+                      : Theme.of(context).iconTheme.color,
+                ),
+                onPressed: () {
+                  if (ownReactionIndex != -1) {
+                    removeReaction(
+                      context,
+                      message.ownReactions[ownReactionIndex],
+                    );
+                  } else {
+                    sendReaction(
+                      context,
+                      reactionIcon.type,
+                    );
+                  }
+                },
+              );
+            }).toList(),
+          ),
+        ),
+        Positioned(
+          right: 14,
+          bottom: 0,
+          child: CustomPaint(
+            painter: ReactionBubblePainter(
+              messageTheme.ownReactionsBackgroundColor,
+              messageTheme.ownReactionsBorderColor,
+              2,
            ),
-            onPressed: () {
-              if (ownReactionIndex != -1) {
-                removeReaction(
-                  context,
-                  message.ownReactions[ownReactionIndex],
-                );
-              } else {
-                sendReaction(
-                  context,
-                  reactionIcon.type,
-                );
-              }
-            },
-          );
-        }).toList(),
-      ),
+          ),
+        ),
+      ],
    );
  }