[ImageFooter] Fix photosModalBottomSheet

Signed-off-by: Sahil Kumar <[email protected]>

lib/src/image_footer.dart

@@ -174,29 +174,40 @@ class _ImageFooterState extends State<ImageFooter> {
     showModalBottomSheet(
       context: context,
       barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
-      shape: RoundedRectangleBorder(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.white,
-        borderRadius: BorderRadius.circular(16.0),
+      isScrollControlled: true,
+      shape: const RoundedRectangleBorder(
+        borderRadius: const BorderRadius.only(
+          topLeft: const Radius.circular(16.0),
+          topRight: const Radius.circular(16.0),
+        ),
       ),
       builder: (context) {
-        return Column(
+        final crossAxisCount = 3;
+        final noOfRowToShowInitially =
+            widget.mediaAttachments.length > 3 ? 2 : 1;
+        final size = MediaQuery.of(context).size;
+        final initialChildSize =
+            48 + (size.width * noOfRowToShowInitially) / crossAxisCount;
+        return DraggableScrollableSheet(
+          expand: false,
+          initialChildSize: initialChildSize / size.height,
+          builder: (context, scrollController) {
+            return SingleChildScrollView(
+              controller: scrollController,
+              child: Column(
                 mainAxisSize: MainAxisSize.min,
                 children: [
-            Container(
+                  Stack(
-              decoration: BoxDecoration(
-                  color: StreamChatTheme.of(context).colorTheme.white,
-                  borderRadius: BorderRadius.only(
-                    topRight: Radius.circular(16.0),
-                    topLeft: Radius.circular(16.0),
-                  )),
-              child: Stack(
                     children: [
                       Center(
                         child: Padding(
                           padding: const EdgeInsets.all(16.0),
                           child: Text(
                             'Photos',
-                        style:
+                            style: StreamChatTheme.of(context)
-                            StreamChatTheme.of(context).textTheme.headlineBold,
+                                .textTheme
+                                .headlineBold,
                           ),
                         ),
                       ),
@@ -211,24 +222,27 @@ class _ImageFooterState extends State<ImageFooter> {
                       ),
                     ],
                   ),
-            ),
+                  Flexible(
-            Container(
-              color: StreamChatTheme.of(context).colorTheme.white,
                     child: GridView.builder(
                       shrinkWrap: true,
-                physics: NeverScrollableScrollPhysics(),
+                      physics: const NeverScrollableScrollPhysics(),
-                itemBuilder: (context, position) {
+                      itemCount: widget.mediaAttachments.length,
+                      padding: const EdgeInsets.all(1),
+                      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
+                        crossAxisCount: crossAxisCount,
+                        mainAxisSpacing: 2.0,
+                        crossAxisSpacing: 2.0,
+                      ),
+                      itemBuilder: (context, index) {
                         Widget media;
+                        final attachment = widget.mediaAttachments[index];
 
-                  if (widget.mediaAttachments[position].type == 'video') {
+                        if (attachment.type == 'video') {
                           var controllerPackage = widget.videoPackages[
-                        videoAttachments
+                              videoAttachments.indexOf(attachment)];
-                            .indexOf(widget.mediaAttachments[position])];
 
                           media = InkWell(
-                      onTap: () {
+                            onTap: () => widget.mediaSelectedCallBack(index),
-                        widget.mediaSelectedCallBack(position);
-                      },
                             child: FittedBox(
                               fit: BoxFit.cover,
                               child: Chewie(
@@ -238,22 +252,16 @@ class _ImageFooterState extends State<ImageFooter> {
                           );
                         } else {
                           media = InkWell(
-                      onTap: () {
+                            onTap: () => widget.mediaSelectedCallBack(index),
-                        widget.mediaSelectedCallBack(position);
-                      },
-                      child: Padding(
-                        padding: const EdgeInsets.all(1.0),
                             child: AspectRatio(
                               child: CachedNetworkImage(
-                            imageUrl: widget
+                                imageUrl: attachment.imageUrl ??
-                                    .mediaAttachments[position].imageUrl ??
+                                    attachment.assetUrl ??
-                                widget.mediaAttachments[position].assetUrl ??
+                                    attachment.thumbUrl,
-                                widget.mediaAttachments[position].thumbUrl,
                                 fit: BoxFit.cover,
                               ),
                               aspectRatio: 1.0,
                             ),
-                      ),
                           );
                         }
 
@@ -283,7 +291,8 @@ class _ImageFooterState extends State<ImageFooter> {
                                 padding: const EdgeInsets.all(1),
                                 child: UserAvatar(
                                   user: widget.message.user,
-                            constraints: BoxConstraints.tight(Size(24, 24)),
+                                  constraints:
+                                      BoxConstraints.tight(Size(24, 24)),
                                   showOnlineStatus: false,
                                 ),
                               ),
@@ -291,12 +300,12 @@ class _ImageFooterState extends State<ImageFooter> {
                           ],
                         );
                       },
-                itemCount: widget.mediaAttachments.length,
-                gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
-                    crossAxisCount: 3),
                     ),
                   ),
                 ],
+              ),
+            );
+          },
         );
       },
     );