[MessageWidget] Fix attachment padding and border sides

Signed-off-by: Sahil Kumar <[email protected]>

lib/src/file_attachment.dart

@@ -62,15 +62,7 @@ class _FileAttachmentState extends State<FileAttachment> {
       child: Container(
         width: widget.size?.width ?? 100,
         height: 56.0,
-        decoration: BoxDecoration(
+        color: StreamChatTheme.of(context).colorTheme.white,
-          color: StreamChatTheme.of(context).colorTheme.white,
-          borderRadius:
-              widget.trailing != null ? BorderRadius.circular(16.0) : null,
-          border: widget.trailing != null
-              ? Border.fromBorderSide(BorderSide(
-                  color: StreamChatTheme.of(context).colorTheme.greyWhisper))
-              : null,
-        ),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [

lib/src/message_list_view.dart

@@ -815,7 +815,9 @@ class _MessageListViewState extends State<MessageListView> {
         message.attachments?.any((it) => it.ogScrapeUrl != null) == true;
 
     final borderSide =
-        isOnlyEmoji || hasUrlAttachment || isMyMessage ? BorderSide.none : null;
+        isOnlyEmoji || hasUrlAttachment || (isMyMessage && !hasFileAttachment)
+            ? BorderSide.none
+            : null;
 
     Widget child = MessageWidget(
       key: ValueKey<String>('MESSAGE-${message.id}'),
@@ -859,14 +861,15 @@ class _MessageListViewState extends State<MessageListView> {
       attachmentBorderRadiusGeometry: BorderRadius.only(
         topLeft: Radius.circular(attachmentBorderRadius),
         bottomLeft: Radius.circular(
-          (timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
+          (timeDiff >= 1 || !isNextUserSame) &&
+                  !(hasReplies || isThreadMessage || hasFileAttachment)
               ? 0
               : attachmentBorderRadius,
         ),
         topRight: Radius.circular(attachmentBorderRadius),
         bottomRight: Radius.circular(attachmentBorderRadius),
       ),
-      attachmentPadding: const EdgeInsets.all(2),
+      attachmentPadding: EdgeInsets.all(hasFileAttachment ? 4 : 2),
       borderRadiusGeometry: BorderRadius.only(
         topLeft: Radius.circular(16),
         bottomLeft: Radius.circular(

lib/src/message_widget.dart

@@ -419,7 +419,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                                                         if (hasQuotedMessage)
                                                           _buildQuotedMessage(),
                                                         if (hasNonUrlAttachments)
-                                                          ..._parseAttachments(
+                                                          _parseAttachments(
                                                               context),
                                                         if (widget.message.text
                                                                 .trim()
@@ -777,7 +777,7 @@ class _MessageWidgetState extends State<MessageWidget> {
       side: widget.attachmentBorderSide ??
           widget.borderSide ??
           BorderSide(
-            color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
+            color: StreamChatTheme.of(context).colorTheme.greyWhisper,
           ),
       borderRadius: widget.attachmentBorderRadiusGeometry ??
           widget.borderRadiusGeometry ??
@@ -785,7 +785,7 @@ class _MessageWidgetState extends State<MessageWidget> {
     );
   }
 
-  List<Widget> _parseAttachments(BuildContext context) {
+  Widget _parseAttachments(BuildContext context) {
     final images = widget.message.attachments
             ?.where((element) =>
                 element.type == 'image' && element.ogScrapeUrl == null)
@@ -793,8 +793,9 @@ class _MessageWidgetState extends State<MessageWidget> {
         [];
 
     if (images.length > 1) {
-      return [
+      return Padding(
-        wrapAttachmentWidget(
+        padding: widget.attachmentPadding,
+        child: wrapAttachmentWidget(
           context,
           Material(
             color: widget.messageTheme.messageBackgroundColor,
@@ -809,30 +810,36 @@ class _MessageWidgetState extends State<MessageWidget> {
             ),
           ),
         ),
-      ];
+      );
     }
 
-    return widget.message.attachments
+    return Padding(
-            ?.where((element) => element.ogScrapeUrl == null)
+      padding: widget.attachmentPadding,
-            ?.map((attachment) {
+      child: Column(
-          final attachmentBuilder = widget.attachmentBuilders[attachment.type];
+        mainAxisSize: MainAxisSize.min,
+        children: widget.message.attachments
+                ?.where((element) => element.ogScrapeUrl == null)
+                ?.map((attachment) {
+              final attachmentBuilder =
+                  widget.attachmentBuilders[attachment.type];
 
-          if (attachmentBuilder == null) {
+              if (attachmentBuilder == null) return SizedBox();
-            return SizedBox();
+              final attachmentWidget = attachmentBuilder(
-          }
+                context,
-
+                widget.message,
-          final attachmentWidget = attachmentBuilder(
+                attachment,
-            context,
+              );
-            widget.message,
+              return wrapAttachmentWidget(
-            attachment,
+                context,
-          );
+                attachmentWidget,
-          return wrapAttachmentWidget(
+                attachment: attachment,
-            context,
+              );
-            attachmentWidget,
+            })?.insertBetween(SizedBox(
-            attachment: attachment,
+              height: widget.attachmentPadding.vertical / 2,
-          );
+            )) ??
-        })?.toList() ??
+            [],
-        [];
+      ),
+    );
   }
 
   Widget wrapAttachmentWidget(
@@ -843,21 +850,13 @@ class _MessageWidgetState extends State<MessageWidget> {
     final attachmentShape =
         widget.attachmentShape ?? widget.shape ?? _getDefaultShape(context);
     return Material(
-      color: _getBackgroundColor(),
       clipBehavior: Clip.antiAlias,
       shape: attachmentShape,
-      child: Padding(
+      type: MaterialType.transparency,
-        padding: widget.attachmentPadding,
+      child: Transform(
-        child: Material(
+        transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-          clipBehavior: Clip.hardEdge,
+        alignment: Alignment.center,
-          shape: attachmentShape,
+        child: attachmentWidget,
-          type: MaterialType.transparency,
-          child: Transform(
-            transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-            alignment: Alignment.center,
-            child: attachmentWidget,
-          ),
-        ),
       ),
     );
   }