fix attachment border radius

packages/stream_chat_flutter/lib/src/message_actions_modal.dart

@@ -5,10 +5,10 @@ import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:stream_chat_flutter/src/message_action.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'extension.dart';
 import 'message_input.dart';
@@ -34,6 +34,7 @@ class MessageActionsModal extends StatefulWidget {
   final ShapeBorder messageShape;
   final ShapeBorder attachmentShape;
   final DisplayWidget showUserAvatar;
+  final BorderRadius attachmentBorderRadiusGeometry;
 
   /// List of custom actions
   final List<MessageAction> customActions;
@@ -58,6 +59,7 @@ class MessageActionsModal extends StatefulWidget {
     this.attachmentShape,
     this.reverse = false,
     this.customActions = const [],
+    this.attachmentBorderRadiusGeometry,
   }) : super(key: key);
 
   @override
@@ -153,6 +155,8 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                               child: MessageWidget(
                                 key: Key('MessageWidget'),
                                 reverse: widget.reverse,
+                                attachmentBorderRadiusGeometry:
+                                    widget.attachmentBorderRadiusGeometry,
                                 message: widget.message.copyWith(
                                   text: widget.message.text.length > 200
                                       ? '${widget.message.text.substring(0, 200)}...'

packages/stream_chat_flutter/lib/src/message_reactions_modal.dart

@@ -1,17 +1,16 @@
 import 'dart:ui';
 
 import 'package:flutter/material.dart';
-import 'package:stream_chat_flutter/src/message_action.dart';
-import 'package:stream_chat_flutter/stream_chat_flutter.dart';
-import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:stream_chat_flutter/src/reaction_bubble.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_chat.dart';
 import 'package:stream_chat_flutter/src/user_avatar.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 
+import 'extension.dart';
 import 'message_widget.dart';
 import 'stream_chat_theme.dart';
-import 'extension.dart';
 
 class MessageReactionsModal extends StatelessWidget {
   final Widget Function(BuildContext, Message) editMessageInputBuilder;
@@ -24,6 +23,7 @@ class MessageReactionsModal extends StatelessWidget {
   final ShapeBorder messageShape;
   final ShapeBorder attachmentShape;
   final void Function(User) onUserAvatarTap;
+  final BorderRadius attachmentBorderRadiusGeometry;
 
   const MessageReactionsModal({
     Key key,
@@ -37,6 +37,7 @@ class MessageReactionsModal extends StatelessWidget {
     this.reverse = false,
     this.showUserAvatar = DisplayWidget.show,
     this.onUserAvatarTap,
+    this.attachmentBorderRadiusGeometry,
   }) : super(key: key);
 
   @override
@@ -133,6 +134,8 @@ class MessageReactionsModal extends StatelessWidget {
                               shape: messageShape,
                               attachmentShape: attachmentShape,
                               padding: const EdgeInsets.all(0),
+                              attachmentBorderRadiusGeometry:
+                                  attachmentBorderRadiusGeometry,
                               attachmentPadding: EdgeInsets.all(
                                 hasFileAttachment ? 4 : 2,
                               ),

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -235,6 +235,7 @@ class MessageWidget extends StatefulWidget {
                   ),
                   border,
                   reverse,
+                  attachmentBorderRadiusGeometry ?? BorderRadius.zero,
                 ),
               );
             }
@@ -259,6 +260,7 @@ class MessageWidget extends StatefulWidget {
               ),
               border,
               reverse,
+              attachmentBorderRadiusGeometry ?? BorderRadius.zero,
             );
           },
           'video': (context, message, attachments) {
@@ -291,6 +293,7 @@ class MessageWidget extends StatefulWidget {
               ),
               border,
               reverse,
+              attachmentBorderRadiusGeometry ?? BorderRadius.zero,
             );
           },
           'giphy': (context, message, attachments) {
@@ -318,6 +321,7 @@ class MessageWidget extends StatefulWidget {
               ),
               border,
               reverse,
+              attachmentBorderRadiusGeometry ?? BorderRadius.zero,
             );
           },
           'file': (context, message, attachments) {
@@ -329,22 +333,28 @@ class MessageWidget extends StatefulWidget {
               borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
             );
 
-            return wrapAttachmentWidget(
+            return Column(
-              context,
+              children: attachments
-              Column(
+                  .map<Widget>((attachment) {
-                children: attachments.map((attachment) {
+                    return wrapAttachmentWidget(
-                  return FileAttachment(
+                      context,
-                    message: message,
+                      FileAttachment(
-                    attachment: attachment,
+                        message: message,
-                    size: Size(
+                        attachment: attachment,
-                      MediaQuery.of(context).size.width * 0.8,
+                        size: Size(
-                      MediaQuery.of(context).size.height * 0.3,
+                          MediaQuery.of(context).size.width * 0.8,
-                    ),
+                          MediaQuery.of(context).size.height * 0.3,
-                  );
+                        ),
-                }).toList(),
+                      ),
-              ),
+                      border,
-              border,
+                      reverse,
-              reverse,
+                      attachmentBorderRadiusGeometry ?? BorderRadius.zero,
+                    );
+                  })
+                  .insertBetween(SizedBox(
+                    height: attachmentPadding.vertical / 2,
+                  ))
+                  .toList(),
             );
           },
         }..addAll(customAttachmentBuilders ?? {}),
@@ -822,6 +832,8 @@ class _MessageWidgetState extends State<MessageWidget>
           return StreamChannel(
             channel: channel,
             child: MessageActionsModal(
+              attachmentBorderRadiusGeometry:
+                  widget.attachmentBorderRadiusGeometry,
               showUserAvatar:
                   widget.message.user.id == channel.client.state.user.id
                       ? DisplayWidget.gone
@@ -869,6 +881,8 @@ class _MessageWidgetState extends State<MessageWidget>
           return StreamChannel(
             channel: channel,
             child: MessageReactionsModal(
+              attachmentBorderRadiusGeometry:
+                  widget.attachmentBorderRadiusGeometry,
               showUserAvatar:
                   widget.message.user.id == channel.client.state.user.id
                       ? DisplayWidget.gone

packages/stream_chat_flutter/lib/src/utils.dart

@@ -356,15 +356,19 @@ Widget wrapAttachmentWidget(
   Widget attachmentWidget,
   ShapeBorder attachmentShape,
   bool reverse,
+  BorderRadius borderRadius,
 ) {
-  return Material(
+  return ClipRRect(
-    clipBehavior: Clip.antiAlias,
+    borderRadius: borderRadius,
-    shape: attachmentShape,
+    child: Material(
-    type: MaterialType.transparency,
+      clipBehavior: Clip.antiAlias,
-    child: Transform(
+      shape: attachmentShape,
-      transform: Matrix4.rotationY(reverse ? pi : 0),
+      type: MaterialType.transparency,
-      alignment: Alignment.center,
+      child: Transform(
-      child: attachmentWidget,
+        transform: Matrix4.rotationY(reverse ? pi : 0),
+        alignment: Alignment.center,
+        child: attachmentWidget,
+      ),
     ),
   );
 }