add group image

lib/src/channel_image.dart

@@ -1,6 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/group_image.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_image.png)
@@ -96,6 +97,23 @@ class ChannelImage extends StatelessWidget {
                         : null,
                   );
                 });
+          } else {
+            final images = channel.state.members
+                .where((member) =>
+                    member.user.id != streamChat.user.id &&
+                    member.user.extraData['image'] != null)
+                .take(4)
+                .map((e) => e.user.extraData['image'] as String)
+                .toList();
+            return GroupImage(
+              images: images,
+              constraints: constraints ??
+                  StreamChatTheme.of(context)
+                      .channelPreviewTheme
+                      .avatarTheme
+                      .constraints,
+              onTap: onTap,
+            );
           }
 
           return ClipRRect(

lib/src/group_image.dart

@@ -0,0 +1,85 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:flutter/material.dart';
+
+import '../stream_chat_flutter.dart';
+
+class GroupImage extends StatelessWidget {
+  const GroupImage({
+    Key key,
+    @required this.images,
+    this.constraints,
+    this.onTap,
+  }) : super(key: key);
+
+  final List<String> images;
+  final BoxConstraints constraints;
+  final VoidCallback onTap;
+
+  @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(
+        borderRadius: StreamChatTheme.of(context)
+            .ownMessageTheme
+            .avatarTheme
+            .borderRadius,
+        child: Container(
+          constraints: constraints ??
+              StreamChatTheme.of(context)
+                  .ownMessageTheme
+                  .avatarTheme
+                  .constraints,
+          decoration: BoxDecoration(
+            color: StreamChatTheme.of(context).accentColor,
+          ),
+          child: Flex(
+            direction: Axis.vertical,
+            children: [
+              Flexible(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  children: images
+                      .take(2)
+                      .map((url) => Flexible(
+                            fit: FlexFit.tight,
+                            child: CachedNetworkImage(
+                              imageUrl: url,
+                              fit: BoxFit.cover,
+                            ),
+                          ))
+                      .toList(),
+                ),
+              ),
+              Flexible(
+                child: Flex(
+                  direction: Axis.horizontal,
+                  children: images
+                      .skip(2)
+                      .map((url) => Flexible(
+                            fit: FlexFit.tight,
+                            child: CachedNetworkImage(
+                              imageUrl: url,
+                              fit: BoxFit.cover,
+                            ),
+                          ))
+                      .toList(),
+                ),
+              )
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}