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,6 +556,17 @@ class _MessageWidgetState extends State<MessageWidget> {
             return SizedBox();
           }
 
+          final attachmentWidget = attachmentBuilder(
+            context,
+            widget.message,
+            attachment,
+          );
+          return wrapAttachmentWidget(context, attachmentWidget);
+        })?.toList() ??
+        [];
+  }
+
+  Padding wrapAttachmentWidget(BuildContext context, Widget attachmentWidget) {
     return Padding(
       padding: EdgeInsets.only(
         bottom: 4,
@@ -546,8 +583,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                 side: widget.attachmentBorderSide ??
                     widget.borderSide ??
                     BorderSide(
-                            color:
+                      color: Theme.of(context).brightness == Brightness.dark
-                                Theme.of(context).brightness == Brightness.dark
                           ? Colors.white.withAlpha(24)
                           : Colors.black.withAlpha(24),
                     ),
@@ -570,11 +606,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                       context,
                       padding: const EdgeInsets.all(8.0),
                     ),
-                          attachmentBuilder(
+                    attachmentWidget,
-                            context,
-                            widget.message,
-                            attachment,
-                          ),
                   ],
                 ),
               ),
@@ -583,8 +615,6 @@ class _MessageWidgetState extends State<MessageWidget> {
         ),
       ),
     );
-        })?.toList() ??
-        [];
   }
 
   void onLongPress(BuildContext context) {