add image group

lib/src/group_image.dart

@@ -17,16 +17,6 @@ class GroupImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final secondRow = images
-        .skip(2)
-        .map((url) => Flexible(
-              child: CachedNetworkImage(
-                imageUrl: url,
-                fit: BoxFit.cover,
-              ),
-            ))
-        .toList();
-
     return GestureDetector(
       onTap: onTap,
       child: ClipRRect(
@@ -81,7 +71,7 @@ class GroupImage extends StatelessWidget {
                             ))
                         .toList(),
                   ),
-                )
+                ),
             ],
           ),
         ),

lib/src/image_attachment.dart

@@ -17,8 +17,8 @@ class ImageAttachment extends StatelessWidget {
     Key key,
     @required this.attachment,
     @required this.message,
+    @required this.size,
     this.messageTheme,
-    this.size,
   }) : super(key: key);
 
   @override
@@ -30,8 +30,8 @@ class ImageAttachment extends StatelessWidget {
         attachment: attachment,
       );
     }
-    return SizedBox.fromSize(
+    return ConstrainedBox(
-      size: size,
+      constraints: BoxConstraints.loose(size),
       child: Stack(
         children: <Widget>[
           Column(

lib/src/image_group.dart

@@ -0,0 +1,99 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/message_widget.dart';
+
+class ImageGroup extends StatelessWidget {
+  const ImageGroup({
+    Key key,
+    @required this.imageBuilder,
+    @required this.images,
+    @required this.message,
+    this.size,
+  }) : super(key: key);
+
+  final AttachmentBuilder imageBuilder;
+  final List<Attachment> images;
+  final Message message;
+  final Size size;
+
+  @override
+  Widget build(BuildContext context) {
+    return ConstrainedBox(
+      constraints: BoxConstraints.loose(size),
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          FittedBox(
+            fit: BoxFit.cover,
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                imageBuilder(
+                  context,
+                  message,
+                  images[0],
+                ),
+                Padding(
+                  padding: const EdgeInsets.only(left: 4.0),
+                  child: imageBuilder(
+                    context,
+                    message,
+                    images[1],
+                  ),
+                ),
+              ],
+            ),
+          ),
+          if (images.length >= 3)
+            Padding(
+              padding: const EdgeInsets.only(top: 2.0),
+              child: FittedBox(
+                fit: BoxFit.cover,
+                child: Row(
+                  mainAxisSize: MainAxisSize.min,
+                  children: <Widget>[
+                    imageBuilder(
+                      context,
+                      message,
+                      images[2],
+                    ),
+                    if (images.length >= 4)
+                      Padding(
+                        padding: const EdgeInsets.only(left: 4.0),
+                        child: Stack(
+                          children: <Widget>[
+                            imageBuilder(
+                              context,
+                              message,
+                              images[3],
+                            ),
+                            if (images.length > 4)
+                              Positioned.fill(
+                                child: Material(
+                                  color: Colors.black38,
+                                  child: InkWell(
+                                    onTap: () {},
+                                    child: Center(
+                                      child: Text(
+                                        '${images.length - 4} +',
+                                        style: TextStyle(
+                                          color: Colors.white,
+                                          fontSize: 28,
+                                        ),
+                                      ),
+                                    ),
+                                  ),
+                                ),
+                              ),
+                          ],
+                        ),
+                      ),
+                  ],
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/src/message_widget.dart

@@ -8,6 +8,7 @@ import 'package:flutter_portal/flutter_portal.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import 'image_group.dart';
 import 'message_actions_bottom_sheet.dart';
 import 'message_text.dart';
 
@@ -272,6 +273,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                                       : Column(
                                           crossAxisAlignment:
                                               CrossAxisAlignment.start,
+                                          mainAxisSize: MainAxisSize.min,
                                           children: <Widget>[
                                             ..._parseAttachments(context),
                                             if (widget.message.text
@@ -523,6 +525,30 @@ class _MessageWidgetState extends State<MessageWidget> {
   }
 
   List<Widget> _parseAttachments(BuildContext context) {
+    final images = widget.message.attachments
+        .where((element) => element.type == 'image')
+        .toList();
+
+    if (images.length > 1) {
+      final imageBuilder = widget.attachmentBuilders['image'];
+      return [
+        wrapAttachmentWidget(
+          context,
+          Material(
+            color: widget.messageTheme.messageBackgroundColor,
+            child: ImageGroup(
+              size: Size.fromWidth(
+                MediaQuery.of(context).size.width * 0.8,
+              ),
+              imageBuilder: imageBuilder,
+              images: images,
+              message: widget.message,
+            ),
+          ),
+        ),
+      ];
+    }
+
     return widget.message.attachments?.map((attachment) {
           final attachmentBuilder = widget.attachmentBuilders[attachment.type];
 
@@ -530,61 +556,65 @@ class _MessageWidgetState extends State<MessageWidget> {
             return SizedBox();
           }
 
-          return Padding(
+          final attachmentWidget = attachmentBuilder(
-            padding: EdgeInsets.only(
+            context,
-              bottom: 4,
+            widget.message,
-            ),
+            attachment,
-            child: GestureDetector(
+          );
-              onTap: () => retryMessage(context),
+          return wrapAttachmentWidget(context, attachmentWidget);
-              onLongPress: () => onLongPress(context),
+        })?.toList() ??
-              child: Material(
+        [];
-                color: _getBackgroundColor(),
+  }
-                clipBehavior: Clip.hardEdge,
+
-                shape: widget.attachmentShape ??
+  Padding wrapAttachmentWidget(BuildContext context, Widget attachmentWidget) {
-                    widget.shape ??
+    return Padding(
-                    ContinuousRectangleBorder(
+      padding: EdgeInsets.only(
-                      side: widget.attachmentBorderSide ??
+        bottom: 4,
-                          widget.borderSide ??
+      ),
-                          BorderSide(
+      child: GestureDetector(
-                            color:
+        onTap: () => retryMessage(context),
-                                Theme.of(context).brightness == Brightness.dark
+        onLongPress: () => onLongPress(context),
-                                    ? Colors.white.withAlpha(24)
+        child: Material(
-                                    : Colors.black.withAlpha(24),
+          color: _getBackgroundColor(),
-                          ),
+          clipBehavior: Clip.hardEdge,
-                      borderRadius: widget.attachmentBorderRadiusGeometry ??
+          shape: widget.attachmentShape ??
-                          widget.borderRadiusGeometry ??
+              widget.shape ??
-                          BorderRadius.zero,
+              ContinuousRectangleBorder(
+                side: widget.attachmentBorderSide ??
+                    widget.borderSide ??
+                    BorderSide(
+                      color: Theme.of(context).brightness == Brightness.dark
+                          ? Colors.white.withAlpha(24)
+                          : Colors.black.withAlpha(24),
                     ),
-                child: Padding(
+                borderRadius: widget.attachmentBorderRadiusGeometry ??
-                  padding: widget.attachmentPadding,
+                    widget.borderRadiusGeometry ??
-                  child: ClipRRect(
+                    BorderRadius.zero,
-                    borderRadius: BorderRadius.circular(6),
+              ),
-                    child: Transform(
+          child: Padding(
-                      transform: Matrix4.rotationY(widget.reverse ? pi : 0),
+            padding: widget.attachmentPadding,
-                      alignment: Alignment.center,
+            child: ClipRRect(
-                      child: Column(
+              borderRadius: BorderRadius.circular(6),
-                        mainAxisSize: MainAxisSize.min,
+              child: Transform(
-                        crossAxisAlignment: CrossAxisAlignment.end,
+                transform: Matrix4.rotationY(widget.reverse ? pi : 0),
-                        children: <Widget>[
+                alignment: Alignment.center,
-                          getFailedMessageWidget(
+                child: Column(
-                            context,
+                  mainAxisSize: MainAxisSize.min,
-                            padding: const EdgeInsets.all(8.0),
+                  crossAxisAlignment: CrossAxisAlignment.end,
-                          ),
+                  children: <Widget>[
-                          attachmentBuilder(
+                    getFailedMessageWidget(
-                            context,
+                      context,
-                            widget.message,
+                      padding: const EdgeInsets.all(8.0),
-                            attachment,
-                          ),
-                        ],
-                      ),
                     ),
-                  ),
+                    attachmentWidget,
+                  ],
                 ),
               ),
             ),
-          );
+          ),
-        })?.toList() ??
+        ),
-        [];
+      ),
+    );
   }
 
   void onLongPress(BuildContext context) {