fix: attachment builder (#326)

* feat: Changed attachment builder structure

* fix: fixed image attachments

* feat: Added onTaps to remaining attachments

* fix: merged fixes

* add trailing comma

Co-authored-by: Salvatore Giordano <[email protected]>

packages/stream_chat_flutter/lib/src/attachment/file_attachment.dart

@@ -14,6 +14,7 @@ import 'attachment_widget.dart';
 class FileAttachment extends AttachmentWidget {
   final Widget title;
   final Widget trailing;
+  final VoidCallback onAttachmentTap;
 
   const FileAttachment({
     Key key,
@@ -22,6 +23,7 @@ class FileAttachment extends AttachmentWidget {
     Size size,
     this.title,
     this.trailing,
+    this.onAttachmentTap,
   }) : super(key: key, message: message, attachment: attachment, size: size);
 
   bool get isVideoAttachment => attachment.title?.mimeType?.type == 'video';
@@ -31,6 +33,8 @@ class FileAttachment extends AttachmentWidget {
   @override
   Widget build(BuildContext context) {
     return Material(
+      child: GestureDetector(
+        onTap: onAttachmentTap,
         child: Container(
           width: size?.width ?? 100,
           height: 56.0,
@@ -72,6 +76,7 @@ class FileAttachment extends AttachmentWidget {
             ],
           ),
         ),
+      ),
     );
   }
 

packages/stream_chat_flutter/lib/src/attachment/giphy_attachment.dart

@@ -15,6 +15,7 @@ class GiphyAttachment extends AttachmentWidget {
   final MessageTheme messageTheme;
   final ShowMessageCallback onShowMessage;
   final ValueChanged<ReturnActionType> onReturnAction;
+  final VoidCallback onAttachmentTap;
 
   const GiphyAttachment({
     Key key,
@@ -24,6 +25,7 @@ class GiphyAttachment extends AttachmentWidget {
     this.messageTheme,
     this.onShowMessage,
     this.onReturnAction,
+    this.onAttachmentTap,
   }) : super(key: key, message: message, attachment: attachment, size: size);
 
   @override
@@ -65,7 +67,7 @@ class GiphyAttachment extends AttachmentWidget {
                   Padding(
                     padding: const EdgeInsets.all(8.0),
                     child: GestureDetector(
-                      onTap: () => _onImageTap(context),
+                      onTap: () => onAttachmentTap ?? _onImageTap(context),
                       child: ClipRRect(
                         borderRadius: BorderRadius.only(
                           topLeft: Radius.circular(8),

packages/stream_chat_flutter/lib/src/message_widget.dart

@@ -20,7 +20,11 @@ import 'extension.dart';
 import 'image_group.dart';
 import 'message_text.dart';
 
-typedef AttachmentBuilder = Widget Function(BuildContext, Message, Attachment);
+typedef AttachmentBuilder = Widget Function(
+  BuildContext,
+  Message,
+  List<Attachment>,
+);
 typedef OnQuotedMessageTap = void Function(String);
 
 /// The display behaviour of a widget
@@ -205,9 +209,40 @@ class MessageWidget extends StatefulWidget {
     this.customActions = const [],
     this.onAttachmentTap,
   })  : attachmentBuilders = {
-          'image': (context, message, attachment) {
+          'image': (context, message, attachments) {
-            return ImageAttachment(
+            var border = RoundedRectangleBorder(
-              attachment: attachment,
+              side: BorderSide.none,
+              borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
+            );
+
+            if (attachments.length > 1) {
+              return Padding(
+                padding: attachmentPadding,
+                child: wrapAttachmentWidget(
+                  context,
+                  Material(
+                    color: messageTheme.messageBackgroundColor,
+                    child: ImageGroup(
+                      size: Size(
+                        MediaQuery.of(context).size.width * 0.8,
+                        MediaQuery.of(context).size.height * 0.3,
+                      ),
+                      images: attachments,
+                      message: message,
+                      messageTheme: messageTheme,
+                      onShowMessage: onShowMessage,
+                    ),
+                  ),
+                  border,
+                  reverse,
+                ),
+              );
+            }
+
+            return wrapAttachmentWidget(
+              context,
+              ImageAttachment(
+                attachment: attachments[0],
                 message: message,
                 messageTheme: messageTheme,
                 size: Size(
@@ -218,12 +253,24 @@ class MessageWidget extends StatefulWidget {
                 onReturnAction: onReturnAction,
                 onAttachmentTap: onAttachmentTap != null
                     ? () {
-                      onAttachmentTap?.call(message, attachment);
+                        onAttachmentTap?.call(message, attachments[0]);
                       }
                     : null,
+              ),
+              border,
+              reverse,
             );
           },
-          'video': (context, message, attachment) {
+          'video': (context, message, attachments) {
+            var border = RoundedRectangleBorder(
+              side: BorderSide.none,
+              borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
+            );
+
+            return wrapAttachmentWidget(
+              context,
+              Column(
+                children: attachments.map((attachment) {
                   return VideoAttachment(
                     attachment: attachment,
                     messageTheme: messageTheme,
@@ -240,8 +287,22 @@ class MessageWidget extends StatefulWidget {
                           }
                         : null,
                   );
+                }).toList(),
+              ),
+              border,
+              reverse,
+            );
           },
-          'giphy': (context, message, attachment) {
+          'giphy': (context, message, attachments) {
+            var border = RoundedRectangleBorder(
+              side: BorderSide.none,
+              borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
+            );
+
+            return wrapAttachmentWidget(
+              context,
+              Column(
+                children: attachments.map((attachment) {
                   return GiphyAttachment(
                     attachment: attachment,
                     messageTheme: messageTheme,
@@ -253,8 +314,25 @@ class MessageWidget extends StatefulWidget {
                     onShowMessage: onShowMessage,
                     onReturnAction: onReturnAction,
                   );
+                }).toList(),
+              ),
+              border,
+              reverse,
+            );
           },
-          'file': (context, message, attachment) {
+          'file': (context, message, attachments) {
+            var border = RoundedRectangleBorder(
+              side: attachmentBorderSide ??
+                  BorderSide(
+                    color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+                  ),
+              borderRadius: attachmentBorderRadiusGeometry ?? BorderRadius.zero,
+            );
+
+            return wrapAttachmentWidget(
+              context,
+              Column(
+                children: attachments.map((attachment) {
                   return FileAttachment(
                     message: message,
                     attachment: attachment,
@@ -263,6 +341,11 @@ class MessageWidget extends StatefulWidget {
                       MediaQuery.of(context).size.height * 0.3,
                     ),
                   );
+                }).toList(),
+              ),
+              border,
+              reverse,
+            );
           },
         }..addAll(customAttachmentBuilders ?? {}),
         super(key: key);
@@ -830,55 +913,37 @@ class _MessageWidgetState extends State<MessageWidget>
   }
 
   Widget _parseAttachments() {
-    final images = widget.message.attachments
+    Map<String, List<Attachment>> attachmentGroups = {};
-            ?.where((element) =>
-                element.type == 'image' && element.ogScrapeUrl == null)
-            ?.toList() ??
-        [];
 
-    if (images.length > 1) {
+    widget.message.attachments
-      return Padding(
+        .where((element) => element.ogScrapeUrl == null)
-        padding: widget.attachmentPadding,
+        .forEach((e) {
-        child: wrapAttachmentWidget(
+      if (attachmentGroups[e.type] == null) {
-          context,
+        attachmentGroups[e.type] = [];
-          Material(
-            color: widget.messageTheme.messageBackgroundColor,
-            child: ImageGroup(
-              size: Size(
-                MediaQuery.of(context).size.width * 0.8,
-                MediaQuery.of(context).size.height * 0.3,
-              ),
-              images: images,
-              message: widget.message,
-              messageTheme: widget.messageTheme,
-              onShowMessage: widget.onShowMessage,
-            ),
-          ),
-        ),
-      );
       }
 
-    return Padding(
+      attachmentGroups[e.type].add(e);
-      padding: widget.attachmentPadding,
+    });
-      child: Column(
+
-        mainAxisSize: MainAxisSize.min,
+    List<Widget> attachmentList = [];
-        children: widget.message.attachments
+
-                ?.where((element) => element.ogScrapeUrl == null)
+    attachmentGroups.forEach((type, attachments) {
-                ?.map((attachment) {
+      final attachmentBuilder = widget.attachmentBuilders[type];
-              final attachmentBuilder =
-                  widget.attachmentBuilders[attachment.type];
 
       if (attachmentBuilder == null) return SizedBox();
       final attachmentWidget = attachmentBuilder(
         context,
         widget.message,
-                attachment,
+        attachments,
       );
-              return wrapAttachmentWidget(
+      attachmentList.add(attachmentWidget);
-                context,
+    });
-                attachmentWidget,
+
-              );
+    return Padding(
-            })?.insertBetween(SizedBox(
+      padding: widget.attachmentPadding,
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: attachmentList?.insertBetween(SizedBox(
               height: widget.attachmentPadding.vertical / 2,
             )) ??
             [],
@@ -886,24 +951,6 @@ class _MessageWidgetState extends State<MessageWidget>
     );
   }
 
-  Widget wrapAttachmentWidget(
-    BuildContext context,
-    Widget attachmentWidget,
-  ) {
-    final attachmentShape =
-        widget.attachmentShape ?? _getDefaultAttachmentShape(context);
-    return Material(
-      clipBehavior: Clip.antiAlias,
-      shape: attachmentShape,
-      type: MaterialType.transparency,
-      child: Transform(
-        transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-        alignment: Alignment.center,
-        child: attachmentWidget,
-      ),
-    );
-  }
-
   void onLongPress(BuildContext context) {
     if (widget.message.isEphemeral ||
         widget.message.status == MessageSendingStatus.sending) {

packages/stream_chat_flutter/lib/src/utils.dart

@@ -1,3 +1,5 @@
+import 'dart:math';
+
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -348,3 +350,21 @@ StreamSvgIcon getFileTypeImage(String type) {
       break;
   }
 }
+
+Widget wrapAttachmentWidget(
+  BuildContext context,
+  Widget attachmentWidget,
+  ShapeBorder attachmentShape,
+  bool reverse,
+) {
+  return Material(
+    clipBehavior: Clip.antiAlias,
+    shape: attachmentShape,
+    type: MaterialType.transparency,
+    child: Transform(
+      transform: Matrix4.rotationY(reverse ? pi : 0),
+      alignment: Alignment.center,
+      child: attachmentWidget,
+    ),
+  );
+}