Merge pull request #430 from GetStream/rfac/transform

refactor: transform

packages/stream_chat_flutter/lib/src/deleted_message.dart

@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 
@@ -33,10 +31,7 @@ class DeletedMessage extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final chatThemeData = StreamChatTheme.of(context);
-    return Transform(
-      transform: Matrix4.rotationY(reverse ? pi : 0),
-      alignment: Alignment.center,
-      child: Material(
+    return Material(
       color: messageTheme.messageBackgroundColor,
       shape: shape ??
           RoundedRectangleBorder(
@@ -53,9 +48,6 @@ class DeletedMessage extends StatelessWidget {
           vertical: 8,
           horizontal: 16,
         ),
-          child: Transform(
-            transform: Matrix4.rotationY(reverse ? pi : 0),
-            alignment: Alignment.center,
         child: Text(
           'Message deleted',
           style: messageTheme.messageText?.copyWith(
@@ -64,8 +56,6 @@ class DeletedMessage extends StatelessWidget {
           ),
         ),
       ),
-        ),
-      ),
     );
   }
 }

packages/stream_chat_flutter/lib/src/extension.dart

@@ -104,3 +104,15 @@ extension BuildContextX on BuildContext {
   double get textScaleFactor =>
       MediaQuery.maybeOf(this)?.textScaleFactor ?? 1.0;
 }
+
+/// Extension on [BorderRadius]
+extension FlipBorder on BorderRadius {
+  /// Flips borders (Y)
+  BorderRadius mirrorBorderIfReversed({bool reverse = true}) => reverse
+      ? BorderRadius.only(
+          topLeft: topRight,
+          topRight: topLeft,
+          bottomLeft: bottomRight,
+          bottomRight: bottomLeft)
+      : this;
+}

packages/stream_chat_flutter/lib/src/message_actions_modal.dart

@@ -173,12 +173,12 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                             Align(
                               alignment: Alignment(
                                   user?.id == widget.message.user?.id
-                                      ? (divFactor > 1.0
-                                          ? 0.0
-                                          : (1.0 - divFactor))
-                                      : (divFactor > 1.0
-                                          ? 0.0
-                                          : -(1.0 - divFactor)),
+                                      ? (divFactor >= 1.0
+                                          ? -0.2
+                                          : (1.2 - divFactor))
+                                      : (divFactor >= 1.0
+                                          ? 0.2
+                                          : -(1.2 - divFactor)),
                                   0),
                               child: ReactionPicker(
                                 message: widget.message,
@@ -189,8 +189,10 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                             child: MessageWidget(
                               key: const Key('MessageWidget'),
                               reverse: widget.reverse,
-                              attachmentBorderRadiusGeometry:
-                                  widget.attachmentBorderRadiusGeometry,
+                              attachmentBorderRadiusGeometry: widget
+                                  .attachmentBorderRadiusGeometry
+                                  ?.mirrorBorderIfReversed(
+                                      reverse: !widget.reverse),
                               message: widget.message.copyWith(
                                 text: widget.message.text!.length > 200
                                     // ignore: lines_longer_than_80_chars

packages/stream_chat_flutter/lib/src/message_list_view.dart

@@ -980,25 +980,44 @@ class _MessageListViewState extends State<MessageListView> {
       onReplyTap: widget.onReplyTap,
       attachmentBorderRadiusGeometry: BorderRadius.only(
         topLeft: Radius.circular(attachmentBorderRadius),
-        bottomLeft: Radius.circular(
+        bottomLeft: isMyMessage
+            ? Radius.circular(attachmentBorderRadius)
+            : Radius.circular(
                 (timeDiff >= 1 || !isNextUserSame) &&
                         !(hasReplies || isThreadMessage || hasFileAttachment)
                     ? 0
                     : attachmentBorderRadius,
               ),
         topRight: Radius.circular(attachmentBorderRadius),
-        bottomRight: Radius.circular(attachmentBorderRadius),
+        bottomRight: isMyMessage
+            ? Radius.circular(
+                (timeDiff >= 1 || !isNextUserSame) &&
+                        !(hasReplies || isThreadMessage || hasFileAttachment)
+                    ? 0
+                    : attachmentBorderRadius,
+              )
+            : Radius.circular(attachmentBorderRadius),
       ),
       attachmentPadding: EdgeInsets.all(hasFileAttachment ? 4 : 2),
       borderRadiusGeometry: BorderRadius.only(
         topLeft: const Radius.circular(16),
-        bottomLeft: Radius.circular(
-          (timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
+        bottomLeft: isMyMessage
+            ? const Radius.circular(16)
+            : Radius.circular(
+                (timeDiff >= 1 || !isNextUserSame) &&
+                        !(hasReplies || isThreadMessage)
                     ? 0
                     : 16,
               ),
         topRight: const Radius.circular(16),
-        bottomRight: const Radius.circular(16),
+        bottomRight: isMyMessage
+            ? Radius.circular(
+                (timeDiff >= 1 || !isNextUserSame) &&
+                        !(hasReplies || isThreadMessage)
+                    ? 0
+                    : 16,
+              )
+            : const Radius.circular(16),
       ),
       textPadding: EdgeInsets.symmetric(
         vertical: 8,

packages/stream_chat_flutter/lib/src/message_reactions_modal.dart

@@ -112,12 +112,12 @@ class MessageReactionsModal extends StatelessWidget {
                             Align(
                               alignment: Alignment(
                                   user!.id == message.user!.id
-                                      ? (divFactor > 1.0
-                                          ? 0.0
-                                          : (1.0 - divFactor))
-                                      : (divFactor > 1.0
-                                          ? 0.0
-                                          : -(1.0 - divFactor)),
+                                      ? (divFactor >= 1.0
+                                          ? -0.2
+                                          : (1.2 - divFactor))
+                                      : (divFactor >= 1.0
+                                          ? 0.2
+                                          : -(1.2 - divFactor)),
                                   0),
                               child: ReactionPicker(
                                 message: message,
@@ -144,7 +144,9 @@ class MessageReactionsModal extends StatelessWidget {
                               attachmentShape: attachmentShape,
                               padding: const EdgeInsets.all(0),
                               attachmentBorderRadiusGeometry:
-                                  attachmentBorderRadiusGeometry,
+                                  attachmentBorderRadiusGeometry
+                                      ?.mirrorBorderIfReversed(
+                                          reverse: !reverse),
                               attachmentPadding: EdgeInsets.all(
                                 hasFileAttachment ? 4 : 2,
                               ),

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -1,4 +1,3 @@
-import 'dart:math';
 import 'dart:ui';
 
 import 'package:flutter/cupertino.dart';
@@ -131,8 +130,6 @@ class MessageWidget extends StatefulWidget {
                   ),
                   border,
                   reverse,
-                  attachmentBorderRadiusGeometry as BorderRadius? ??
-                      BorderRadius.zero,
                 ),
               );
             }
@@ -157,8 +154,6 @@ class MessageWidget extends StatefulWidget {
               ),
               border,
               reverse,
-              attachmentBorderRadiusGeometry as BorderRadius? ??
-                  BorderRadius.zero,
             );
           },
           'video': (context, message, attachments) {
@@ -191,8 +186,6 @@ class MessageWidget extends StatefulWidget {
               ),
               border,
               reverse,
-              attachmentBorderRadiusGeometry as BorderRadius? ??
-                  BorderRadius.zero,
             );
           },
           'giphy': (context, message, attachments) {
@@ -219,8 +212,6 @@ class MessageWidget extends StatefulWidget {
               ),
               border,
               reverse,
-              attachmentBorderRadiusGeometry as BorderRadius? ??
-                  BorderRadius.zero,
             );
           },
           'file': (context, message, attachments) {
@@ -248,8 +239,6 @@ class MessageWidget extends StatefulWidget {
                       ),
                       border,
                       reverse,
-                      attachmentBorderRadiusGeometry as BorderRadius? ??
-                          BorderRadius.zero,
                     );
                   })
                   .insertBetween(SizedBox(
@@ -472,30 +461,33 @@ class _MessageWidgetState extends State<MessageWidget>
               : () => onLongPress(context),
           child: Padding(
             padding: widget.padding ?? const EdgeInsets.all(8),
-            child: Transform(
-              alignment: Alignment.center,
-              transform: Matrix4.rotationY(widget.reverse ? pi : 0),
             child: FractionallySizedBox(
-                alignment: Alignment.centerLeft,
+              alignment:
+                  widget.reverse ? Alignment.centerRight : Alignment.centerLeft,
               widthFactor: 0.78,
               child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                crossAxisAlignment: widget.reverse
+                    ? CrossAxisAlignment.end
+                    : CrossAxisAlignment.start,
                 mainAxisSize: MainAxisSize.min,
                 children: <Widget>[
                   Stack(
                     clipBehavior: Clip.none,
-                      alignment: AlignmentDirectional.bottomStart,
+                    alignment: widget.reverse
+                        ? AlignmentDirectional.bottomEnd
+                        : AlignmentDirectional.bottomStart,
                     children: [
                       Column(
-                          crossAxisAlignment: CrossAxisAlignment.start,
+                        crossAxisAlignment: widget.reverse
+                            ? CrossAxisAlignment.end
+                            : CrossAxisAlignment.start,
                         mainAxisSize: MainAxisSize.min,
                         children: [
                           Row(
                             crossAxisAlignment: CrossAxisAlignment.end,
                             mainAxisSize: MainAxisSize.min,
                             children: <Widget>[
-                                if (widget.showUserAvatar ==
-                                        DisplayWidget.show &&
+                              if (widget.showUserAvatar == DisplayWidget.show &&
                                   widget.message.user != null) ...[
                                 _buildUserAvatar(),
                                 const SizedBox(width: 4),
@@ -505,14 +497,16 @@ class _MessageWidgetState extends State<MessageWidget>
                               Flexible(
                                 child: PortalEntry(
                                   portal: Container(
-                                      transform:
-                                          Matrix4.translationValues(-12, 0, 0),
+                                    transform: Matrix4.translationValues(
+                                        widget.reverse ? 12 : -12, 0, 0),
                                     constraints: const BoxConstraints(
                                         maxWidth: 22 * 6.0),
                                     child: _buildReactionIndicator(context),
                                   ),
-                                    portalAnchor: const Alignment(-1, -1),
-                                    childAnchor: const Alignment(1, -1),
+                                  portalAnchor:
+                                      Alignment(widget.reverse ? 1 : -1, -1),
+                                  childAnchor:
+                                      Alignment(widget.reverse ? -1 : 1, -1),
                                   child: Stack(
                                     clipBehavior: Clip.none,
                                     children: [
@@ -530,32 +524,25 @@ class _MessageWidgetState extends State<MessageWidget>
                                             : EdgeInsets.zero,
                                         child: (widget.message.isDeleted &&
                                                 !isFailedState)
-                                              ? Transform(
-                                                  alignment: Alignment.center,
-                                                  transform: Matrix4.rotationY(
-                                                      widget.reverse ? pi : 0),
-                                                  child: Container(
+                                            ? Container(
                                                 // ignore: lines_longer_than_80_chars
                                                 margin: EdgeInsets.symmetric(
                                                     horizontal:
                                                         // ignore: lines_longer_than_80_chars
                                                         widget.showUserAvatar ==
                                                                 // ignore: lines_longer_than_80_chars
-                                                                    DisplayWidget.gone
+                                                                DisplayWidget
+                                                                    .gone
                                                             ? 0
                                                             : 4.0),
                                                 child: DeletedMessage(
-                                                      reverse: widget.reverse,
-                                                      // ignore: lines_longer_than_80_chars
                                                   borderRadiusGeometry: widget
                                                       .borderRadiusGeometry,
-                                                      borderSide:
-                                                          widget.borderSide,
+                                                  borderSide: widget.borderSide,
                                                   shape: widget.shape,
                                                   messageTheme:
                                                       widget.messageTheme,
                                                 ),
-                                                  ),
                                               )
                                             : Card(
                                                 clipBehavior: Clip.antiAlias,
@@ -566,15 +553,13 @@ class _MessageWidgetState extends State<MessageWidget>
                                                           : 0.0) +
                                                       // ignore: lines_longer_than_80_chars
                                                       (widget.showUserAvatar ==
-                                                                DisplayWidget
-                                                                    .gone
+                                                              DisplayWidget.gone
                                                           ? 0
                                                           : 4.0),
                                                 ),
                                                 shape: widget.shape ??
                                                     RoundedRectangleBorder(
-                                                        side: widget
-                                                                .borderSide ??
+                                                      side: widget.borderSide ??
                                                           BorderSide(
                                                             color: widget
                                                                     // ignore: lines_longer_than_80_chars
@@ -607,11 +592,9 @@ class _MessageWidgetState extends State<MessageWidget>
                                       ),
                                       if (widget.showReactionPickerIndicator)
                                         Positioned(
-                                            right: 4,
+                                          right: widget.reverse ? null : 4,
+                                          left: widget.reverse ? 4 : null,
                                           top: -8,
-                                            child: Transform(
-                                              transform: Matrix4.rotationY(
-                                                  widget.reverse ? pi : 0),
                                           child: CustomPaint(
                                             painter: ReactionBubblePainter(
                                               StreamChatTheme.of(context)
@@ -623,7 +606,6 @@ class _MessageWidgetState extends State<MessageWidget>
                                             ),
                                           ),
                                         ),
-                                          ),
                                     ],
                                   ),
                                 ),
@@ -654,7 +636,6 @@ class _MessageWidgetState extends State<MessageWidget>
           ),
         ),
       ),
-      ),
     );
   }
 
@@ -681,10 +662,7 @@ class _MessageWidgetState extends State<MessageWidget>
   Widget get _bottomRow {
     if (isDeleted) {
       final chatThemeData = StreamChatTheme.of(context);
-      return Transform(
-        transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-        alignment: Alignment.center,
-        child: Row(
+      return Row(
         mainAxisSize: MainAxisSize.min,
         children: [
           StreamSvgIcon.eye(
@@ -698,7 +676,6 @@ class _MessageWidgetState extends State<MessageWidget>
                 .copyWith(color: chatThemeData.colorTheme.grey),
           ),
         ],
-        ),
       );
     }
 
@@ -765,8 +742,10 @@ class _MessageWidgetState extends State<MessageWidget>
 
     return Row(
       crossAxisAlignment: CrossAxisAlignment.end,
+      mainAxisAlignment:
+          widget.reverse ? MainAxisAlignment.end : MainAxisAlignment.start,
       children: [
-        if (showThreadTail)
+        if (showThreadTail && !widget.reverse)
           Container(
             margin: EdgeInsets.only(
               bottom: context.textScaleFactor *
@@ -777,18 +756,15 @@ class _MessageWidgetState extends State<MessageWidget>
               painter: _ThreadReplyPainter(
                 context: context,
                 color: widget.messageTheme.messageBorderColor,
+                reverse: widget.reverse,
               ),
             ),
           ),
         ...children.map(
           (child) {
-            Widget mappedChild = Transform(
-              transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-              alignment: Alignment.center,
-              child: SizedBox(
+            Widget mappedChild = SizedBox(
               height: context.textScaleFactor * 14,
               child: child,
-              ),
             );
             if (child.key == usernameKey) {
               mappedChild = Flexible(child: mappedChild);
@@ -796,6 +772,21 @@ class _MessageWidgetState extends State<MessageWidget>
             return mappedChild;
           },
         ),
+        if (showThreadTail && widget.reverse)
+          Container(
+            margin: EdgeInsets.only(
+              bottom: context.textScaleFactor *
+                  ((widget.messageTheme.replies?.fontSize ?? 1) / 2),
+            ),
+            child: CustomPaint(
+              size: const Size(16, 32) * context.textScaleFactor,
+              painter: _ThreadReplyPainter(
+                context: context,
+                color: widget.messageTheme.messageBorderColor,
+                reverse: widget.reverse,
+              ),
+            ),
+          ),
       ].insertBetween(const SizedBox(width: 8)),
     );
   }
@@ -1078,15 +1069,11 @@ class _MessageWidgetState extends State<MessageWidget>
     return child;
   }
 
-  Widget _buildUserAvatar() => Transform(
-        transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-        alignment: Alignment.center,
-        child: Transform.translate(
+  Widget _buildUserAvatar() => Transform.translate(
         offset: Offset(
           0,
           widget.translateUserAvatar
-                ? (widget.messageTheme.avatarTheme?.constraints.maxHeight ??
-                        40) /
+              ? (widget.messageTheme.avatarTheme?.constraints.maxHeight ?? 40) /
                   2
               : 0,
         ),
@@ -1097,15 +1084,11 @@ class _MessageWidgetState extends State<MessageWidget>
           borderRadius: widget.messageTheme.avatarTheme!.borderRadius,
           showOnlineStatus: false,
         ),
-        ),
       );
 
   Widget _buildTextBubble() {
     if (widget.message.text!.trim().isEmpty) return const Offstage();
-    return Transform(
-      transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-      alignment: Alignment.center,
-      child: Column(
+    return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Padding(
@@ -1127,7 +1110,6 @@ class _MessageWidgetState extends State<MessageWidget>
         ),
         if (hasUrlAttachments && !hasQuotedMessage) _buildUrlAttachment(),
       ],
-      ),
     );
   }
 
@@ -1172,10 +1154,15 @@ class _MessageWidgetState extends State<MessageWidget>
 }
 
 class _ThreadReplyPainter extends CustomPainter {
-  const _ThreadReplyPainter({this.context, required this.color});
+  const _ThreadReplyPainter({
+    this.context,
+    required this.color,
+    this.reverse = false,
+  });
 
   final Color? color;
   final BuildContext? context;
+  final bool reverse;
 
   @override
   void paint(Canvas canvas, Size size) {
@@ -1186,12 +1173,13 @@ class _ThreadReplyPainter extends CustomPainter {
       ..strokeCap = StrokeCap.round;
 
     final path = Path()
-      ..moveTo(0, 0)
-      ..quadraticBezierTo(0, size.height * 0.38, 0, size.height * 0.50)
+      ..moveTo(reverse ? size.width : 0, 0)
+      ..quadraticBezierTo(reverse ? size.width : 0, size.height * 0.38,
+          reverse ? size.width : 0, size.height * 0.50)
       ..quadraticBezierTo(
-        0,
+        reverse ? size.width : 0,
         size.height,
-        size.width,
+        reverse ? 0 : size.width,
         size.height,
       );
     canvas.drawPath(path, paint);

packages/stream_chat_flutter/lib/src/quoted_message_widget.dart

@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -133,9 +131,6 @@ class QuotedMessageWidget extends StatelessWidget {
       if (_hasAttachments) _parseAttachments(context),
       if (msg.text!.isNotEmpty)
         Flexible(
-          child: Transform(
-            transform: Matrix4.rotationY(reverse ? pi : 0),
-            alignment: Alignment.center,
           child: MessageText(
             message: msg,
             messageTheme: isOnlyEmoji && _containsText
@@ -149,7 +144,6 @@ class QuotedMessageWidget extends StatelessWidget {
                   )),
           ),
         ),
-        ),
     ].insertBetween(const SizedBox(width: 8));
 
     return Container(
@@ -218,15 +212,11 @@ class QuotedMessageWidget extends StatelessWidget {
       }
     }
     child = AbsorbPointer(child: child);
-    return Transform(
-      transform: Matrix4.rotationY(reverse ? pi : 0),
-      alignment: Alignment.center,
-      child: Material(
+    return Material(
       clipBehavior: Clip.antiAlias,
       type: MaterialType.transparency,
       shape: attachment.type == 'file' ? null : _getDefaultShape(context),
       child: child,
-      ),
     );
   }
 
@@ -235,17 +225,13 @@ class QuotedMessageWidget extends StatelessWidget {
         borderRadius: BorderRadius.circular(8),
       );
 
-  Widget _buildUserAvatar() => Transform(
-        transform: Matrix4.rotationY(reverse ? pi : 0),
-        alignment: Alignment.center,
-        child: UserAvatar(
+  Widget _buildUserAvatar() => UserAvatar(
         user: message.user!,
         constraints: const BoxConstraints.tightFor(
           height: 24,
           width: 24,
         ),
         showOnlineStatus: false,
-        ),
       );
 
   Map<String, QuotedMessageAttachmentThumbnailBuilder>

packages/stream_chat_flutter/lib/src/reaction_bubble.dart

@@ -51,15 +51,13 @@ class ReactionBubble extends StatelessWidget {
   Widget build(BuildContext context) {
     final reactionIcons = StreamChatTheme.of(context).reactionIcons;
     final totalReactions = reactions.length;
-    final offset = totalReactions > 1 ? 16.0 : 2.0;
-    return Transform(
-      transform: Matrix4.rotationY(reverse ? pi : 0),
-      alignment: Alignment.center,
-      child: Stack(
+    final offset =
+        totalReactions > 1 ? 16.0.mirrorConditionally(flipTail) : 2.0;
+    return Stack(
       alignment: Alignment.center,
       children: [
         Transform.translate(
-            offset: Offset(reverse ? offset : -offset, 0),
+          offset: Offset(-offset, 0),
           child: Container(
             padding: const EdgeInsets.all(2),
             decoration: BoxDecoration(
@@ -69,7 +67,7 @@ class ReactionBubble extends StatelessWidget {
             child: Container(
               padding: EdgeInsets.symmetric(
                 vertical: 4,
-                  horizontal: totalReactions > 1 ? 4 : 0,
+                horizontal: totalReactions > 1 ? 4.0 : 0,
               ),
               decoration: BoxDecoration(
                 border: Border.all(
@@ -109,11 +107,10 @@ class ReactionBubble extends StatelessWidget {
         Positioned(
           bottom: 2,
           left: reverse ? null : 13,
-            right: !reverse ? null : 13,
+          right: reverse ? 13 : null,
           child: _buildReactionsTail(context),
         ),
       ],
-      ),
     );
   }
 
@@ -158,13 +155,11 @@ class ReactionBubble extends StatelessWidget {
         borderColor,
         maskColor,
         tailCirclesSpace: tailCirclesSpacing,
+        flipTail: !flipTail,
+        numberOfReactions: reactions.length,
       ),
     );
-    return Transform(
-      transform: Matrix4.rotationY(flipTail ? 0 : pi),
-      alignment: Alignment.center,
-      child: tail,
-    );
+    return tail;
   }
 }
 
@@ -176,6 +171,8 @@ class ReactionBubblePainter extends CustomPainter {
     this.borderColor,
     this.maskColor, {
     this.tailCirclesSpace = 0,
+    this.flipTail = false,
+    this.numberOfReactions = 0,
   });
 
   /// Color of bubble
@@ -190,6 +187,12 @@ class ReactionBubblePainter extends CustomPainter {
   /// Tail circle space
   final double tailCirclesSpace;
 
+  /// Flip tail
+  final bool flipTail;
+
+  /// Number of reactions on the page
+  final int numberOfReactions;
+
   @override
   void paint(Canvas canvas, Size size) {
     _drawOvalMask(size, canvas);
@@ -213,8 +216,9 @@ class ReactionBubblePainter extends CustomPainter {
     final path = Path()
       ..addOval(
         Rect.fromCircle(
-          center:
-              const Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace),
+          center: const Offset(4, 3).mirrorConditionally(flipTail) +
+              Offset(tailCirclesSpace, tailCirclesSpace)
+                  .mirrorConditionally(flipTail),
           radius: 4,
         ),
       );
@@ -230,8 +234,9 @@ class ReactionBubblePainter extends CustomPainter {
     final path = Path()
       ..addOval(
         Rect.fromCircle(
-          center:
-              const Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace),
+          center: const Offset(4, 3).mirrorConditionally(flipTail) +
+              Offset(tailCirclesSpace, tailCirclesSpace)
+                  .mirrorConditionally(flipTail),
           radius: 2,
         ),
       );
@@ -245,7 +250,9 @@ class ReactionBubblePainter extends CustomPainter {
 
     final path = Path()
       ..addOval(Rect.fromCircle(
-        center: const Offset(4, 3) + Offset(tailCirclesSpace, tailCirclesSpace),
+        center: const Offset(4, 3).mirrorConditionally(flipTail) +
+            Offset(tailCirclesSpace, tailCirclesSpace)
+                .mirrorConditionally(flipTail),
         radius: 2,
       ));
     canvas.drawPath(path, paint);
@@ -258,12 +265,12 @@ class ReactionBubblePainter extends CustomPainter {
       ..style = PaintingStyle.stroke;
 
     const dy = -2.2;
-    const startAngle = 1.1;
-    const sweepAngle = 1.2;
+    final startAngle = flipTail ? -0.1 : 1.1;
+    final sweepAngle = flipTail ? -1.2 : (numberOfReactions > 1 ? 1.2 : 0.9);
     final path = Path()
       ..addArc(
         Rect.fromCircle(
-          center: const Offset(1, dy),
+          center: const Offset(1, dy).mirrorConditionally(flipTail),
           radius: 4,
         ),
         -pi * startAngle,
@@ -278,12 +285,12 @@ class ReactionBubblePainter extends CustomPainter {
       ..strokeWidth = 1;
 
     const dy = -2.2;
-    const startAngle = 1;
-    const sweepAngle = 1.3;
+    final startAngle = flipTail ? -0.0 : 1.0;
+    final sweepAngle = flipTail ? -1.3 : 1.3;
     final path = Path()
       ..addArc(
         Rect.fromCircle(
-          center: const Offset(1, dy),
+          center: const Offset(1, dy).mirrorConditionally(flipTail),
           radius: 4,
         ),
         -pi * startAngle,
@@ -299,12 +306,12 @@ class ReactionBubblePainter extends CustomPainter {
       ..style = PaintingStyle.fill;
 
     const dy = -2.2;
-    const startAngle = 1.1;
-    const sweepAngle = 1.2;
+    final startAngle = flipTail ? -0.1 : 1.1;
+    final sweepAngle = flipTail ? -1.2 : 1.2;
     final path = Path()
       ..addArc(
         Rect.fromCircle(
-          center: const Offset(1, dy),
+          center: const Offset(1, dy).mirrorConditionally(flipTail),
           radius: 6,
         ),
         -pi * startAngle,
@@ -316,3 +323,17 @@ class ReactionBubblePainter extends CustomPainter {
   @override
   bool shouldRepaint(CustomPainter oldDelegate) => true;
 }
+
+/// Extension on [Offset]
+extension YTransformer on Offset {
+  /// Flips x coordinate when flip is true
+  // ignore: avoid_positional_boolean_parameters
+  Offset mirrorConditionally(bool flip) => Offset(flip ? -dx : dx, dy);
+}
+
+/// Extension on [Offset]
+extension IntTransformer on double {
+  /// Flips x coordinate when flip is true
+  // ignore: avoid_positional_boolean_parameters
+  double mirrorConditionally(bool flip) => flip ? -this : this;
+}

packages/stream_chat_flutter/lib/src/utils.dart

@@ -1,5 +1,3 @@
-import 'dart:math';
-
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
@@ -332,18 +330,10 @@ Widget wrapAttachmentWidget(
   ShapeBorder attachmentShape,
   // ignore: avoid_positional_boolean_parameters
   bool reverse,
-  BorderRadius borderRadius,
 ) =>
-    ClipRRect(
-      borderRadius: borderRadius,
-      child: Material(
+    Material(
       clipBehavior: Clip.antiAlias,
       shape: attachmentShape,
       type: MaterialType.transparency,
-        child: Transform(
-          transform: Matrix4.rotationY(reverse ? pi : 0),
-          alignment: Alignment.center,
       child: attachmentWidget,
-        ),
-      ),
     );