Merge branch 'feature/new-ui' of https://github.com/GetStream/stream-chat-flutter into feature/error-tile

 Conflicts:

	lib/src/message_list_view.dart

example/lib/group_info_screen.dart

@@ -137,20 +137,21 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
               ),
               centerTitle: true,
               actions: [
-                StreamNeumorphicButton(
+                if (!channel.channel.isDistinct)
-                  child: InkWell(
+                  StreamNeumorphicButton(
-                    onTap: () {
+                    child: InkWell(
-                      _buildAddUserModal(context);
+                      onTap: () {
-                    },
+                        _buildAddUserModal(context);
-                    child: Padding(
+                      },
-                      padding: const EdgeInsets.all(8.0),
+                      child: Padding(
-                      child: StreamSvgIcon.userAdd(
+                        padding: const EdgeInsets.all(8.0),
-                          color: StreamChatTheme.of(context)
+                        child: StreamSvgIcon.userAdd(
-                              .colorTheme
+                            color: StreamChatTheme.of(context)
-                              .accentBlue),
+                                .colorTheme
+                                .accentBlue),
+                      ),
                     ),
                   ),
-                ),
               ],
             ),
             body: ListView(

example/lib/main.dart

@@ -623,8 +623,8 @@ class _ChannelPageState extends State<ChannelPage> {
 
   @override
   void initState() {
-    super.initState();
     _focusNode = FocusNode();
+    super.initState();
   }
 
   @override
@@ -635,7 +635,9 @@ class _ChannelPageState extends State<ChannelPage> {
 
   void _reply(Message message) {
     setState(() => _quotedMessage = message);
-    _focusNode.requestFocus();
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      _focusNode.requestFocus();
+    });
   }
 
   @override
@@ -752,6 +754,7 @@ class _ChannelPageState extends State<ChannelPage> {
             quotedMessage: _quotedMessage,
             onQuotedMessageCleared: () {
               setState(() => _quotedMessage = null);
+              _focusNode.unfocus();
             },
           ),
         ],

example/pubspec.yaml

@@ -1,6 +1,6 @@
 name: example
 description: A new Flutter project.
-version: 1.1.0+1
+version: 1.1.1+1
 
 environment:
   sdk: ">=2.2.2 <3.0.0"

lib/src/channel_preview.dart

@@ -96,12 +96,16 @@ class ChannelPreview extends StatelessWidget {
                   Flexible(child: _buildSubtitle(context)),
                   Builder(
                     builder: (context) {
-                      if (channel.state.lastMessage?.user?.id ==
+                      final lastMessage = channel.state.messages.lastWhere(
+                        (m) => !m.isDeleted && m.shadowed != true,
+                        orElse: () => null,
+                      );
+                      if (lastMessage?.user?.id ==
                           StreamChat.of(context).user.id) {
                         return Padding(
                           padding: const EdgeInsets.only(right: 4.0),
                           child: SendingIndicator(
-                            message: channel.state.lastMessage,
+                            message: lastMessage,
                             size: StreamChatTheme.of(context)
                                 .channelPreviewTheme
                                 .indicatorIconSize,
@@ -110,8 +114,7 @@ class ChannelPreview extends StatelessWidget {
                                         element.user.id !=
                                         channel.client.state.user.id)
                                     ?.where((element) => element.lastRead
-                                        .isAfter(channel
+                                        .isAfter(lastMessage.createdAt))
-                                            .state.lastMessage.createdAt))
                                     ?.isNotEmpty ==
                                 true,
                           ),
@@ -201,16 +204,15 @@ class ChannelPreview extends StatelessWidget {
       stream: channel.state.messagesStream,
       initialData: channel.state.messages,
       builder: (context, snapshot) {
-        final lastMessage = snapshot.data
+        final lastMessage = snapshot.data?.lastWhere(
-            ?.lastWhere((m) => m.shadowed != true, orElse: () => null);
+            (m) => m.shadowed != true && !m.isDeleted,
+            orElse: () => null);
         if (lastMessage == null) {
           return SizedBox();
         }
 
         var text = lastMessage.text;
-        if (lastMessage.isDeleted) {
+        if (lastMessage.attachments != null) {
-          text = 'This message was deleted.';
-        } else if (lastMessage.attachments != null) {
           final parts = <String>[
             ...lastMessage.attachments.map((e) {
               if (e.type == 'image') {

lib/src/extension.dart

@@ -1,7 +1,28 @@
+import 'package:emojis/emoji.dart';
+import 'package:characters/characters.dart';
+
+final _emojis = Emoji.all();
+
 extension StringExtension on String {
   String capitalize() {
     return "${this[0].toUpperCase()}${this.substring(1)}";
   }
+
+  //  Emojis guidelines
+  //  1 to 3 emojis: big size with no text bubble.
+  //  4+ emojis or emojis+text: standard size with text bubble.
+  bool get isOnlyEmoji {
+    final characters = this.trim().characters;
+    if (characters.isEmpty) return false;
+    if (characters.length > 3) return false;
+    return characters.every((c) {
+      return _emojis.firstWhere(
+            (Emoji emoji) => emoji.char.contains(c),
+            orElse: () => null,
+          ) !=
+          null;
+    });
+  }
 }
 
 /// List extension

lib/src/message_actions_modal.dart

@@ -1,3 +1,4 @@
+import 'dart:convert';
 import 'dart:ui';
 
 import 'package:flutter/foundation.dart';
@@ -7,13 +8,14 @@ import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
+import 'package:stream_chat_flutter/src/utils.dart';
 
 import 'message_input.dart';
 import 'message_widget.dart';
 import 'stream_chat.dart';
 import 'stream_chat_theme.dart';
 
-class MessageActionsModal extends StatelessWidget {
+class MessageActionsModal extends StatefulWidget {
   final Widget Function(BuildContext, Message) editMessageInputBuilder;
   final void Function(Message) onThreadReplyTap;
   final void Function(Message) onReplyTap;
@@ -26,6 +28,7 @@ class MessageActionsModal extends StatelessWidget {
   final bool showResendMessage;
   final bool showReplyMessage;
   final bool showThreadReplyMessage;
+  final bool showFlagButton;
   final bool reverse;
   final ShapeBorder messageShape;
   final DisplayWidget showUserAvatar;
@@ -43,22 +46,32 @@ class MessageActionsModal extends StatelessWidget {
     this.showReplyMessage = true,
     this.showResendMessage = true,
     this.showThreadReplyMessage = true,
+    this.showFlagButton = true,
     this.showUserAvatar = DisplayWidget.show,
     this.editMessageInputBuilder,
     this.messageShape,
     this.reverse = false,
   }) : super(key: key);
 
+  @override
+  _MessageActionsModalState createState() => _MessageActionsModalState();
+}
+
+class _MessageActionsModalState extends State<MessageActionsModal> {
   @override
   Widget build(BuildContext context) {
+    return _showMessageOptionsModal();
+  }
+
+  Widget _showMessageOptionsModal() {
     final size = MediaQuery.of(context).size;
     final user = StreamChat.of(context).user;
 
     final roughMaxSize = 2 * size.width / 3;
-    var messageTextLength = message.text.length;
+    var messageTextLength = widget.message.text.length;
-    if (message.quotedMessage != null) {
+    if (widget.message.quotedMessage != null) {
-      var quotedMessageLength = message.quotedMessage.text.length + 40;
+      var quotedMessageLength = widget.message.quotedMessage.text.length + 40;
-      if (message.quotedMessage.attachments?.isNotEmpty == true) {
+      if (widget.message.quotedMessage.attachments?.isNotEmpty == true) {
         quotedMessageLength += 40;
       }
       if (quotedMessageLength > messageTextLength) {
@@ -66,155 +79,333 @@ class MessageActionsModal extends StatelessWidget {
       }
     }
     final roughSentenceSize =
-        messageTextLength * messageTheme.messageText.fontSize * 1.2;
+        messageTextLength * widget.messageTheme.messageText.fontSize * 1.2;
-    final divFactor = message.attachments?.isNotEmpty == true
+    final divFactor = widget.message.attachments?.isNotEmpty == true
         ? 1
         : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
 
-    return GestureDetector(
+    return TweenAnimationBuilder<double>(
-      behavior: HitTestBehavior.translucent,
+      tween: Tween(begin: 0.0, end: 1.0),
-      onTap: () => Navigator.maybePop(context),
+      duration: Duration(milliseconds: 300),
-      child: Stack(
+      curve: Curves.easeInOutBack,
-        children: [
+      builder: (context, val, snapshot) {
-          Positioned.fill(
+        return GestureDetector(
-            child: BackdropFilter(
+          behavior: HitTestBehavior.translucent,
-              filter: ImageFilter.blur(
+          onTap: () => Navigator.maybePop(context),
-                sigmaX: 10,
+          child: Stack(
-                sigmaY: 10,
+            children: [
-              ),
+              Positioned.fill(
-              child: Container(
+                child: BackdropFilter(
-                color: StreamChatTheme.of(context).colorTheme.overlay,
+                  filter: ImageFilter.blur(
-              ),
+                    sigmaX: 10,
-            ),
+                    sigmaY: 10,
-          ),
+                  ),
-          Center(
+                  child: Container(
-            child: SingleChildScrollView(
+                    color: StreamChatTheme.of(context).colorTheme.overlay,
-              child: Padding(
+                  ),
-                padding: const EdgeInsets.symmetric(vertical: 8.0),
-                child: Column(
-                  crossAxisAlignment: reverse
-                      ? CrossAxisAlignment.end
-                      : CrossAxisAlignment.start,
-                  children: <Widget>[
-                    if (showReactions &&
-                        (message.status == MessageSendingStatus.SENT ||
-                            message.status == null))
-                      Align(
-                        alignment: Alignment(
-                            user.id == message.user.id
-                                ? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
-                                : (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
-                            0.0),
-                        child: ReactionPicker(
-                          message: message,
-                          messageTheme: messageTheme,
-                        ),
-                      ),
-                    TweenAnimationBuilder<double>(
-                        tween: Tween(begin: 0.0, end: 1.0),
-                        duration: Duration(milliseconds: 300),
-                        builder: (context, val, snapshot) {
-                          return Transform.scale(
-                            scale: val,
-                            child: IgnorePointer(
-                              child: MessageWidget(
-                                key: Key('MessageWidget'),
-                                reverse: reverse,
-                                message: message.copyWith(
-                                  text: message.text.length > 200
-                                      ? '${message.text.substring(0, 200)}...'
-                                      : message.text,
-                                ),
-                                messageTheme: messageTheme,
-                                showReactions: false,
-                                showUsername: false,
-                                showThreadReplyIndicator: false,
-                                showReplyMessage: false,
-                                showUserAvatar: showUserAvatar,
-                                showTimestamp: false,
-                                translateUserAvatar: false,
-                                showReactionPickerIndicator: showReactions &&
-                                    (message.status ==
-                                            MessageSendingStatus.SENT ||
-                                        message.status == null),
-                                showInChannelIndicator: false,
-                                showSendingIndicator: false,
-                                shape: messageShape,
-                              ),
-                            ),
-                          );
-                        }),
-                    TweenAnimationBuilder<double>(
-                        tween: Tween(begin: 0.0, end: 1.0),
-                        duration: Duration(milliseconds: 300),
-                        curve: Curves.easeInOut,
-                        builder: (context, val, wid) {
-                          return Transform(
-                            transform: Matrix4.identity()
-                              ..scale(val)
-                              ..rotateZ(-1.0 + val),
-                            alignment: reverse
-                                ? Alignment.topRight
-                                : Alignment.topLeft,
-                            child: Padding(
-                              padding: EdgeInsets.only(
-                                right: reverse ? 16 : 0,
-                                left: reverse ? 0 : 48,
-                              ),
-                              child: SizedBox(
-                                width: MediaQuery.of(context).size.width * 0.75,
-                                child: Material(
-                                  color: StreamChatTheme.of(context)
-                                      .colorTheme
-                                      .whiteSnow,
-                                  clipBehavior: Clip.hardEdge,
-                                  shape: RoundedRectangleBorder(
-                                    borderRadius: BorderRadius.circular(16),
-                                  ),
-                                  child: Column(
-                                    crossAxisAlignment:
-                                        CrossAxisAlignment.stretch,
-                                    children: ListTile.divideTiles(
-                                      color: StreamChatTheme.of(context)
-                                          .colorTheme
-                                          .greyWhisper,
-                                      context: context,
-                                      tiles: [
-                                        if (showReplyMessage &&
-                                            (message.status ==
-                                                    MessageSendingStatus.SENT ||
-                                                message.status == null) &&
-                                            message.parentId == null)
-                                          _buildReplyButton(context),
-                                        if (showThreadReplyMessage &&
-                                            (message.status ==
-                                                    MessageSendingStatus.SENT ||
-                                                message.status == null) &&
-                                            message.parentId == null)
-                                          _buildThreadReplyButton(context),
-                                        if (showResendMessage)
-                                          _buildResendMessage(context),
-                                        if (showEditMessage)
-                                          _buildEditMessage(context),
-                                        if (showCopyMessage)
-                                          _buildCopyButton(context),
-                                        if (showDeleteMessage)
-                                          _buildDeleteButton(context),
-                                      ],
-                                    ).toList(),
-                                  ),
-                                ),
-                              ),
-                            ),
-                          );
-                        })
-                  ],
                 ),
               ),
-            ),
+              Transform.scale(
+                scale: val,
+                child: Center(
+                  child: SingleChildScrollView(
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 8.0),
+                      child: Column(
+                        crossAxisAlignment: widget.reverse
+                            ? CrossAxisAlignment.end
+                            : CrossAxisAlignment.start,
+                        children: <Widget>[
+                          if (widget.showReactions &&
+                              (widget.message.status ==
+                                      MessageSendingStatus.SENT ||
+                                  widget.message.status == null))
+                            Align(
+                              alignment: Alignment(
+                                  user.id == widget.message.user.id
+                                      ? (divFactor > 1.0
+                                          ? 0.0
+                                          : (1.0 - divFactor))
+                                      : (divFactor > 1.0
+                                          ? 0.0
+                                          : -(1.0 - divFactor)),
+                                  0.0),
+                              child: ReactionPicker(
+                                message: widget.message,
+                                messageTheme: widget.messageTheme,
+                              ),
+                            ),
+                          IgnorePointer(
+                            child: MessageWidget(
+                              key: Key('MessageWidget'),
+                              reverse: widget.reverse,
+                              message: widget.message.copyWith(
+                                text: widget.message.text.length > 200
+                                    ? '${widget.message.text.substring(0, 200)}...'
+                                    : widget.message.text,
+                              ),
+                              messageTheme: widget.messageTheme,
+                              showReactions: false,
+                              showUsername: false,
+                              showThreadReplyIndicator: false,
+                              showReplyMessage: false,
+                              showUserAvatar: widget.showUserAvatar,
+                              showTimestamp: false,
+                              translateUserAvatar: false,
+                              showReactionPickerIndicator:
+                                  widget.showReactions &&
+                                      (widget.message.status ==
+                                              MessageSendingStatus.SENT ||
+                                          widget.message.status == null),
+                              showInChannelIndicator: false,
+                              showSendingIndicator: false,
+                              shape: widget.messageShape,
+                            ),
+                          ),
+                          Padding(
+                            padding: EdgeInsets.only(
+                              right: widget.reverse ? 8 : 0,
+                              left: widget.reverse ? 0 : 48,
+                            ),
+                            child: SizedBox(
+                              width: MediaQuery.of(context).size.width * 0.75,
+                              child: Material(
+                                color: StreamChatTheme.of(context)
+                                    .colorTheme
+                                    .whiteSnow,
+                                clipBehavior: Clip.hardEdge,
+                                shape: RoundedRectangleBorder(
+                                  borderRadius: BorderRadius.circular(16),
+                                ),
+                                child: Column(
+                                  crossAxisAlignment:
+                                      CrossAxisAlignment.stretch,
+                                  children: ListTile.divideTiles(
+                                    color: StreamChatTheme.of(context)
+                                        .colorTheme
+                                        .greyWhisper,
+                                    context: context,
+                                    tiles: [
+                                      if (widget.showReplyMessage &&
+                                          (widget.message.status ==
+                                                  MessageSendingStatus.SENT ||
+                                              widget.message.status == null) &&
+                                          widget.message.parentId == null)
+                                        _buildReplyButton(context),
+                                      if (widget.showThreadReplyMessage &&
+                                          (widget.message.status ==
+                                                  MessageSendingStatus.SENT ||
+                                              widget.message.status == null) &&
+                                          widget.message.parentId == null)
+                                        _buildThreadReplyButton(context),
+                                      if (widget.showResendMessage)
+                                        _buildResendMessage(context),
+                                      if (widget.showEditMessage)
+                                        _buildEditMessage(context),
+                                      if (widget.showCopyMessage)
+                                        _buildCopyButton(context),
+                                      if (widget.showFlagButton)
+                                        _buildFlagButton(context),
+                                      if (widget.showDeleteMessage)
+                                        _buildDeleteButton(context),
+                                    ],
+                                  ).toList(),
+                                ),
+                              ),
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
           ),
-        ],
+        );
-      ),
+      },
+    );
+  }
+
+  void _showFlagDialog() async {
+    final client = StreamChat.of(context).client;
+
+    var answer = await showConfirmationDialog(context,
+        title: 'Flag Message',
+        icon: StreamSvgIcon.flag(
+          color: StreamChatTheme.of(context).colorTheme.accentRed,
+          size: 24.0,
+        ),
+        question:
+            'Do you want to send a copy of this message to a\nmoderator for further investigation?',
+        okText: 'FLAG',
+        cancelText: 'CANCEL');
+
+    if (answer) {
+      try {
+        await client.flagMessage(widget.message.id);
+        _showDismissAlert();
+      } catch (err) {
+        if (json.decode(err?.body ?? {})['code'] == 4) {
+          _showDismissAlert();
+        } else {
+          _showErrorAlert();
+        }
+      }
+    }
+  }
+
+  void _showDeleteDialog() async {
+    var answer = await showConfirmationDialog(context,
+        title: 'Delete message',
+        icon: StreamSvgIcon.flag(
+          color: StreamChatTheme.of(context).colorTheme.accentRed,
+          size: 24.0,
+        ),
+        question: 'Are you sure you want to permanently delete this\nmessage?',
+        okText: 'DELETE',
+        cancelText: 'CANCEL');
+
+    if (answer) {
+      try {
+        Navigator.pop(context);
+        StreamChat.of(context).client.deleteMessage(
+              widget.message,
+              StreamChannel.of(context).channel.cid,
+            );
+      } catch (err) {
+        _showErrorAlert();
+      }
+    }
+  }
+
+  void _showDismissAlert() {
+    showModalBottomSheet(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.white,
+      context: context,
+      shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+        topLeft: Radius.circular(16.0),
+        topRight: Radius.circular(16.0),
+      )),
+      builder: (context) {
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            SizedBox(
+              height: 26.0,
+            ),
+            StreamSvgIcon.flag(
+              color: StreamChatTheme.of(context).colorTheme.accentRed,
+              size: 24.0,
+            ),
+            SizedBox(
+              height: 26.0,
+            ),
+            Text(
+              'Message flagged',
+              style: StreamChatTheme.of(context).textTheme.headlineBold,
+            ),
+            SizedBox(
+              height: 7.0,
+            ),
+            Text('The message has been reported to a moderator.'),
+            SizedBox(
+              height: 36.0,
+            ),
+            Container(
+              color:
+                  StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
+              height: 1.0,
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                FlatButton(
+                  child: Text(
+                    'OK',
+                    style: StreamChatTheme.of(context)
+                        .textTheme
+                        .bodyBold
+                        .copyWith(
+                            color: StreamChatTheme.of(context)
+                                .colorTheme
+                                .accentBlue),
+                  ),
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                  },
+                ),
+              ],
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  void _showErrorAlert() {
+    showModalBottomSheet(
+      backgroundColor: StreamChatTheme.of(context).colorTheme.white,
+      context: context,
+      shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.only(
+        topLeft: Radius.circular(16.0),
+        topRight: Radius.circular(16.0),
+      )),
+      builder: (context) {
+        return Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            SizedBox(
+              height: 26.0,
+            ),
+            StreamSvgIcon.error(
+              color: StreamChatTheme.of(context).colorTheme.accentRed,
+              size: 24.0,
+            ),
+            SizedBox(
+              height: 26.0,
+            ),
+            Text(
+              'Something went wrong',
+              style: StreamChatTheme.of(context).textTheme.headlineBold,
+            ),
+            SizedBox(
+              height: 7.0,
+            ),
+            Text('The operation couldn\'t be completed.'),
+            SizedBox(
+              height: 36.0,
+            ),
+            Container(
+              color:
+                  StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
+              height: 1.0,
+            ),
+            Row(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                FlatButton(
+                  child: Text(
+                    'OK',
+                    style: StreamChatTheme.of(context)
+                        .textTheme
+                        .bodyBold
+                        .copyWith(
+                            color: StreamChatTheme.of(context)
+                                .colorTheme
+                                .accentBlue),
+                  ),
+                  onPressed: () {
+                    Navigator.of(context).pop();
+                  },
+                ),
+              ],
+            ),
+          ],
+        );
+      },
     );
   }
 
@@ -235,15 +426,35 @@ class MessageActionsModal extends StatelessWidget {
       ),
       onTap: () {
         Navigator.pop(context);
-        if (onReplyTap != null) {
+        if (widget.onReplyTap != null) {
-          onReplyTap(message);
+          widget.onReplyTap(widget.message);
         }
       },
     );
   }
 
+  Widget _buildFlagButton(BuildContext context) {
+    return ListTile(
+      dense: true,
+      title: Row(
+        children: [
+          StreamSvgIcon.icon_flag(
+            color: StreamChatTheme.of(context).primaryIconTheme.color,
+          ),
+          const SizedBox(width: 16),
+          Text(
+            'Flag',
+            style: StreamChatTheme.of(context).textTheme.headline,
+          ),
+        ],
+      ),
+      onTap: () => _showFlagDialog(),
+    );
+  }
+
   Widget _buildDeleteButton(BuildContext context) {
-    final isDeleteFailed = message.status == MessageSendingStatus.FAILED_DELETE;
+    final isDeleteFailed =
+        widget.message.status == MessageSendingStatus.FAILED_DELETE;
     return ListTile(
       dense: true,
       title: Row(
@@ -262,11 +473,7 @@ class MessageActionsModal extends StatelessWidget {
         ],
       ),
       onTap: () {
-        Navigator.pop(context);
+        _showDeleteDialog();
-        StreamChat.of(context).client.deleteMessage(
-              message,
-              StreamChannel.of(context).channel.cid,
-            );
       },
     );
   }
@@ -288,7 +495,7 @@ class MessageActionsModal extends StatelessWidget {
         ],
       ),
       onTap: () async {
-        await Clipboard.setData(ClipboardData(text: message.text));
+        await Clipboard.setData(ClipboardData(text: widget.message.text));
         Navigator.pop(context);
       },
     );
@@ -317,7 +524,8 @@ class MessageActionsModal extends StatelessWidget {
   }
 
   Widget _buildResendMessage(BuildContext context) {
-    final isUpdateFailed = message.status == MessageSendingStatus.FAILED_UPDATE;
+    final isUpdateFailed =
+        widget.message.status == MessageSendingStatus.FAILED_UPDATE;
     return ListTile(
       dense: true,
       title: Row(
@@ -337,9 +545,9 @@ class MessageActionsModal extends StatelessWidget {
         final client = StreamChat.of(context).client;
         final channel = StreamChannel.of(context).channel;
         if (isUpdateFailed) {
-          client.updateMessage(message, channel.cid);
+          client.updateMessage(widget.message, channel.cid);
         } else {
-          channel.sendMessage(message);
+          channel.sendMessage(widget.message);
         }
       },
     );
@@ -396,10 +604,10 @@ class MessageActionsModal extends StatelessWidget {
                 padding: EdgeInsets.only(
                   bottom: MediaQuery.of(context).viewInsets.bottom,
                 ),
-                child: editMessageInputBuilder != null
+                child: widget.editMessageInputBuilder != null
-                    ? editMessageInputBuilder(context, message)
+                    ? widget.editMessageInputBuilder(context, widget.message)
                     : MessageInput(
-                        editMessage: message,
+                        editMessage: widget.message,
                         preMessageSending: (m) {
                           FocusScope.of(context).unfocus();
                           Navigator.pop(context);
@@ -431,8 +639,8 @@ class MessageActionsModal extends StatelessWidget {
       ),
       onTap: () {
         Navigator.pop(context);
-        if (onThreadReplyTap != null) {
+        if (widget.onThreadReplyTap != null) {
-          onThreadReplyTap(message);
+          widget.onThreadReplyTap(widget.message);
         }
       },
     );

lib/src/message_input.dart

@@ -203,6 +203,8 @@ class MessageInputState extends State<MessageInput> {
   bool _openFilePickerSection = false;
   int _filePickerIndex = 0;
   double _filePickerSize = _kMinMediaPickerSize;
+  KeyboardVisibilityController _keyboardVisibilityController =
+      KeyboardVisibilityController();
 
   /// The editing controller passed to the input TextField
   TextEditingController textEditingController;
@@ -358,31 +360,31 @@ class MessageInputState extends State<MessageInput> {
     );
   }
 
-  AnimatedCrossFade _animateSendButton(BuildContext context) {
+  Widget _animateSendButton(BuildContext context) {
-    return AnimatedCrossFade(
+    return Padding(
-      crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
+      padding: const EdgeInsets.all(8.0),
-              _attachments.every((a) => a.uploaded == true))
+      child: AnimatedCrossFade(
-          ? CrossFadeState.showFirst
+        crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
-          : CrossFadeState.showSecond,
+                _attachments.every((a) => a.uploaded == true))
-      firstChild: _buildSendButton(context),
+            ? CrossFadeState.showFirst
-      secondChild: _buildIdleSendButton(context),
+            : CrossFadeState.showSecond,
-      duration: Duration(milliseconds: 300),
+        firstChild: _buildSendButton(context),
-      alignment: Alignment.center,
+        secondChild: _buildIdleSendButton(context),
+        duration: Duration(milliseconds: 300),
+        alignment: Alignment.center,
+      ),
     );
   }
 
   Widget _buildExpandActionsButton() {
-    return AnimatedCrossFade(
+    return Padding(
-      crossFadeState:
+      padding: const EdgeInsets.all(8.0),
-          _actionsShrunk ? CrossFadeState.showFirst : CrossFadeState.showSecond,
+      child: AnimatedCrossFade(
-      firstChild: Padding(
+        crossFadeState: _actionsShrunk
-        padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+            ? CrossFadeState.showFirst
-        child: IconButton(
+            : CrossFadeState.showSecond,
-          onPressed: () {
+        firstChild: IconButton(
-            setState(() {
+          onPressed: () => setState(() => _actionsShrunk = false),
-              _actionsShrunk = false;
-            });
-          },
           icon: StreamSvgIcon.emptyCircleLeft(
             color: StreamChatTheme.of(context).colorTheme.accentBlue,
           ),
@@ -393,34 +395,36 @@ class MessageInputState extends State<MessageInput> {
           ),
           splashRadius: 24,
         ),
+        secondChild: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+          children: [
+            if (!widget.disableAttachments) _buildAttachmentButton(),
+            if (widget.editMessage == null &&
+                StreamChannel.of(context)
+                        .channel
+                        ?.config
+                        ?.commands
+                        ?.isNotEmpty ==
+                    true)
+              _buildCommandButton(),
+          ].insertBetween(const SizedBox(width: 8)),
+        ),
+        duration: Duration(milliseconds: 300),
+        alignment: Alignment.center,
       ),
-      secondChild: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
-        children: [
-          if (!widget.disableAttachments) _buildAttachmentButton(),
-          if (widget.editMessage == null &&
-              StreamChannel.of(context).channel?.config?.commands?.isNotEmpty ==
-                  true)
-            _buildCommandButton(),
-        ],
-      ),
-      duration: Duration(milliseconds: 300),
-      alignment: Alignment.center,
     );
   }
 
   Expanded _buildTextInput(BuildContext context) {
+    final theme = StreamChatTheme.of(context);
     return Expanded(
       child: Center(
         child: Container(
           clipBehavior: Clip.antiAlias,
           decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(24.0),
+            borderRadius: BorderRadius.circular(20.0),
-            border: Border.all(
+            border: Border.all(color: theme.colorTheme.greyGainsboro),
-              color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
-            ),
           ),
-          padding: _attachments.isEmpty ? null : EdgeInsets.all(6.0),
           child: Column(
             mainAxisSize: MainAxisSize.min,
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -429,52 +433,48 @@ class MessageInputState extends State<MessageInput> {
               _buildAttachments(),
               LimitedBox(
                 maxHeight: widget.maxHeight,
-                child: TextField(
+                child: SizedBox(
-                  key: Key('messageInputText'),
+                  height: 40,
-                  enabled: _inputEnabled,
+                  child: TextField(
-                  minLines: null,
+                    key: Key('messageInputText'),
-                  maxLines: null,
+                    enabled: _inputEnabled,
-                  onSubmitted: (_) {
+                    minLines: null,
-                    sendMessage();
+                    maxLines: null,
-                  },
+                    onSubmitted: (_) => sendMessage(),
-                  keyboardType: widget.keyboardType,
+                    keyboardType: widget.keyboardType,
-                  controller: textEditingController,
+                    controller: textEditingController,
-                  focusNode: _focusNode,
+                    focusNode: _focusNode,
-                  style: Theme.of(context).textTheme.bodyText2,
+                    style: theme.textTheme.body,
-                  autofocus: false,
+                    autofocus: false,
-                  textAlignVertical: TextAlignVertical.center,
+                    textAlignVertical: TextAlignVertical.center,
-                  decoration: InputDecoration(
+                    decoration: InputDecoration(
-                    isDense: true,
+                      isDense: true,
-                    hintText: _getHint(),
+                      hintText: _getHint(),
-                    prefixText: _commandEnabled ? null : '   ',
+                      hintStyle: theme.textTheme.body.copyWith(
-                    border: OutlineInputBorder(
+                        color: theme.colorTheme.grey,
-                        borderSide: BorderSide(color: Colors.transparent)),
+                      ),
-                    focusedBorder: OutlineInputBorder(
+                      border: OutlineInputBorder(
-                        borderSide: BorderSide(color: Colors.transparent)),
+                          borderSide: BorderSide(color: Colors.transparent)),
-                    enabledBorder: OutlineInputBorder(
+                      focusedBorder: OutlineInputBorder(
-                        borderSide: BorderSide(color: Colors.transparent)),
+                          borderSide: BorderSide(color: Colors.transparent)),
-                    errorBorder: OutlineInputBorder(
+                      enabledBorder: OutlineInputBorder(
-                        borderSide: BorderSide(color: Colors.transparent)),
+                          borderSide: BorderSide(color: Colors.transparent)),
-                    disabledBorder: OutlineInputBorder(
+                      errorBorder: OutlineInputBorder(
-                        borderSide: BorderSide(color: Colors.transparent)),
+                          borderSide: BorderSide(color: Colors.transparent)),
-                    contentPadding: EdgeInsets.symmetric(
+                      disabledBorder: OutlineInputBorder(
-                      horizontal: 16,
+                          borderSide: BorderSide(color: Colors.transparent)),
-                      vertical: 13,
+                      contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
-                    ),
+                      prefixIcon: _commandEnabled
-                    prefixIcon: _commandEnabled
+                          ? Container(
-                        ? Padding(
+                              decoration: BoxDecoration(
-                            padding:
+                                borderRadius: BorderRadius.circular(12),
-                                const EdgeInsets.symmetric(horizontal: 8.0),
+                                color: theme.colorTheme.accentBlue,
-                            child: Chip(
+                              ),
-                              backgroundColor: StreamChatTheme.of(context)
+                              height: 24,
-                                  .colorTheme
+                              margin: const EdgeInsets.all(8.0),
-                                  .accentBlue,
+                              padding: const EdgeInsets.only(right: 8, left: 4),
-                              padding: EdgeInsets.zero,
+                              child: Row(
-                              labelPadding:
-                                  EdgeInsets.symmetric(horizontal: 8.0),
-                              label: Row(
                                 mainAxisSize: MainAxisSize.min,
-                                mainAxisAlignment: MainAxisAlignment.center,
                                 children: [
                                   StreamSvgIcon.lightning(
                                     color: Colors.white,
@@ -484,27 +484,32 @@ class MessageInputState extends State<MessageInput> {
                                     _chosenCommand?.name?.toUpperCase() ?? '',
                                     style: StreamChatTheme.of(context)
                                         .textTheme
-                                        .footnote
+                                        .footnoteBold
                                         .copyWith(
                                           color: Colors.white,
                                         ),
                                   ),
                                 ],
                               ),
-                            ),
+                            )
-                          )
+                          : null,
-                        : null,
+                      suffixIcon: _commandEnabled
-                    suffixIcon: _commandEnabled
+                          ? IconButton(
-                        ? IconButton(
+                              icon: StreamSvgIcon.close_small(),
-                            icon: StreamSvgIcon.close_small(),
+                              splashRadius: 24,
-                            splashRadius: 24,
+                              padding: const EdgeInsets.all(0),
-                            onPressed: () {
+                              constraints: BoxConstraints.tightFor(
-                              setState(() => _commandEnabled = false);
+                                height: 24,
-                            },
+                                width: 24,
-                          )
+                              ),
-                        : null,
+                              onPressed: () {
+                                setState(() => _commandEnabled = false);
+                              },
+                            )
+                          : null,
+                    ),
+                    textCapitalization: TextCapitalization.sentences,
                   ),
-                  textCapitalization: TextCapitalization.sentences,
                 ),
               )
             ],
@@ -1515,128 +1520,124 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildReplyToMessage() {
-    if (!_hasQuotedMessage) {
+    if (!_hasQuotedMessage) return Offstage();
-      return Offstage();
-    }
     final containsUrl = widget.quotedMessage.attachments
             ?.any((element) => element.ogScrapeUrl != null) ==
         true;
     return Transform(
       transform: Matrix4.rotationY(pi),
       alignment: Alignment.center,
-      child: QuotedMessageWidget(
+      child: Padding(
-        reverse: true,
+        padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
-        showBorder: !containsUrl,
+        child: QuotedMessageWidget(
-        message: widget.quotedMessage,
+          reverse: true,
-        messageTheme: StreamChatTheme.of(context).otherMessageTheme,
+          showBorder: !containsUrl,
+          message: widget.quotedMessage,
+          messageTheme: StreamChatTheme.of(context).otherMessageTheme,
+        ),
       ),
     );
   }
 
   Widget _buildAttachments() {
-    return _attachments.isEmpty
+    if (_attachments.isEmpty) return Offstage();
-        ? Container()
+    return Column(
-        : Column(
+      children: [
-            children: [
+        if (_attachments.any((e) => e.attachment?.type == 'file'))
-              if (_attachments.any((e) => e.attachment?.type == 'file'))
+          LimitedBox(
-                LimitedBox(
+            maxHeight: 136.0,
-                  maxHeight: 136.0,
+            child: ListView(
-                  child: ListView(
+              reverse: true,
-                    reverse: true,
+              shrinkWrap: true,
-                    shrinkWrap: true,
+              children: _attachments.reversed
-                    children: _attachments.reversed
+                  .where((e) => e.attachment?.type == 'file')
-                        .where((e) => e.attachment?.type == 'file')
+                  .map(
-                        .map(
+                    (e) => Padding(
-                          (e) => Padding(
+                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                            padding:
+                      child: ClipRRect(
-                                const EdgeInsets.symmetric(horizontal: 8.0),
+                        borderRadius: BorderRadius.circular(10),
-                            child: ClipRRect(
+                        clipBehavior: Clip.antiAlias,
-                              borderRadius: BorderRadius.circular(10),
+                        child: FileAttachment(
-                              clipBehavior: Clip.antiAlias,
+                          attachment: e.attachment,
-                              child: FileAttachment(
+                          attachmentType: FileAttachmentType.local,
-                                attachment: e.attachment,
+                          file: e.file,
-                                attachmentType: FileAttachmentType.local,
+                          size: Size(
-                                file: e.file,
+                            MediaQuery.of(context).size.width * 0.65,
-                                size: Size(
+                            56.0,
-                                  MediaQuery.of(context).size.width * 0.65,
+                          ),
-                                  56.0,
+                          trailing: Padding(
+                            padding: const EdgeInsets.all(8.0),
+                            child: InkWell(
+                              child: CircleAvatar(
+                                backgroundColor: StreamChatTheme.of(context)
+                                    .colorTheme
+                                    .black
+                                    .withOpacity(0.6),
+                                maxRadius: 12.0,
+                                child: StreamSvgIcon.close(
+                                  color: StreamChatTheme.of(context)
+                                      .colorTheme
+                                      .white,
                                 ),
-                                trailing: Padding(
+                              ),
-                                  padding: const EdgeInsets.all(8.0),
+                              onTap: () {
-                                  child: InkWell(
+                                setState(() {
-                                    child: CircleAvatar(
+                                  _attachments.remove(e);
-                                      backgroundColor:
+                                });
-                                          StreamChatTheme.of(context)
+                              },
-                                              .colorTheme
+                            ),
-                                              .black
+                          ),
-                                              .withOpacity(0.6),
+                        ),
-                                      maxRadius: 12.0,
+                      ),
-                                      child: StreamSvgIcon.close(
+                    ),
-                                        color: StreamChatTheme.of(context)
+                  )
-                                            .colorTheme
+                  .toList(),
-                                            .white,
+            ),
+          ),
+        if (_attachments.any((e) => e.attachment?.type != 'file'))
+          LimitedBox(
+            maxHeight: 104.0,
+            child: ListView(
+              scrollDirection: Axis.horizontal,
+              children: _attachments
+                  .where((e) => e.attachment?.type != 'file')
+                  .map(
+                    (attachment) => Padding(
+                      padding: const EdgeInsets.all(8.0),
+                      child: ClipRRect(
+                        borderRadius: BorderRadius.circular(10),
+                        clipBehavior: Clip.antiAlias,
+                        child: Stack(
+                          children: <Widget>[
+                            AspectRatio(
+                              aspectRatio: 1.0,
+                              child: Container(
+                                height: 104,
+                                width: 104,
+                                child: _buildAttachment(attachment),
+                              ),
+                            ),
+                            _buildRemoveButton(attachment),
+                            attachment.uploaded
+                                ? SizedBox()
+                                : Positioned.fill(
+                                    child: Center(
+                                      child: Padding(
+                                        padding: const EdgeInsets.all(16.0),
+                                        child: CircularProgressIndicator(),
                                       ),
                                     ),
-                                    onTap: () {
-                                      setState(() {
-                                        _attachments.remove(e);
-                                      });
-                                    },
                                   ),
-                                ),
+                          ],
-                              ),
+                        ),
-                            ),
+                      ),
-                          ),
+                    ),
-                        )
+                  )
-                        .toList(),
+                  .toList(),
-                  ),
+            ),
-                ),
+          ),
-              if (_attachments.any((e) => e.attachment?.type != 'file'))
+      ],
-                LimitedBox(
+    );
-                  maxHeight: 104.0,
-                  child: ListView(
-                    scrollDirection: Axis.horizontal,
-                    children: _attachments
-                        .where((e) => e.attachment?.type != 'file')
-                        .map(
-                          (attachment) => Padding(
-                            padding: const EdgeInsets.all(8.0),
-                            child: ClipRRect(
-                              borderRadius: BorderRadius.circular(10),
-                              clipBehavior: Clip.antiAlias,
-                              child: Stack(
-                                children: <Widget>[
-                                  AspectRatio(
-                                    aspectRatio: 1.0,
-                                    child: Container(
-                                      height: 104,
-                                      width: 104,
-                                      child: _buildAttachment(attachment),
-                                    ),
-                                  ),
-                                  _buildRemoveButton(attachment),
-                                  attachment.uploaded
-                                      ? SizedBox()
-                                      : Positioned.fill(
-                                          child: Center(
-                                            child: Padding(
-                                              padding:
-                                                  const EdgeInsets.all(16.0),
-                                              child:
-                                                  CircularProgressIndicator(),
-                                            ),
-                                          ),
-                                        ),
-                                ],
-                              ),
-                            ),
-                          ),
-                        )
-                        .toList(),
-                  ),
-                ),
-            ],
-          );
   }
 
   Positioned _buildRemoveButton(_SendingAttachment attachment) {
@@ -1746,80 +1747,74 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildCommandButton() {
-    return Padding(
+    return IconButton(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+      icon: StreamSvgIcon.lightning(
-      child: IconButton(
+        color: _commandsOverlay != null
-        icon: StreamSvgIcon.lightning(
+            ? StreamChatTheme.of(context).colorTheme.accentBlue
-          color: _commandsOverlay != null
+            : StreamChatTheme.of(context).colorTheme.grey,
-              ? StreamChatTheme.of(context).colorTheme.accentBlue
-              : StreamChatTheme.of(context).colorTheme.grey,
-        ),
-        padding: const EdgeInsets.all(0),
-        constraints: BoxConstraints.tightFor(
-          height: 24,
-          width: 24,
-        ),
-        splashRadius: 24,
-        onPressed: () async {
-          if (_openFilePickerSection) {
-            setState(() {
-              _animateContainer = false;
-              _openFilePickerSection = false;
-              _filePickerSize = _kMinMediaPickerSize;
-            });
-            await Future.delayed(Duration(milliseconds: 300));
-          }
-
-          if (_commandsOverlay == null) {
-            setState(() {
-              _commandsOverlay = _buildCommandsOverlayEntry();
-              Overlay.of(context).insert(_commandsOverlay);
-            });
-          } else {
-            setState(() {
-              _commandsOverlay?.remove();
-              _commandsOverlay = null;
-            });
-          }
-        },
       ),
+      padding: const EdgeInsets.all(0),
+      constraints: BoxConstraints.tightFor(
+        height: 24,
+        width: 24,
+      ),
+      splashRadius: 24,
+      onPressed: () async {
+        if (_openFilePickerSection) {
+          setState(() {
+            _animateContainer = false;
+            _openFilePickerSection = false;
+            _filePickerSize = _kMinMediaPickerSize;
+          });
+          await Future.delayed(Duration(milliseconds: 300));
+        }
+
+        if (_commandsOverlay == null) {
+          setState(() {
+            _commandsOverlay = _buildCommandsOverlayEntry();
+            Overlay.of(context).insert(_commandsOverlay);
+          });
+        } else {
+          setState(() {
+            _commandsOverlay?.remove();
+            _commandsOverlay = null;
+          });
+        }
+      },
     );
   }
 
   Widget _buildAttachmentButton() {
-    return Padding(
+    return IconButton(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+      icon: StreamSvgIcon.attach(
-      child: IconButton(
+        color: _openFilePickerSection
-        icon: StreamSvgIcon.attach(
+            ? StreamChatTheme.of(context).colorTheme.accentBlue
-          color: _openFilePickerSection
+            : StreamChatTheme.of(context).colorTheme.grey,
-              ? StreamChatTheme.of(context).colorTheme.accentBlue
-              : StreamChatTheme.of(context).colorTheme.grey,
-        ),
-        padding: const EdgeInsets.all(0),
-        constraints: BoxConstraints.tightFor(
-          height: 24,
-          width: 24,
-        ),
-        splashRadius: 24,
-        onPressed: () async {
-          _emojiOverlay?.remove();
-          _emojiOverlay = null;
-          _commandsOverlay?.remove();
-          _commandsOverlay = null;
-          _mentionsOverlay?.remove();
-          _mentionsOverlay = null;
-
-          if (_openFilePickerSection) {
-            setState(() {
-              _animateContainer = true;
-              _openFilePickerSection = false;
-              _filePickerSize = _kMinMediaPickerSize;
-            });
-          } else {
-            showAttachmentModal();
-          }
-        },
       ),
+      padding: const EdgeInsets.all(0),
+      constraints: BoxConstraints.tightFor(
+        height: 24,
+        width: 24,
+      ),
+      splashRadius: 24,
+      onPressed: () async {
+        _emojiOverlay?.remove();
+        _emojiOverlay = null;
+        _commandsOverlay?.remove();
+        _commandsOverlay = null;
+        _mentionsOverlay?.remove();
+        _mentionsOverlay = null;
+
+        if (_openFilePickerSection) {
+          setState(() {
+            _animateContainer = true;
+            _openFilePickerSection = false;
+            _filePickerSize = _kMinMediaPickerSize;
+          });
+        } else {
+          showAttachmentModal();
+        }
+      },
     );
   }
 
@@ -2118,31 +2113,24 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildIdleSendButton(BuildContext context) {
-    return Padding(
+    return StreamSvgIcon(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+      assetName: _getIdleSendIcon(),
-      child: StreamSvgIcon(
+      color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
-        assetName: _getIdleSendIcon(),
-        color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
-      ),
     );
   }
 
   Widget _buildSendButton(BuildContext context) {
-    return Padding(
+    return IconButton(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
+      onPressed: sendMessage,
-      child: IconButton(
+      padding: const EdgeInsets.all(0),
-        onPressed: sendMessage,
+      splashRadius: 24,
-        visualDensity: VisualDensity.compact,
+      constraints: BoxConstraints.tightFor(
-        padding: const EdgeInsets.all(0),
+        height: 24,
-        splashRadius: 24,
+        width: 24,
-        constraints: BoxConstraints.tightFor(
+      ),
-          height: 24,
+      icon: StreamSvgIcon(
-          width: 24,
+        assetName: _getSendIcon(),
-        ),
+        color: StreamChatTheme.of(context).colorTheme.accentBlue,
-        icon: StreamSvgIcon(
-          assetName: _getSendIcon(),
-          color: StreamChatTheme.of(context).colorTheme.accentBlue,
-        ),
       ),
     );
   }
@@ -2263,7 +2251,8 @@ class MessageInputState extends State<MessageInput> {
     _emojiNames = Emoji.all().map((e) => e.name);
 
     if (!kIsWeb) {
-      _keyboardListener = KeyboardVisibility.onChange.listen((visible) {
+      _keyboardListener =
+          _keyboardVisibilityController.onChange.listen((visible) {
         if (_focusNode.hasFocus) {
           _onChanged(context, textEditingController.text);
         }

lib/src/message_list_view.dart

@@ -18,6 +18,7 @@ import '../stream_chat_flutter.dart';
 import 'date_divider.dart';
 import 'stream_channel.dart';
 import 'swipeable.dart';
+import 'extension.dart';
 
 typedef MessageBuilder = Widget Function(
   BuildContext,
@@ -306,157 +307,125 @@ class _MessageListViewState extends State<MessageListView> {
           return Stack(
             alignment: Alignment.center,
             children: [
-              ValueListenableBuilder<ConnectionStatus>(
+              LazyLoadScrollView(
-                  valueListenable: _client.wsConnectionStatus,
+                onStartOfPage: () async {
-                  builder: (context, status, _) {
+                  _inBetweenList = false;
-                    String statusString = '';
+                  if (!_upToDate) {
-                    bool showStatus = true;
+                    _topPaginationActive = false;
-
+                    _bottomPaginationActive = true;
-                    switch (status) {
+                    return _paginateData(
-                      case ConnectionStatus.connected:
+                      streamChannel,
-                        statusString = 'Connected';
+                      QueryDirection.bottom,
-                        showStatus = false;
+                    );
-                        break;
+                  }
-                      case ConnectionStatus.connecting:
+                },
-                        statusString = 'Reconnecting...';
+                onEndOfPage: () async {
-                        break;
+                  _inBetweenList = false;
-                      case ConnectionStatus.disconnected:
+                  _topPaginationActive = true;
-                        statusString = 'Disconnected';
+                  _bottomPaginationActive = false;
-                        break;
+                  return _paginateData(
+                    streamChannel,
+                    QueryDirection.top,
+                  );
+                },
+                onInBetweenOfPage: () {
+                  _inBetweenList = true;
+                },
+                child: ScrollablePositionedList.separated(
+                  key: ValueKey(initialIndex + initialAlignment),
+                  itemPositionsListener: _itemPositionListener,
+                  addAutomaticKeepAlives: true,
+                  initialScrollIndex: initialIndex ?? 0,
+                  initialAlignment: initialAlignment ?? 0,
+                  physics: widget.scrollPhysics,
+                  itemScrollController: _scrollController,
+                  reverse: true,
+                  itemCount:
+                      messages.length + 2 + (_isThreadConversation ? 1 : 0),
+                  separatorBuilder: (context, i) {
+                    if (i == messages.length) return Offstage();
+                    if (i == 0) return SizedBox(height: 30);
+                    if (i == messages.length + 1) {
+                      final replyCount = widget.parentMessage.replyCount;
+                      return Container(
+                        decoration: BoxDecoration(
+                          gradient:
+                              StreamChatTheme.of(context).colorTheme.bgGradient,
+                        ),
+                        child: Padding(
+                          padding: const EdgeInsets.all(8.0),
+                          child: Text(
+                            '$replyCount ${replyCount == 1 ? 'Reply' : 'Replies'}',
+                            textAlign: TextAlign.center,
+                            style: StreamChatTheme.of(context)
+                                .channelTheme
+                                .channelHeaderTheme
+                                .lastMessageAt,
+                          ),
+                        ),
+                      );
                     }
 
-                    return InfoTile(
+                    final message = messages[i];
-                      showMessage:
+                    final nextMessage = messages[i - 1];
-                          widget.showConnectionStateTile ? showStatus : false,
+                    if (!Jiffy(message.createdAt.toLocal()).isSame(
-                      tileAnchor: Alignment.topCenter,
+                      nextMessage.createdAt.toLocal(),
-                      childAnchor: Alignment.topCenter,
+                      Units.DAY,
-                      message: statusString,
+                    )) {
-                      child: LazyLoadScrollView(
+                      final divider = widget.dateDividerBuilder != null
-                        onStartOfPage: () async {
+                          ? widget.dateDividerBuilder(
-                          _inBetweenList = false;
-                          if (!_upToDate) {
-                            _topPaginationActive = false;
-                            _bottomPaginationActive = true;
-                            return _paginateData(
-                              streamChannel,
-                              QueryDirection.bottom,
-                            );
-                          }
-                        },
-                        onEndOfPage: () async {
-                          _inBetweenList = false;
-                          _topPaginationActive = true;
-                          _bottomPaginationActive = false;
-                          return _paginateData(
-                            streamChannel,
-                            QueryDirection.top,
-                          );
-                        },
-                        onInBetweenOfPage: () {
-                          _inBetweenList = true;
-                        },
-                        child: ScrollablePositionedList.separated(
-                          key: ValueKey(initialIndex + initialAlignment),
-                          itemPositionsListener: _itemPositionListener,
-                          addAutomaticKeepAlives: true,
-                          initialScrollIndex: initialIndex ?? 0,
-                          initialAlignment: initialAlignment ?? 0,
-                          physics: widget.scrollPhysics,
-                          itemScrollController: _scrollController,
-                          reverse: true,
-                          itemCount: messages.length +
-                              2 +
-                              (_isThreadConversation ? 1 : 0),
-                          separatorBuilder: (context, i) {
-                            if (i == messages.length) return Offstage();
-                            if (i == messages.length + 2) return Offstage();
-                            if (i == messages.length + 1) return Offstage();
-                            if (i == 0) return SizedBox(height: 30);
-                            final message = messages[i];
-                            final nextMessage = messages[i - 1];
-                            if (!Jiffy(message.createdAt.toLocal()).isSame(
                               nextMessage.createdAt.toLocal(),
-                              Units.DAY,
+                            )
-                            )) {
+                          : DateDivider(
-                              final divider = widget.dateDividerBuilder != null
+                              dateTime: nextMessage.createdAt.toLocal(),
-                                  ? widget.dateDividerBuilder(
-                                      nextMessage.createdAt.toLocal(),
-                                    )
-                                  : DateDivider(
-                                      dateTime: nextMessage.createdAt.toLocal(),
-                                    );
-                              return Padding(
-                                padding:
-                                    const EdgeInsets.symmetric(vertical: 12.0),
-                                child: divider,
-                              );
-                            }
-                            final timeDiff =
-                                Jiffy(nextMessage.createdAt.toLocal()).diff(
-                              message.createdAt.toLocal(),
-                              Units.MINUTE,
                             );
+                      return Padding(
+                        padding: const EdgeInsets.symmetric(vertical: 12.0),
+                        child: divider,
+                      );
+                    }
+                    final timeDiff =
+                        Jiffy(nextMessage.createdAt.toLocal()).diff(
+                      message.createdAt.toLocal(),
+                      Units.MINUTE,
+                    );
 
-                            final isNextUserSame =
+                    final isNextUserSame =
-                                message.user.id == nextMessage.user?.id;
+                        message.user.id == nextMessage.user?.id;
-                            final isThread = message.replyCount > 0;
+                    final isThread = message.replyCount > 0;
-                            final isDeleted = message.isDeleted;
+                    final isDeleted = message.isDeleted;
-                            if (timeDiff >= 1 ||
+                    if (timeDiff >= 1 ||
-                                !isNextUserSame ||
+                        !isNextUserSame ||
-                                isThread ||
+                        isThread ||
-                                isDeleted) {
+                        isDeleted) {
-                              return SizedBox(height: 8);
+                      return SizedBox(height: 8);
-                            }
+                    }
-                            return SizedBox(height: 2);
+                    return SizedBox(height: 2);
-                          },
+                  },
-                          itemBuilder: (context, i) {
+                  itemBuilder: (context, i) {
-                            if (i == messages.length + 2) {
+                    if (i == messages.length + 2) {
-                              if (widget.parentMessageBuilder != null) {
+                      if (widget.parentMessageBuilder != null) {
-                                return widget.parentMessageBuilder(
+                        return widget.parentMessageBuilder(
-                                  context,
+                          context,
-                                  widget.parentMessage,
+                          widget.parentMessage,
-                                );
+                        );
-                              } else {
+                      } else {
-                                return Column(
+                        return buildParentMessage(widget.parentMessage);
-                                  crossAxisAlignment:
+                      }
-                                      CrossAxisAlignment.stretch,
+                    }
-                                  children: <Widget>[
+                    if (i == messages.length + 1) {
-                                    buildParentMessage(widget.parentMessage),
+                      return _buildLoadingIndicator(
-                                    Container(
+                        streamChannel,
-                                      decoration: BoxDecoration(
+                        QueryDirection.top,
-                                        gradient: StreamChatTheme.of(context)
+                      );
-                                            .colorTheme
+                    }
-                                            .bgGradient,
+                    if (i == 0) {
-                                      ),
+                      return _buildLoadingIndicator(
-                                      child: Padding(
+                        streamChannel,
-                                        padding: const EdgeInsets.all(8.0),
+                        QueryDirection.bottom,
-                                        child: Text(
+                      );
-                                          '${widget.parentMessage.replyCount} ${widget.parentMessage.replyCount == 1 ? 'Reply' : 'Replies'}',
+                    }
-                                          textAlign: TextAlign.center,
+                    final message = messages[i - 1];
-                                          style: StreamChatTheme.of(context)
-                                              .channelTheme
-                                              .channelHeaderTheme
-                                              .lastMessageAt,
-                                        ),
-                                      ),
-                                    ),
-                                  ],
-                                );
-                              }
-                            }
-                            if (i == messages.length + 1) {
-                              return _buildLoadingIndicator(
-                                streamChannel,
-                                QueryDirection.top,
-                              );
-                            }
-                            if (i == 0) {
-                              return _buildLoadingIndicator(
-                                streamChannel,
-                                QueryDirection.bottom,
-                              );
-                            }
-                            final message = messages[i - 1];
 
                             Widget messageWidget;
 
@@ -639,37 +608,38 @@ class _MessageListViewState extends State<MessageListView> {
         ? streamChannel.queryTopMessages
         : streamChannel.queryBottomMessages;
     return StreamBuilder<bool>(
-        key: Key('LOADING-INDICATOR'),
+      key: Key('LOADING-INDICATOR'),
-        stream: stream,
+      stream: stream,
-        initialData: false,
+      initialData: false,
-        builder: (context, snapshot) {
+      builder: (context, snapshot) {
-          if (snapshot.hasError) {
+        if (snapshot.hasError) {
-            return Container(
+          return Container(
-              color: StreamChatTheme.of(context)
+            color: StreamChatTheme.of(context)
-                  .colorTheme
+                .colorTheme
-                  .accentRed
+                .accentRed
-                  .withOpacity(.2),
+                .withOpacity(.2),
-              child: Center(
+            child: Center(
-                child: Text('Error loading messages'),
+              child: Text('Error loading messages'),
-              ),
-            );
-          }
-          if (!snapshot.data) {
-            if (direction == QueryDirection.top) {
-              return Container(
-                height: 52,
-                width: double.infinity,
-              );
-            }
-            return Offstage();
-          }
-          return Center(
-            child: Padding(
-              padding: const EdgeInsets.all(8.0),
-              child: const CircularProgressIndicator(),
             ),
           );
-        });
+        }
+        if (!snapshot.data) {
+          if (!_isThreadConversation && direction == QueryDirection.top) {
+            return Container(
+              height: 52,
+              width: double.infinity,
+            );
+          }
+          return Offstage();
+        }
+        return Center(
+          child: Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: const CircularProgressIndicator(),
+          ),
+        );
+      },
+    );
   }
 
   Widget _buildTopMessage(
@@ -748,6 +718,7 @@ class _MessageListViewState extends State<MessageListView> {
     Message message,
   ) {
     final isMyMessage = message.user.id == StreamChat.of(context).user.id;
+    final isOnlyEmoji = message.text.isOnlyEmoji;
 
     return MessageWidget(
       showThreadReplyIndicator: false,
@@ -761,12 +732,7 @@ class _MessageListViewState extends State<MessageListView> {
       message: message,
       reverse: isMyMessage,
       showUsername: !isMyMessage,
-      padding: EdgeInsets.only(
+      padding: const EdgeInsets.all(8.0),
-        top: 8.0,
-        left: 8.0,
-        right: 8.0,
-        bottom: 16.0,
-      ),
       showSendingIndicator: false,
       onThreadTap: _onThreadTap,
       borderRadiusGeometry: BorderRadius.only(
@@ -775,7 +741,7 @@ class _MessageListViewState extends State<MessageListView> {
         topRight: Radius.circular(16),
         bottomRight: Radius.circular(16),
       ),
-      borderSide: isMyMessage ? BorderSide.none : null,
+      borderSide: isMyMessage || isOnlyEmoji ? BorderSide.none : null,
       showUserAvatar: isMyMessage ? DisplayWidget.gone : DisplayWidget.show,
       messageTheme: isMyMessage
           ? StreamChatTheme.of(context).ownMessageTheme
@@ -850,8 +816,19 @@ class _MessageListViewState extends State<MessageListView> {
     final showSendingIndicator =
         isMyMessage && (index == 0 || timeDiff >= 1 || !isNextUserSame);
 
-    bool showInChannelIndicator = !_isThreadConversation && isThreadMessage;
+    final showInChannelIndicator = !_isThreadConversation && isThreadMessage;
-    bool showThreadReplyIndicator = !_isThreadConversation && hasReplies;
+    final showThreadReplyIndicator = !_isThreadConversation && hasReplies;
+    final isOnlyEmoji = message.text.isOnlyEmoji;
+
+    final showMessageBorder =
+        showThreadReplyIndicator || showInChannelIndicator;
+    final borderSide = isMyMessage
+        ? !showMessageBorder
+            ? BorderSide.none
+            : null
+        : isOnlyEmoji && !showMessageBorder
+            ? BorderSide.none
+            : null;
 
     Widget child = MessageWidget(
       key: ValueKey<String>('MESSAGE-${message.id}'),
@@ -888,20 +865,28 @@ class _MessageListViewState extends State<MessageListView> {
       showEditMessage: isMyMessage,
       showDeleteMessage: isMyMessage,
       showThreadReplyMessage: !isThreadMessage,
-      borderSide: isMyMessage ? BorderSide.none : null,
+      showFlagButton: !isMyMessage,
+      borderSide: borderSide,
       onThreadTap: _onThreadTap,
       onReplyTap: widget.onReplyTap,
       attachmentBorderRadiusGeometry: BorderRadius.only(
         topLeft: Radius.circular(attachmentBorderRadius),
         bottomLeft: Radius.circular(
-            timeDiff >= 1 || !isNextUserSame ? 0 : attachmentBorderRadius),
+          (timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
+              ? 0
+              : attachmentBorderRadius,
+        ),
         topRight: Radius.circular(attachmentBorderRadius),
         bottomRight: Radius.circular(attachmentBorderRadius),
       ),
       attachmentPadding: const EdgeInsets.all(2),
       borderRadiusGeometry: BorderRadius.only(
         topLeft: Radius.circular(16),
-        bottomLeft: Radius.circular(timeDiff >= 1 || !isNextUserSame ? 0 : 16),
+        bottomLeft: Radius.circular(
+          (timeDiff >= 1 || !isNextUserSame) && !(hasReplies || isThreadMessage)
+              ? 0
+              : 16,
+        ),
         topRight: Radius.circular(16),
         bottomRight: Radius.circular(16),
       ),

lib/src/message_reactions_modal.dart

@@ -56,86 +56,92 @@ class MessageReactionsModal extends StatelessWidget {
         ? 1
         : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
 
-    return GestureDetector(
+    return TweenAnimationBuilder<double>(
-      behavior: HitTestBehavior.translucent,
+      tween: Tween(begin: 0.0, end: 1.0),
-      onTap: () => Navigator.maybePop(context),
+      duration: Duration(milliseconds: 300),
-      child: Stack(
+      curve: Curves.easeInOutBack,
-        children: [
+      builder: (context, val, snapshot) {
-          Positioned.fill(
+        return GestureDetector(
-            child: BackdropFilter(
+          behavior: HitTestBehavior.translucent,
-              filter: ImageFilter.blur(
+          onTap: () => Navigator.maybePop(context),
-                sigmaX: 10,
+          child: Stack(
-                sigmaY: 10,
+            children: [
-              ),
+              Positioned.fill(
-              child: Container(
+                child: BackdropFilter(
-                color: StreamChatTheme.of(context).colorTheme.overlay,
+                  filter: ImageFilter.blur(
-              ),
+                    sigmaX: 10,
-            ),
+                    sigmaY: 10,
-          ),
+                  ),
-          Center(
+                  child: Container(
-            child: SingleChildScrollView(
+                    color: StreamChatTheme.of(context).colorTheme.overlay,
-              child: Padding(
+                  ),
-                padding: const EdgeInsets.symmetric(vertical: 8.0),
-                child: Column(
-                  mainAxisAlignment: MainAxisAlignment.center,
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: <Widget>[
-                    if (showReactions &&
-                        (message.status == MessageSendingStatus.SENT ||
-                            message.status == null))
-                      Align(
-                        alignment: Alignment(
-                            user.id == message.user.id
-                                ? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
-                                : (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
-                            0.0),
-                        child: ReactionPicker(
-                          message: message,
-                          messageTheme: messageTheme,
-                        ),
-                      ),
-                    TweenAnimationBuilder<double>(
-                        tween: Tween(begin: 0.0, end: 1.0),
-                        duration: Duration(milliseconds: 300),
-                        builder: (context, val, snapshot) {
-                          return Transform.scale(
-                            scale: val,
-                            child: IgnorePointer(
-                              child: MessageWidget(
-                                key: Key('MessageWidget'),
-                                reverse: reverse,
-                                message: message.copyWith(
-                                  text: message.text.length > 200
-                                      ? '${message.text.substring(0, 200)}...'
-                                      : message.text,
-                                ),
-                                messageTheme: messageTheme,
-                                showReactions: false,
-                                showUsername: false,
-                                showUserAvatar: showUserAvatar,
-                                showThreadReplyIndicator: false,
-                                showTimestamp: false,
-                                translateUserAvatar: false,
-                                showSendingIndicator: false,
-                                shape: messageShape,
-                                showInChannelIndicator: false,
-                                showReactionPickerIndicator: showReactions &&
-                                    (message.status ==
-                                            MessageSendingStatus.SENT ||
-                                        message.status == null),
-                              ),
-                            ),
-                          );
-                        }),
-                    if (message.latestReactions?.isNotEmpty == true)
-                      _buildReactionCard(context),
-                  ],
                 ),
               ),
-            ),
+              Transform.scale(
+                scale: val,
+                child: Center(
+                  child: SingleChildScrollView(
+                    child: Padding(
+                      padding: const EdgeInsets.symmetric(vertical: 8.0),
+                      child: Column(
+                        mainAxisAlignment: MainAxisAlignment.center,
+                        crossAxisAlignment: CrossAxisAlignment.stretch,
+                        children: <Widget>[
+                          if (showReactions &&
+                              (message.status == MessageSendingStatus.SENT ||
+                                  message.status == null))
+                            Align(
+                              alignment: Alignment(
+                                  user.id == message.user.id
+                                      ? (divFactor > 1.0
+                                          ? 0.0
+                                          : (1.0 - divFactor))
+                                      : (divFactor > 1.0
+                                          ? 0.0
+                                          : -(1.0 - divFactor)),
+                                  0.0),
+                              child: ReactionPicker(
+                                message: message,
+                                messageTheme: messageTheme,
+                              ),
+                            ),
+                          IgnorePointer(
+                            child: MessageWidget(
+                              key: Key('MessageWidget'),
+                              reverse: reverse,
+                              message: message.copyWith(
+                                text: message.text.length > 200
+                                    ? '${message.text.substring(0, 200)}...'
+                                    : message.text,
+                              ),
+                              messageTheme: messageTheme,
+                              showReactions: false,
+                              showUsername: false,
+                              showUserAvatar: showUserAvatar,
+                              showThreadReplyIndicator: false,
+                              showTimestamp: false,
+                              translateUserAvatar: false,
+                              showSendingIndicator: false,
+                              shape: messageShape,
+                              showInChannelIndicator: false,
+                              showReactionPickerIndicator: showReactions &&
+                                  (message.status ==
+                                          MessageSendingStatus.SENT ||
+                                      message.status == null),
+                            ),
+                          ),
+                          if (message.latestReactions?.isNotEmpty == true)
+                            _buildReactionCard(context),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
           ),
-        ],
+        );
-      ),
+      },
     );
   }
 
@@ -191,64 +197,53 @@ class MessageReactionsModal extends StatelessWidget {
     BuildContext context,
   ) {
     final isCurrentUser = reaction.user.id == currentUser.id;
-    return TweenAnimationBuilder<double>(
+    return ConstrainedBox(
-        tween: Tween(begin: 0.0, end: 1.0),
+      constraints: BoxConstraints.loose(Size(
-        duration: Duration(milliseconds: 300),
+        64,
-        curve: Curves.easeInOut,
+        98,
-        builder: (context, val, snapshot) {
+      )),
-          return Transform.scale(
+      child: Column(
-            scale: val,
+        mainAxisSize: MainAxisSize.min,
-            child: ConstrainedBox(
+        mainAxisAlignment: MainAxisAlignment.start,
-              constraints: BoxConstraints.loose(Size(
+        crossAxisAlignment: CrossAxisAlignment.center,
-                64,
+        children: [
-                98,
+          Stack(
-              )),
+            children: [
-              child: Column(
+              UserAvatar(
-                mainAxisSize: MainAxisSize.min,
+                onTap: onUserAvatarTap,
-                mainAxisAlignment: MainAxisAlignment.start,
+                user: reaction.user,
-                crossAxisAlignment: CrossAxisAlignment.center,
+                constraints: BoxConstraints.tightFor(
-                children: [
+                  height: 64,
-                  Stack(
+                  width: 64,
-                    children: [
+                ),
-                      UserAvatar(
+                borderRadius: BorderRadius.circular(32),
-                        onTap: onUserAvatarTap,
-                        user: reaction.user,
-                        constraints: BoxConstraints.tightFor(
-                          height: 64,
-                          width: 64,
-                        ),
-                        borderRadius: BorderRadius.circular(32),
-                      ),
-                      Positioned(
-                        child: Align(
-                          alignment: reverse
-                              ? Alignment.centerRight
-                              : Alignment.centerLeft,
-                          child: ReactionBubble(
-                            reactions: [reaction],
-                            flipTail: !reverse,
-                            borderColor: messageTheme.reactionsBorderColor,
-                            backgroundColor:
-                                messageTheme.reactionsBackgroundColor,
-                            highlightOwnReactions: false,
-                          ),
-                        ),
-                        bottom: 6,
-                        left: isCurrentUser ? 0 : null,
-                        right: isCurrentUser ? 0 : null,
-                      ),
-                    ],
-                  ),
-                  const SizedBox(height: 8),
-                  Text(
-                    reaction.user.name,
-                    style: StreamChatTheme.of(context).textTheme.footnoteBold,
-                    textAlign: TextAlign.center,
-                  ),
-                ],
               ),
-            ),
+              Positioned(
-          );
+                child: Align(
-        });
+                  alignment:
+                      reverse ? Alignment.centerRight : Alignment.centerLeft,
+                  child: ReactionBubble(
+                    reactions: [reaction],
+                    flipTail: !reverse,
+                    borderColor: messageTheme.reactionsBorderColor,
+                    backgroundColor: messageTheme.reactionsBackgroundColor,
+                    highlightOwnReactions: false,
+                  ),
+                ),
+                bottom: 6,
+                left: isCurrentUser ? 0 : null,
+                right: isCurrentUser ? 0 : null,
+              ),
+            ],
+          ),
+          const SizedBox(height: 8),
+          Text(
+            reaction.user.name,
+            style: StreamChatTheme.of(context).textTheme.footnoteBold,
+            textAlign: TextAlign.center,
+          ),
+        ],
+      ),
+    );
   }
 }

lib/src/message_widget.dart

@@ -132,6 +132,7 @@ class MessageWidget extends StatefulWidget {
   final bool showDeleteMessage;
   final bool showResendMessage;
 
+  final bool showFlagButton;
   final Map<String, AttachmentBuilder> attachmentBuilders;
 
   /// Center user avatar with bottom of the message
@@ -170,6 +171,7 @@ class MessageWidget extends StatefulWidget {
     this.showThreadReplyMessage = true,
     this.showResendMessage = true,
     this.showCopyMessage = true,
+    this.showFlagButton = true,
     this.onUserAvatarTap,
     this.onLinkTap,
     this.onMessageActions,
@@ -270,6 +272,12 @@ class _MessageWidgetState extends State<MessageWidget> {
       widget.message.attachments?.any((element) => element.type == 'giphy') ==
       true;
 
+  bool get hasNonUrlAttachments =>
+      widget.message.attachments
+          ?.where((it) => it.ogScrapeUrl == null)
+          ?.isNotEmpty ==
+      true;
+
   bool get showBottomRow =>
       showThreadReplyIndicator ||
       showUsername ||
@@ -383,11 +391,8 @@ class _MessageWidgetState extends State<MessageWidget> {
                                                   ),
                                                   shape: widget.shape ??
                                                       RoundedRectangleBorder(
-                                                        side: isOnlyEmoji &&
+                                                        side:
-                                                                !(showThreadReplyIndicator ||
+                                                            widget.borderSide ??
-                                                                    showInChannel)
-                                                            ? BorderSide.none
-                                                            : widget.borderSide ??
                                                                 BorderSide(
                                                                   color: widget
                                                                       .messageTheme
@@ -410,8 +415,9 @@ class _MessageWidgetState extends State<MessageWidget> {
                                                       children: <Widget>[
                                                         if (hasQuotedMessage)
                                                           _buildQuotedMessage(),
-                                                        ..._parseAttachments(
+                                                        if (hasNonUrlAttachments)
-                                                            context),
+                                                          ..._parseAttachments(
+                                                              context),
                                                         if (widget.message.text
                                                                 .trim()
                                                                 .isNotEmpty &&
@@ -426,7 +432,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                                         if (widget.showReactionPickerIndicator)
                                           Positioned(
                                             right: 0,
-                                            top: -6,
+                                            top: -8,
                                             child: Transform(
                                               transform: Matrix4.rotationY(
                                                   widget.reverse ? pi : 0),
@@ -488,13 +494,21 @@ class _MessageWidgetState extends State<MessageWidget> {
             widget.onQuotedMessageTap != null
         ? () => widget.onQuotedMessageTap(widget.message.quotedMessageId)
         : null;
-    return QuotedMessageWidget(
+    return Padding(
-      onTap: onTap,
+      padding: EdgeInsets.only(
-      message: widget.message.quotedMessage,
+        right: 8,
-      messageTheme: isMyMessage
+        left: 8,
-          ? StreamChatTheme.of(context).otherMessageTheme
+        top: 8,
-          : StreamChatTheme.of(context).ownMessageTheme,
+        bottom: hasNonUrlAttachments ? 8 : 0,
-      reverse: widget.reverse,
+      ),
+      child: QuotedMessageWidget(
+        onTap: onTap,
+        message: widget.message.quotedMessage,
+        messageTheme: isMyMessage
+            ? StreamChatTheme.of(context).otherMessageTheme
+            : StreamChatTheme.of(context).ownMessageTheme,
+        reverse: widget.reverse,
+      ),
     );
   }
 
@@ -689,6 +703,7 @@ class _MessageWidgetState extends State<MessageWidget> {
 
   void _showMessageActionModalBottomSheet(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
+
     showDialog(
         context: context,
         barrierColor: StreamChatTheme.of(context).colorTheme.overlay,
@@ -725,6 +740,7 @@ class _MessageWidgetState extends State<MessageWidget> {
               showThreadReplyMessage: widget.showThreadReplyMessage &&
                   !isFailedState &&
                   widget.onThreadTap != null,
+              showFlagButton: widget.showFlagButton,
             ),
           );
         });
@@ -923,7 +939,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                         ? widget.messageTheme.copyWith(
                             messageText:
                                 widget.messageTheme.messageText.copyWith(
-                            fontSize: 40,
+                            fontSize: 42,
                           ))
                         : widget.messageTheme,
                   ),
@@ -938,7 +954,7 @@ class _MessageWidgetState extends State<MessageWidget> {
     );
   }
 
-  bool get isOnlyEmoji => textIsOnlyEmoji(widget.message.text);
+  bool get isOnlyEmoji => widget.message.text.isOnlyEmoji;
 
   Color _getBackgroundColor() {
     if (hasQuotedMessage) {

lib/src/quoted_message_widget.dart

@@ -109,23 +109,20 @@ class QuotedMessageWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: onTap,
-      child: Padding(
+      child: Row(
-        padding: const EdgeInsets.only(top: 8, right: 4, left: 8),
+        crossAxisAlignment: CrossAxisAlignment.end,
-        child: Row(
+        mainAxisSize: MainAxisSize.min,
-          crossAxisAlignment: CrossAxisAlignment.end,
+        children: [
-          mainAxisSize: MainAxisSize.min,
+          Flexible(child: _buildMessage(context)),
-          children: [
+          SizedBox(width: 8),
-            Flexible(child: _buildMessage(context)),
+          _buildUserAvatar(),
-            SizedBox(width: 4),
+        ],
-            _buildUserAvatar(),
-          ],
-        ),
       ),
     );
   }
 
   Widget _buildMessage(BuildContext context) {
-    final isOnlyEmoji = textIsOnlyEmoji(message.text);
+    final isOnlyEmoji = message.text.isOnlyEmoji;
     var msg = _hasAttachments && !_containsText
         ? message.copyWith(text: message.attachments.last?.title ?? '')
         : message;
@@ -145,9 +142,12 @@ class QuotedMessageWidget extends StatelessWidget {
               messageTheme: isOnlyEmoji && _containsText
                   ? messageTheme.copyWith(
                       messageText: messageTheme.messageText.copyWith(
-                      fontSize: 24,
+                      fontSize: 32,
                     ))
-                  : messageTheme,
+                  : messageTheme.copyWith(
+                      messageText: messageTheme.messageText.copyWith(
+                      fontSize: 12,
+                    )),
             ),
           ),
         ),
@@ -235,9 +235,7 @@ class QuotedMessageWidget extends StatelessWidget {
 
   ShapeBorder _getDefaultShape(BuildContext context) {
     return RoundedRectangleBorder(
-      side: BorderSide(
+      side: BorderSide(width: 0.0, color: Colors.transparent),
-        color: StreamChatTheme.of(context).colorTheme.greyWhisper,
-      ),
       borderRadius: BorderRadius.circular(8),
     );
   }
@@ -246,16 +244,13 @@ class QuotedMessageWidget extends StatelessWidget {
     return Transform(
       transform: Matrix4.rotationY(reverse ? pi : 0),
       alignment: Alignment.center,
-      child: Padding(
+      child: UserAvatar(
-        padding: const EdgeInsets.symmetric(horizontal: 4.0),
+        user: message.user,
-        child: UserAvatar(
+        constraints: BoxConstraints.tightFor(
-          user: message.user,
+          height: 24,
-          constraints: BoxConstraints.tightFor(
+          width: 24,
-            height: 24,
-            width: 24,
-          ),
-          showOnlineStatus: false,
         ),
+        showOnlineStatus: false,
       ),
     );
   }

lib/src/reaction_picker.dart

@@ -1,8 +1,11 @@
+import 'dart:math';
+
 import 'package:ezanimation/ezanimation.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
 
 import '../stream_chat_flutter.dart';
+import 'extension.dart';
 
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker.png)
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/reaction_picker_paint.png)
@@ -36,13 +39,10 @@ class _ReactionPickerState extends State<ReactionPicker>
     if (animations.isEmpty && reactionIcons.isNotEmpty) {
       reactionIcons.forEach((element) {
         animations.add(
-          EzAnimation.sequence(
+          EzAnimation.tween(
-            [
+            Tween(begin: 0.0, end: 1.0),
-              SequenceItem(0.0, 1.4),
-              SequenceItem(1.4, 1.0),
-            ],
             Duration(milliseconds: 500),
-            vsync: this,
+            curve: Curves.easeInOutBack,
           ),
         );
       });
@@ -52,70 +52,95 @@ class _ReactionPickerState extends State<ReactionPicker>
 
     return TweenAnimationBuilder<double>(
         tween: Tween(begin: 0.0, end: 1.0),
-        curve: Curves.easeInOutExpo,
+        curve: Curves.easeInOutBack,
         duration: Duration(milliseconds: 500),
         builder: (context, val, wid) {
           return Transform.scale(
             scale: val,
             child: Material(
+              borderRadius: BorderRadius.circular(24),
               color: StreamChatTheme.of(context).colorTheme.white,
               clipBehavior: Clip.hardEdge,
-              shape: RoundedRectangleBorder(
-                borderRadius: BorderRadius.circular(24),
-              ),
               child: Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                padding: const EdgeInsets.symmetric(
+                  horizontal: 16.0,
+                  vertical: 8.0,
+                ),
                 child: Row(
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.end,
                   mainAxisSize: MainAxisSize.min,
-                  children: reactionIcons.map((reactionIcon) {
+                  children: reactionIcons
-                    final ownReactionIndex = widget.message.ownReactions
+                      .map<Widget>((reactionIcon) {
-                            ?.indexWhere((reaction) =>
+                        final ownReactionIndex = widget.message.ownReactions
-                                reaction.type == reactionIcon.type) ??
+                                ?.indexWhere((reaction) =>
-                        -1;
+                                    reaction.type == reactionIcon.type) ??
-                    var index = reactionIcons.indexOf(reactionIcon);
+                            -1;
+                        var index = reactionIcons.indexOf(reactionIcon);
 
-                    return IconButton(
+                        return ConstrainedBox(
-                      iconSize: 24,
+                          constraints: BoxConstraints.tightFor(
-                      icon: AnimatedBuilder(
+                            height: 24,
-                          animation: animations[index],
+                            width: 24,
-                          builder: (context, val) {
+                          ),
-                            return Transform(
+                          child: RawMaterialButton(
-                              transform: Matrix4.identity()
+                            elevation: 0,
-                                ..scale(animations[index].value,
+                            padding: const EdgeInsets.all(0),
-                                    animations[index].value)
+                            clipBehavior: Clip.none,
-                                ..rotateZ(1.0 - animations[index].value),
+                            shape: ContinuousRectangleBorder(
-                              child: StreamSvgIcon(
+                              borderRadius: BorderRadius.circular(16),
-                                assetName: reactionIcon.assetName,
+                            ),
-                                height: animations[index].value * 24.0,
+                            constraints: BoxConstraints.tightFor(
-                                width: animations[index].value * 24.0,
+                              height: 24,
-                                color: ownReactionIndex != -1
+                              width: 24,
-                                    ? StreamChatTheme.of(context)
+                            ),
-                                        .colorTheme
+                            child: AnimatedBuilder(
-                                        .accentBlue
+                                animation: animations[index],
-                                    : Theme.of(context)
+                                builder: (context, val) {
-                                        .iconTheme
+                                  return Transform.scale(
-                                        .color
+                                    alignment: Alignment.center,
-                                        .withOpacity(.5),
+                                    scale: animations[index].value,
-                              ),
+                                    child: StreamSvgIcon(
-                            );
+                                      assetName: reactionIcon.assetName,
-                          }),
+                                      height: max(
-                      onPressed: () {
+                                        0,
-                        if (ownReactionIndex != -1) {
+                                        animations[index].value * 24.0,
-                          removeReaction(
+                                      ),
-                            context,
+                                      width: max(
-                            widget.message.ownReactions[ownReactionIndex],
+                                        0,
-                          );
+                                        animations[index].value * 24.0,
-                        } else {
+                                      ),
-                          sendReaction(
+                                      color: ownReactionIndex != -1
-                            context,
+                                          ? StreamChatTheme.of(context)
-                            reactionIcon.type,
+                                              .colorTheme
-                          );
+                                              .accentBlue
-                        }
+                                          : Theme.of(context)
-                      },
+                                              .iconTheme
-                    );
+                                              .color
-                  }).toList(),
+                                              .withOpacity(.5),
+                                    ),
+                                  );
+                                }),
+                            onPressed: () {
+                              if (ownReactionIndex != -1) {
+                                removeReaction(
+                                  context,
+                                  widget.message.ownReactions[ownReactionIndex],
+                                );
+                              } else {
+                                sendReaction(
+                                  context,
+                                  reactionIcon.type,
+                                );
+                              }
+                            },
+                          ),
+                        );
+                      })
+                      .insertBetween(SizedBox(
+                        width: 16,
+                      ))
+                      .toList(),
                 ),
               ),
             ),

lib/src/stream_svg_icon.dart

@@ -889,4 +889,16 @@ class StreamSvgIcon extends StatelessWidget {
       height: size,
     );
   }
+
+  factory StreamSvgIcon.icon_flag({
+    double size,
+    Color color,
+  }) {
+    return StreamSvgIcon(
+      assetName: 'icon_flag.svg',
+      color: color,
+      width: size,
+      height: size,
+    );
+  }
 }

lib/src/utils.dart

@@ -1,4 +1,3 @@
-import 'package:emojis/emoji.dart';
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:url_launcher/url_launcher.dart';
@@ -38,27 +37,21 @@ Future<bool> showConfirmationDialog(
         return Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            SizedBox(
+            SizedBox(height: 26.0),
-              height: 26.0,
-            ),
             if (icon != null) icon,
-            SizedBox(
+            SizedBox(height: 26.0),
-              height: 26.0,
-            ),
             Text(
               title,
               style: StreamChatTheme.of(context).textTheme.headlineBold,
             ),
-            SizedBox(
+            SizedBox(height: 7.0),
-              height: 7.0,
+            Text(
-            ),
+              question,
-            Text(question),
+              textAlign: TextAlign.center,
-            SizedBox(
-              height: 36.0,
             ),
+            SizedBox(height: 36.0),
             Container(
-              color:
+              color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
-                  StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
               height: 1.0,
             ),
             Row(
@@ -67,22 +60,29 @@ Future<bool> showConfirmationDialog(
                 FlatButton(
                   child: Text(
                     cancelText,
-                    style: TextStyle(
+                    style: StreamChatTheme.of(context)
-                        color: StreamChatTheme.of(context)
+                        .textTheme
-                            .colorTheme
+                        .bodyBold
-                            .black
+                        .copyWith(
-                            .withOpacity(0.5),
+                            color: StreamChatTheme.of(context)
-                        fontWeight: FontWeight.w400),
+                                .colorTheme
+                                .black
+                                .withOpacity(0.5)),
                   ),
                   onPressed: () {
-                    Navigator.of(context).pop();
+                    Navigator.of(context).pop(false);
                   },
                 ),
                 FlatButton(
                   child: Text(
                     okText,
-                    style: TextStyle(
+                    style: StreamChatTheme.of(context)
-                        color: Colors.red, fontWeight: FontWeight.w400),
+                        .textTheme
+                        .bodyBold
+                        .copyWith(
+                            color: StreamChatTheme.of(context)
+                                .colorTheme
+                                .accentRed),
                   ),
                   onPressed: () {
                     Navigator.pop(context, true);
@@ -95,6 +95,77 @@ Future<bool> showConfirmationDialog(
       });
 }
 
+Future<bool> showInfoDialog(
+  BuildContext context, {
+  String title,
+  Widget icon,
+  String question,
+  String okText,
+  StreamChatThemeData theme,
+}) {
+  return showModalBottomSheet(
+    backgroundColor:
+        theme.colorTheme.white ?? StreamChatTheme.of(context).colorTheme.white,
+    context: context,
+    shape: RoundedRectangleBorder(
+        borderRadius: BorderRadius.only(
+      topLeft: Radius.circular(16.0),
+      topRight: Radius.circular(16.0),
+    )),
+    builder: (context) {
+      return Column(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(
+            height: 26.0,
+          ),
+          if (icon != null) icon,
+          SizedBox(
+            height: 26.0,
+          ),
+          Text(
+            title,
+            style: theme.textTheme.headlineBold ??
+                StreamChatTheme.of(context).textTheme.headlineBold,
+          ),
+          SizedBox(
+            height: 7.0,
+          ),
+          Text(question),
+          SizedBox(
+            height: 36.0,
+          ),
+          Container(
+            color: theme.colorTheme.black.withOpacity(.08) ??
+                StreamChatTheme.of(context).colorTheme.black.withOpacity(.08),
+            height: 1.0,
+          ),
+          Row(
+            mainAxisAlignment: MainAxisAlignment.spaceBetween,
+            children: [
+              FlatButton(
+                child: Text(
+                  okText,
+                  style: TextStyle(
+                      color: theme.colorTheme.black.withOpacity(0.5) ??
+                          StreamChatTheme.of(context)
+                              .colorTheme
+                              .black
+                              .withOpacity(0.5),
+                      fontWeight: FontWeight.w400),
+                ),
+                onPressed: () {
+                  Navigator.of(context).pop();
+                },
+              ),
+            ],
+          ),
+        ],
+      );
+    },
+  );
+}
+
 /// Get random png with initials
 String getRandomPicUrl(User user) =>
     'https://getstream.io/random_png/?id=${user.id}&name=${user.name}';
@@ -215,16 +286,3 @@ StreamSvgIcon getFileTypeImage(String type) {
       break;
   }
 }
-
-final _emojis = Emoji.all();
-
-bool textIsOnlyEmoji(String text) {
-  return text.trim().characters.isNotEmpty &&
-      text.trim().characters.every((c) =>
-          _emojis.firstWhere(
-            (Emoji emoji) => emoji.char.contains(c),
-            orElse: () => null,
-          ) !=
-          null) &&
-      text.characters.length < 4;
-}

lib/svgs/icon_flag.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.5C4.44772 2.5 4 2.94772 4 3.5V4.5V14.5V21.5C4 22.0523 4.44772 22.5 5 22.5C5.55228 22.5 6 22.0523 6 21.5V14.5H20L18 9.5L20 4.5H6V3.5C6 2.94772 5.55228 2.5 5 2.5ZM6 6.5V12.5H17L16 9.5L17 6.5H6Z" fill="#7A7A7A"/>
+</svg>