From 3b0c2a9a73f671a033473f82ca5143cb7a58c837 Mon Sep 17 00:00:00 2001
From: Sahil Kumar <xdsahil@gmail.com>
Date: Wed, 13 Jan 2021 16:40:28 +0530
Subject: [PATCH] [ReactionBubble] Added Customization for the spacing between
 the bottom circles

Signed-off-by: Sahil Kumar <xdsahil@gmail.com>
---
 lib/src/message_widget.dart  |  9 +++------
 lib/src/reaction_bubble.dart | 15 ++++++++++-----
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/lib/src/message_widget.dart b/lib/src/message_widget.dart
index 3a718471..95753d09 100644
--- a/lib/src/message_widget.dart
+++ b/lib/src/message_widget.dart
@@ -444,12 +444,9 @@ class _MessageWidgetState extends State<MessageWidget> {
                                                   StreamChatTheme.of(context)
                                                       .colorTheme
                                                       .white,
-                                                  StreamChatTheme.of(context)
-                                                      .colorTheme
-                                                      .white,
-                                                  StreamChatTheme.of(context)
-                                                      .colorTheme
-                                                      .white,
+                                                  Colors.transparent,
+                                                  Colors.transparent,
+                                                  tailCirclesSpace: 1,
                                                 ),
                                               ),
                                             ),
diff --git a/lib/src/reaction_bubble.dart b/lib/src/reaction_bubble.dart
index 61cca62e..3811bace 100644
--- a/lib/src/reaction_bubble.dart
+++ b/lib/src/reaction_bubble.dart
@@ -16,6 +16,7 @@ class ReactionBubble extends StatelessWidget {
     this.reverse = false,
     this.flipTail = false,
     this.highlightOwnReactions = true,
+    this.tailCirclesSpace = 0,
   }) : super(key: key);
 
   final List<Reaction> reactions;
@@ -25,6 +26,7 @@ class ReactionBubble extends StatelessWidget {
   final bool reverse;
   final bool flipTail;
   final bool highlightOwnReactions;
+  final double tailCirclesSpace;
 
   @override
   Widget build(BuildContext context) {
@@ -146,6 +148,7 @@ class ReactionBubble extends StatelessWidget {
         backgroundColor,
         borderColor,
         maskColor,
+        tailCirclesSpace: tailCirclesSpace,
       ),
     );
     return Transform(
@@ -160,12 +163,14 @@ class ReactionBubblePainter extends CustomPainter {
   final Color color;
   final Color borderColor;
   final Color maskColor;
+  final double tailCirclesSpace;
 
   ReactionBubblePainter(
     this.color,
     this.borderColor,
-    this.maskColor,
-  );
+    this.maskColor, {
+    this.tailCirclesSpace = 0,
+  });
 
   @override
   void paint(Canvas canvas, Size size) {
@@ -190,7 +195,7 @@ class ReactionBubblePainter extends CustomPainter {
     final path = Path();
     path.addOval(
       Rect.fromCircle(
-        center: Offset(4, 3),
+        center: Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace),
         radius: 4,
       ),
     );
@@ -206,7 +211,7 @@ class ReactionBubblePainter extends CustomPainter {
     final path = Path();
     path.addOval(
       Rect.fromCircle(
-        center: Offset(4, 3),
+        center: Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace),
         radius: 2,
       ),
     );
@@ -220,7 +225,7 @@ class ReactionBubblePainter extends CustomPainter {
 
     final path = Path();
     path.addOval(Rect.fromCircle(
-      center: Offset(4, 3),
+      center: Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace),
       radius: 2,
     ));
     canvas.drawPath(path, paint);