add carousel on tap

lib/src/full_screen_image.dart

@@ -15,15 +15,13 @@ class FullScreenImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Container(
+    return PhotoView(
-      child: PhotoView(
       imageProvider: CachedNetworkImageProvider(url),
       maxScale: PhotoViewComputedScale.covered,
       minScale: PhotoViewComputedScale.contained,
       heroAttributes: PhotoViewHeroAttributes(
         tag: url,
       ),
-      ),
     );
   }
 }

lib/src/image_attachment.dart

@@ -39,13 +39,18 @@ class ImageAttachment extends StatelessWidget {
               Expanded(
                 child: GestureDetector(
                   onTap: () {
-                    Navigator.push(context, MaterialPageRoute(builder: (_) {
+                    Navigator.push(
+                      context,
+                      MaterialPageRoute(
+                        builder: (_) {
                           return FullScreenImage(
                             url: attachment.imageUrl ??
                                 attachment.assetUrl ??
                                 attachment.thumbUrl,
                           );
-                    }));
+                        },
+                      ),
+                    );
                   },
                   child: CachedNetworkImage(
                     height: size?.height,

lib/src/image_group.dart

@@ -1,17 +1,18 @@
+import 'package:cached_network_image/cached_network_image.dart';
+import 'package:carousel_slider/carousel_options.dart';
+import 'package:carousel_slider/carousel_slider.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
-import 'package:stream_chat_flutter/src/message_widget.dart';
+import 'package:stream_chat_flutter/src/full_screen_image.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;
@@ -20,59 +21,63 @@ class ImageGroup extends StatelessWidget {
   Widget build(BuildContext context) {
     return ConstrainedBox(
       constraints: BoxConstraints.loose(size),
-      child: Column(
+      child: Flex(
-        mainAxisSize: MainAxisSize.min,
+        direction: Axis.vertical,
         children: <Widget>[
-          FittedBox(
+          Flexible(
-            fit: BoxFit.cover,
+            flex: 1,
-            child: Row(
+            fit: FlexFit.tight,
-              mainAxisSize: MainAxisSize.min,
+            child: Flex(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              direction: Axis.horizontal,
               children: [
-                imageBuilder(
+                Flexible(
-                  context,
+                  flex: 1,
-                  message,
+                  fit: FlexFit.tight,
-                  images[0],
+                  child: _buildImage(context, 0),
                 ),
-                Padding(
+                Flexible(
-                  padding: const EdgeInsets.only(left: 4.0),
+                  flex: 1,
-                  child: imageBuilder(
+                  fit: FlexFit.tight,
-                    context,
+                  child: Padding(
-                    message,
+                    padding: const EdgeInsets.only(left: 2.0),
-                    images[1],
+                    child: _buildImage(context, 1),
                   ),
                 ),
               ],
             ),
           ),
           if (images.length >= 3)
-            Padding(
+            Flexible(
+              fit: FlexFit.tight,
+              flex: 1,
+              child: Padding(
                 padding: const EdgeInsets.only(top: 2.0),
-              child: FittedBox(
+                child: Flex(
-                fit: BoxFit.cover,
+                  direction: Axis.horizontal,
-                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  mainAxisSize: MainAxisSize.min,
                   children: <Widget>[
-                    imageBuilder(
+                    Flexible(
-                      context,
+                      fit: FlexFit.tight,
-                      message,
+                      flex: 1,
-                      images[2],
+                      child: _buildImage(context, 2),
                     ),
                     if (images.length >= 4)
-                      Padding(
+                      Flexible(
-                        padding: const EdgeInsets.only(left: 4.0),
+                        fit: FlexFit.tight,
+                        flex: 1,
+                        child: Padding(
+                          padding: const EdgeInsets.only(left: 2.0),
                           child: Stack(
+                            fit: StackFit.expand,
                             children: <Widget>[
-                            imageBuilder(
+                              _buildImage(context, 3),
-                              context,
-                              message,
-                              images[3],
-                            ),
                               if (images.length > 4)
                                 Positioned.fill(
+                                  child: GestureDetector(
+                                    onTap: () => _onTap(context, 3),
                                     child: Material(
                                       color: Colors.black38,
-                                  child: InkWell(
-                                    onTap: () {},
                                       child: Center(
                                         child: Text(
                                           '${images.length - 4} +',
@@ -88,6 +93,7 @@ class ImageGroup extends StatelessWidget {
                             ],
                           ),
                         ),
+                      ),
                   ],
                 ),
               ),
@@ -96,4 +102,55 @@ class ImageGroup extends StatelessWidget {
       ),
     );
   }
+
+  void _onTap(
+    BuildContext context, [
+    int index,
+  ]) {
+    Navigator.push(
+      context,
+      MaterialPageRoute(
+        builder: (context) {
+          return Scaffold(
+            appBar: AppBar(
+              backgroundColor: Colors.transparent,
+              iconTheme: IconThemeData(
+                color: Colors.white,
+              ),
+            ),
+            backgroundColor: Colors.black,
+            body: SizedBox.expand(
+              child: CarouselSlider(
+                items: images
+                    .map((image) => FullScreenImage(
+                          url: image.imageUrl ??
+                              image.thumbUrl ??
+                              image.assetUrl,
+                        ))
+                    .toList(),
+                options: CarouselOptions(
+                  initialPage: index ?? 0,
+                  enableInfiniteScroll: false,
+                  viewportFraction: 0.95,
+                  height: MediaQuery.of(context).size.height,
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  Widget _buildImage(BuildContext context, int index) {
+    return GestureDetector(
+      onTap: () => _onTap(context, index),
+      child: CachedNetworkImage(
+        imageUrl: images[index].imageUrl ??
+            images[index].thumbUrl ??
+            images[index].assetUrl,
+        fit: BoxFit.cover,
+      ),
+    );
+  }
 }

lib/src/message_widget.dart

@@ -530,17 +530,16 @@ class _MessageWidgetState extends State<MessageWidget> {
         .toList();
 
     if (images.length > 1) {
-      final imageBuilder = widget.attachmentBuilders['image'];
       return [
         wrapAttachmentWidget(
           context,
           Material(
             color: widget.messageTheme.messageBackgroundColor,
             child: ImageGroup(
-              size: Size.fromWidth(
+              size: Size(
                 MediaQuery.of(context).size.width * 0.8,
+                MediaQuery.of(context).size.height * 0.3,
               ),
-              imageBuilder: imageBuilder,
               images: images,
               message: widget.message,
             ),

pubspec.yaml

@@ -30,6 +30,7 @@ dependencies:
   line_awesome_icons: ^1.0.4+2
   http_parser: ^3.1.4
   flutter_slidable: ^0.5.4
+  carousel_slider: ^2.2.1
 
 flutter:
   assets: