fix attachment size

example/lib/main.dart

@@ -111,11 +111,11 @@ class ChannelListPage extends StatelessWidget {
     return Scaffold(
       body: ChannelsBloc(
         child: ChannelListView(
-//          filter: {
+          filter: {
-//            'members': {
+            'members': {
-//              '\$in': [StreamChat.of(context).user.id],
+              '\$in': [StreamChat.of(context).user.id],
-//            }
+            }
-//          },
+          },
           sort: [SortOption('last_message_at')],
           pagination: PaginationParams(
             limit: 20,

lib/src/attachment_actions.dart

@@ -15,42 +15,37 @@ class AttachmentActions extends StatelessWidget {
   Widget build(BuildContext context) {
     final streamChannel = StreamChannel.of(context);
     return Row(
-      mainAxisAlignment: MainAxisAlignment.end,
+      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+      mainAxisSize: MainAxisSize.min,
       children: attachment.actions?.map((action) {
         if (action.style == 'primary') {
-          return Padding(
+          return FlatButton(
-            padding: const EdgeInsets.symmetric(horizontal: 4.0),
-            child: FlatButton(
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(16),
-              ),
-              child: Text('${action.text}'),
-              color: action.style == 'primary'
-                  ? StreamChatTheme.of(context).accentColor
-                  : null,
-              textColor: Colors.white,
-              onPressed: () {
-                streamChannel.channel.sendAction(message, {
-                  action.name: action.value,
-                });
-              },
-            ),
-          );
-        }
-        return Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 4.0),
-          child: OutlineButton(
             shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(16),
             ),
             child: Text('${action.text}'),
-            color: StreamChatTheme.of(context).accentColor,
+            color: action.style == 'primary'
+                ? StreamChatTheme.of(context).accentColor
+                : null,
+            textColor: Colors.white,
             onPressed: () {
               streamChannel.channel.sendAction(message, {
                 action.name: action.value,
               });
             },
+          );
+        }
+        return OutlineButton(
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(16),
           ),
+          child: Text('${action.text}'),
+          color: StreamChatTheme.of(context).accentColor,
+          onPressed: () {
+            streamChannel.channel.sendAction(message, {
+              action.name: action.value,
+            });
+          },
         );
       })?.toList(),
     );

lib/src/attachment_error.dart

@@ -5,10 +5,12 @@ import 'package:stream_chat/stream_chat.dart';
 
 class AttachmentError extends StatelessWidget {
   final Attachment attachment;
+  final Size size;
 
   const AttachmentError({
     Key key,
     @required this.attachment,
+    this.size,
   }) : super(key: key);
 
   @override
@@ -20,8 +22,8 @@ class AttachmentError extends StatelessWidget {
     }
     return Center(
       child: Container(
-        width: 200,
+        width: size?.width,
-        height: 140,
+        height: size?.height,
         color: Color(0xffd0021B).withOpacity(.1),
         child: Center(
           child: Icon(

lib/src/attachment_title.dart

@@ -26,7 +26,7 @@ class AttachmentTitle extends StatelessWidget {
         padding: const EdgeInsets.all(8.0),
         child: Column(
           mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.start,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
           children: <Widget>[
             Text(
               attachment.title,

lib/src/file_attachment.dart

@@ -4,10 +4,12 @@ import 'package:stream_chat_flutter/src/utils.dart';
 
 class FileAttachment extends StatelessWidget {
   final Attachment attachment;
+  final Size size;
 
   const FileAttachment({
     Key key,
     @required this.attachment,
+    this.size,
   }) : super(key: key);
 
   @override
@@ -18,8 +20,8 @@ class FileAttachment extends StatelessWidget {
           launchURL(context, attachment.assetUrl);
         },
         child: Container(
-          width: 100,
+          width: size?.width ?? 100,
-          height: 100,
+          height: size?.height ?? 100,
           child: Center(
             child: Icon(Icons.attach_file),
           ),

lib/src/full_screen_video.dart

@@ -0,0 +1,76 @@
+import 'package:chewie/chewie.dart';
+import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+import 'package:video_player/video_player.dart';
+
+import 'utils.dart';
+
+class FullScreenVideo extends StatefulWidget {
+  final Attachment attachment;
+
+  FullScreenVideo({
+    Key key,
+    @required this.attachment,
+  }) : super(key: key);
+
+  @override
+  _FullScreenVideoState createState() => _FullScreenVideoState();
+}
+
+class _FullScreenVideoState extends State<FullScreenVideo> {
+  ChewieController _chewieController;
+  VideoPlayerController _videoPlayerController;
+  bool initialized = false;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: Builder(
+        builder: (context) {
+          if (!initialized) {
+            return Center(
+              child: CircularProgressIndicator(),
+            );
+          }
+
+          return Chewie(
+            controller: _chewieController,
+          );
+        },
+      ),
+    );
+  }
+
+  @override
+  void initState() {
+    super.initState();
+    _videoPlayerController =
+        VideoPlayerController.network(widget.attachment.assetUrl);
+    _videoPlayerController.initialize().whenComplete(() {
+      setState(() {
+        initialized = true;
+      });
+    });
+
+    _chewieController = ChewieController(
+      videoPlayerController: _videoPlayerController,
+      autoInitialize: false,
+      aspectRatio: _videoPlayerController.value.aspectRatio,
+    );
+    _videoPlayerController.addListener(() {
+      if (_videoPlayerController.value.hasError) {
+        WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+          Navigator.pop(context);
+          launchURL(context, widget.attachment.titleLink);
+        });
+      }
+    });
+  }
+
+  @override
+  void dispose() {
+    _videoPlayerController.dispose();
+    _chewieController.dispose();
+    super.dispose();
+  }
+}

lib/src/giphy_attachment.dart

@@ -5,19 +5,20 @@ import 'package:stream_chat_flutter/src/attachment_actions.dart';
 import '../stream_chat_flutter.dart';
 import 'attachment_error.dart';
 import 'attachment_title.dart';
-import 'full_screen_image.dart';
 import 'utils.dart';
 
 class GiphyAttachment extends StatelessWidget {
   final Attachment attachment;
   final MessageTheme messageTheme;
   final Message message;
+  final Size size;
 
   const GiphyAttachment({
     Key key,
     this.attachment,
     this.messageTheme,
     this.message,
+    this.size,
   }) : super(key: key);
 
   @override
@@ -36,39 +37,26 @@ class GiphyAttachment extends StatelessWidget {
       children: <Widget>[
         Stack(
           children: <Widget>[
-            Hero(
+            CachedNetworkImage(
-              tag: attachment.imageUrl ??
+              height: size?.height,
-                  attachment.assetUrl ??
+              width: size?.width,
-                  attachment.thumbUrl,
+              placeholder: (_, __) {
-              child: CachedNetworkImage(
+                return Container(
-                imageBuilder: (context, provider) {
+                  width: size?.width,
-                  return GestureDetector(
+                  height: size?.height,
-                    child: Image(image: provider),
+                  child: Center(
-                    onTap: () {
+                    child: CircularProgressIndicator(),
-                      Navigator.push(context, MaterialPageRoute(builder: (_) {
+                  ),
-                        return FullScreenImage(
+                );
-                          url: attachment.imageUrl ??
+              },
-                              attachment.assetUrl ??
+              imageUrl: attachment.thumbUrl ??
-                              attachment.thumbUrl,
+                  attachment.imageUrl ??
-                        );
+                  attachment.assetUrl,
-                      }));
+              errorWidget: (context, url, error) => AttachmentError(
-                    },
+                attachment: attachment,
-                  );
+                size: size,
-                },
-                placeholder: (_, __) {
-                  return Container(
-                    width: 200,
-                    height: 140,
-                  );
-                },
-                imageUrl: attachment.thumbUrl ??
-                    attachment.imageUrl ??
-                    attachment.assetUrl,
-                errorWidget: (context, url, error) => AttachmentError(
-                  attachment: attachment,
-                ),
-                fit: BoxFit.cover,
               ),
+              fit: BoxFit.cover,
             ),
             if (attachment.titleLink != null || attachment.ogScrapeUrl != null)
               Positioned.fill(
@@ -85,9 +73,14 @@ class GiphyAttachment extends StatelessWidget {
           ],
         ),
         if (attachment.title != null)
-          AttachmentTitle(
+          Container(
-            messageTheme: messageTheme,
+            alignment: Alignment.bottomCenter,
-            attachment: attachment,
+            child: Material(
+              child: AttachmentTitle(
+                messageTheme: messageTheme,
+                attachment: attachment,
+              ),
+            ),
           ),
         if (attachment.actions != null)
           AttachmentActions(

lib/src/image_attachment.dart

@@ -10,11 +10,13 @@ import 'utils.dart';
 class ImageAttachment extends StatelessWidget {
   final Attachment attachment;
   final MessageTheme messageTheme;
+  final Size size;
 
   const ImageAttachment({
     Key key,
     this.attachment,
     this.messageTheme,
+    this.size,
   }) : super(key: key);
 
   @override
@@ -26,38 +28,34 @@ class ImageAttachment extends StatelessWidget {
         attachment: attachment,
       );
     }
-    return Column(
+    return SizedBox.fromSize(
-      mainAxisSize: MainAxisSize.min,
+      size: size,
-      crossAxisAlignment: CrossAxisAlignment.start,
+      child: Stack(
-      children: <Widget>[
+        children: <Widget>[
-        Stack(
+          Hero(
-          children: <Widget>[
+            tag: attachment.imageUrl ??
-            Hero(
+                attachment.assetUrl ??
-              tag: attachment.imageUrl ??
+                attachment.thumbUrl,
-                  attachment.assetUrl ??
+            child: GestureDetector(
-                  attachment.thumbUrl,
+              onTap: () {
-              child: CachedNetworkImage(
+                Navigator.push(context, MaterialPageRoute(builder: (_) {
-                imageBuilder: (context, provider) {
+                  return FullScreenImage(
-                  return GestureDetector(
+                    url: attachment.imageUrl ??
-                    child: Image(
+                        attachment.assetUrl ??
-                      image: provider,
+                        attachment.thumbUrl,
-                      fit: BoxFit.cover,
-                    ),
-                    onTap: () {
-                      Navigator.push(context, MaterialPageRoute(builder: (_) {
-                        return FullScreenImage(
-                          url: attachment.imageUrl ??
-                              attachment.assetUrl ??
-                              attachment.thumbUrl,
-                        );
-                      }));
-                    },
                   );
-                },
+                }));
+              },
+              child: CachedNetworkImage(
+                height: size?.height,
+                width: size?.width,
                 placeholder: (_, __) {
                   return Container(
-                    width: 200,
+                    width: size?.width,
-                    height: 140,
+                    height: size?.height,
+                    child: Center(
+                      child: CircularProgressIndicator(),
+                    ),
                   );
                 },
                 imageUrl: attachment.thumbUrl ??
@@ -65,30 +63,38 @@ class ImageAttachment extends StatelessWidget {
                     attachment.assetUrl,
                 errorWidget: (context, url, error) => AttachmentError(
                   attachment: attachment,
+                  size: size,
                 ),
                 fit: BoxFit.cover,
               ),
             ),
-            if (attachment.titleLink != null || attachment.ogScrapeUrl != null)
+          ),
-              Positioned.fill(
+          if (attachment.title != null)
+            Positioned.fill(
+              child: Align(
+                alignment: Alignment.bottomCenter,
                 child: Material(
-                  color: Colors.transparent,
+                  child: AttachmentTitle(
-                  child: InkWell(
+                    messageTheme: messageTheme,
-                    onTap: () => launchURL(
+                    attachment: attachment,
-                      context,
-                      attachment.titleLink ?? attachment.ogScrapeUrl,
-                    ),
                   ),
                 ),
               ),
-          ],
+            ),
-        ),
+          if (attachment.titleLink != null || attachment.ogScrapeUrl != null)
-        if (attachment.title != null)
+            Positioned.fill(
-          AttachmentTitle(
+              child: Material(
-            messageTheme: messageTheme,
+                color: Colors.transparent,
-            attachment: attachment,
+                child: InkWell(
-          ),
+                  onTap: () => launchURL(
-      ],
+                    context,
+                    attachment.titleLink ?? attachment.ogScrapeUrl,
+                  ),
+                ),
+              ),
+            ),
+        ],
+      ),
     );
   }
 }

lib/src/message_widget.dart

@@ -43,7 +43,6 @@ class MessageWidget extends StatelessWidget {
   final bool showReplyIndicator;
   final bool isParent;
   final bool showUsername;
-  final bool showVideoFullScreen;
   final bool showTimestamp;
   final bool showDeleteMessage;
   final bool showEditMessage;
@@ -83,7 +82,6 @@ class MessageWidget extends StatelessWidget {
     this.editMessageInputBuilder,
     this.textBuilder,
     Map<String, AttachmentBuilder> customAttachmentBuilders,
-    this.showVideoFullScreen = true,
     this.padding,
     this.textPadding = const EdgeInsets.all(8.0),
     this.attachmentPadding = EdgeInsets.zero,
@@ -92,13 +90,20 @@ class MessageWidget extends StatelessWidget {
             return ImageAttachment(
               attachment: attachment,
               messageTheme: messageTheme,
+              size: Size(
+                MediaQuery.of(context).size.width * 0.8,
+                MediaQuery.of(context).size.height * 0.3,
+              ),
             );
           },
           'video': (context, message, attachment) {
             return VideoAttachment(
-              enableFullScreen: showVideoFullScreen,
               attachment: attachment,
               messageTheme: messageTheme,
+              size: Size(
+                MediaQuery.of(context).size.width * 0.8,
+                MediaQuery.of(context).size.height * 0.3,
+              ),
             );
           },
           'giphy': (context, message, attachment) {
@@ -106,11 +111,19 @@ class MessageWidget extends StatelessWidget {
               attachment: attachment,
               messageTheme: messageTheme,
               message: message,
+              size: Size(
+                MediaQuery.of(context).size.width * 0.8,
+                MediaQuery.of(context).size.height * 0.3,
+              ),
             );
           },
           'file': (context, message, attachment) {
             return FileAttachment(
               attachment: attachment,
+              size: Size(
+                MediaQuery.of(context).size.width * 0.8,
+                MediaQuery.of(context).size.height * 0.3,
+              ),
             );
           },
         }..addAll(customAttachmentBuilders ?? {}),
@@ -165,7 +178,7 @@ class MessageWidget extends StatelessWidget {
                               SizedBox(
                                 width: messageTheme
                                         .avatarTheme.constraints.maxWidth +
-                                    10,
+                                    8,
                               ),
                             Flexible(
                               child: Padding(
@@ -228,7 +241,7 @@ class MessageWidget extends StatelessWidget {
         ((message.reactionCounts.values
                     .where((element) => element > 0)
                     .length ~/
-                4) +
+                5) +
             1);
   }
 

lib/src/video_attachment.dart

@@ -1,6 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:chewie/chewie.dart';
 import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter/src/full_screen_video.dart';
 import 'package:stream_chat_flutter/src/utils.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:video_player/video_player.dart';
@@ -10,14 +11,14 @@ import 'attachment_title.dart';
 
 class VideoAttachment extends StatefulWidget {
   final Attachment attachment;
-  final bool enableFullScreen;
   final MessageTheme messageTheme;
+  final Size size;
 
   VideoAttachment({
     Key key,
     @required this.attachment,
     @required this.messageTheme,
-    this.enableFullScreen = true,
+    this.size,
   }) : super(key: key);
 
   @override
@@ -33,23 +34,25 @@ class _VideoAttachmentState extends State<VideoAttachment> {
   Widget build(BuildContext context) {
     if (!initialized) {
       return Container(
-        height: 100,
+        height: widget.size?.height ?? 100,
-        width: 100,
+        width: widget.size?.width ?? 100,
         child: Center(
           child: CircularProgressIndicator(),
         ),
       );
     }
     _chewieController = ChewieController(
-        allowFullScreen: widget.enableFullScreen,
         videoPlayerController: _videoPlayerController,
         autoInitialize: false,
+        showControls: false,
         aspectRatio: _videoPlayerController.value.aspectRatio,
         errorBuilder: (_, e) {
           if (widget.attachment.thumbUrl != null) {
             return Stack(
               children: <Widget>[
                 Container(
+                  height: widget.size?.height,
+                  width: widget.size?.width,
                   decoration: BoxDecoration(
                     image: DecorationImage(
                       fit: BoxFit.cover,
@@ -72,22 +75,62 @@ class _VideoAttachmentState extends State<VideoAttachment> {
           }
           return AttachmentError(
             attachment: widget.attachment,
+            size: widget.size,
           );
         });
 
-    return Column(
+    return GestureDetector(
-      mainAxisSize: MainAxisSize.min,
+      onTap: () {
-      crossAxisAlignment: CrossAxisAlignment.stretch,
+        Navigator.push(
-      children: <Widget>[
+          context,
-        Chewie(
+          MaterialPageRoute(
-          controller: _chewieController,
+            builder: (_) => FullScreenVideo(
-        ),
+              attachment: widget.attachment,
-        if (widget.attachment.title != null)
+            ),
-          AttachmentTitle(
-            messageTheme: widget.messageTheme,
-            attachment: widget.attachment,
           ),
-      ],
+        );
+      },
+      child: Container(
+        height: widget.size?.height,
+        width: widget.size?.width,
+        child: Flex(
+          direction: Axis.vertical,
+          mainAxisSize: MainAxisSize.min,
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: <Widget>[
+            Expanded(
+              child: FittedBox(
+                fit: BoxFit.cover,
+                child: Stack(
+                  children: <Widget>[
+                    Chewie(
+                      controller: _chewieController,
+                    ),
+                    Positioned.fill(
+                      child: Center(
+                        child: Material(
+                          shape: CircleBorder(),
+                          child: Padding(
+                            padding: const EdgeInsets.all(16.0),
+                            child: Icon(Icons.play_arrow),
+                          ),
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+            if (widget.attachment.title != null)
+              Material(
+                child: AttachmentTitle(
+                  messageTheme: widget.messageTheme,
+                  attachment: widget.attachment,
+                ),
+              ),
+          ],
+        ),
+      ),
     );
   }