Merge branch 'feature/new-ui' into feature/mono-repo

packages/flutter_widgets/example/lib/group_chat_details_screen.dart

@@ -123,10 +123,12 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                 onPressed: _isGroupNameEmpty
                     ? null
                     : () async {
+                        try {
                           final groupName = _groupNameController.text;
                           final client = StreamChat.of(context).client;
-                        final channel = client
+                          final channel = client.channel('messaging',
-                            .channel('messaging', id: Uuid().v4(), extraData: {
+                              id: Uuid().v4(),
+                              extraData: {
                                 'members': [
                                   client.state.user.id,
                                   ..._selectedUsers.map((e) => e.id),
@@ -140,17 +142,44 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                             ModalRoute.withName(Routes.HOME),
                             arguments: ChannelPageArgs(channel: channel),
                           );
+                        } catch (err) {
+                          _showErrorAlert();
+                        }
                       },
               ),
             ),
           ],
         ),
-        body: Column(
+        body: ValueListenableBuilder<ConnectionStatus>(
+            valueListenable: StreamChat.of(context).client.wsConnectionStatus,
+            builder: (context, status, _) {
+              String statusString = '';
+              bool showStatus = true;
+
+              switch (status) {
+                case ConnectionStatus.connected:
+                  statusString = 'Connected';
+                  showStatus = false;
+                  break;
+                case ConnectionStatus.connecting:
+                  statusString = 'Reconnecting...';
+                  break;
+                case ConnectionStatus.disconnected:
+                  statusString = 'Disconnected';
+                  break;
+              }
+              return InfoTile(
+                showMessage: showStatus,
+                tileAnchor: Alignment.topCenter,
+                childAnchor: Alignment.topCenter,
+                message: statusString,
+                child: Column(
                   children: [
                     Container(
                       width: double.maxFinite,
                       decoration: BoxDecoration(
-                gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
+                        gradient:
+                            StreamChatTheme.of(context).colorTheme.bgGradient,
                       ),
                       child: Padding(
                         padding: const EdgeInsets.symmetric(
@@ -173,14 +202,17 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                           itemCount: _selectedUsers.length + 1,
                           separatorBuilder: (_, __) => Container(
                             height: 1,
-                    color: StreamChatTheme.of(context).colorTheme.greyWhisper,
+                            color: StreamChatTheme.of(context)
+                                .colorTheme
+                                .greyWhisper,
                           ),
                           itemBuilder: (_, index) {
                             if (index == _selectedUsers.length) {
                               return Container(
                                 height: 1,
-                        color:
+                                color: StreamChatTheme.of(context)
-                            StreamChatTheme.of(context).colorTheme.greyWhisper,
+                                    .colorTheme
+                                    .greyWhisper,
                               );
                             }
                             final user = _selectedUsers[index];
@@ -204,7 +236,9 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                               trailing: IconButton(
                                 icon: Icon(
                                   Icons.clear_rounded,
-                          color: StreamChatTheme.of(context).colorTheme.black,
+                                  color: StreamChatTheme.of(context)
+                                      .colorTheme
+                                      .black,
                                 ),
                                 padding: const EdgeInsets.all(0),
                                 splashRadius: 24,
@@ -224,7 +258,74 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                     ),
                   ],
                 ),
+              );
+            }),
       ),
     );
   }
+
+  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();
+                  },
+                ),
+              ],
+            ),
+          ],
+        );
+      },
+    );
+  }
 }

packages/flutter_widgets/example/lib/group_info_screen.dart

@@ -137,6 +137,7 @@ class _GroupInfoScreenState extends State<GroupInfoScreen> {
               ),
               centerTitle: true,
               actions: [
+                if (!channel.channel.isDistinct)
                   StreamNeumorphicButton(
                     child: InkWell(
                       onTap: () {

packages/flutter_widgets/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);
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
       _focusNode.requestFocus();
+    });
   }
 
   @override
@@ -752,6 +754,7 @@ class _ChannelPageState extends State<ChannelPage> {
             quotedMessage: _quotedMessage,
             onQuotedMessageCleared: () {
               setState(() => _quotedMessage = null);
+              _focusNode.unfocus();
             },
           ),
         ],

packages/flutter_widgets/example/lib/new_chat_screen.dart

@@ -134,7 +134,30 @@ class _NewChatScreenState extends State<NewChatScreen> {
         ),
         centerTitle: true,
       ),
-      body: StreamChannel(
+      body: ValueListenableBuilder<ConnectionStatus>(
+          valueListenable: StreamChat.of(context).client.wsConnectionStatus,
+          builder: (context, status, _) {
+            String statusString = '';
+            bool showStatus = true;
+
+            switch (status) {
+              case ConnectionStatus.connected:
+                statusString = 'Connected';
+                showStatus = false;
+                break;
+              case ConnectionStatus.connecting:
+                statusString = 'Reconnecting...';
+                break;
+              case ConnectionStatus.disconnected:
+                statusString = 'Disconnected';
+                break;
+            }
+            return InfoTile(
+              showMessage: showStatus,
+              tileAnchor: Alignment.topCenter,
+              childAnchor: Alignment.topCenter,
+              message: statusString,
+              child: StreamChannel(
                 showLoading: false,
                 channel: channel,
                 child: Column(
@@ -162,20 +185,24 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                 ),
                                 padding: const EdgeInsets.only(left: 24),
                                 child: Padding(
-                          padding: const EdgeInsets.fromLTRB(8, 4, 12, 4),
+                                  padding:
+                                      const EdgeInsets.fromLTRB(8, 4, 12, 4),
                                   child: Text(
                                     user.name,
                                     maxLines: 1,
                                     style: TextStyle(
-                              color:
+                                      color: StreamChatTheme.of(context)
-                                  StreamChatTheme.of(context).colorTheme.black,
+                                          .colorTheme
+                                          .black,
                                     ),
                                   ),
                                 ),
                               ),
                               Container(
                                 foregroundDecoration: BoxDecoration(
-                          color: StreamChatTheme.of(context).colorTheme.overlay,
+                                  color: StreamChatTheme.of(context)
+                                      .colorTheme
+                                      .overlay,
                                   shape: BoxShape.circle,
                                 ),
                                 child: UserAvatar(
@@ -225,7 +252,9 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                 SizedBox(width: 8),
                                 Text(
                                   'Create a Group',
-                          style: StreamChatTheme.of(context).textTheme.bodyBold,
+                                  style: StreamChatTheme.of(context)
+                                      .textTheme
+                                      .bodyBold,
                                 ),
                               ],
                             ),
@@ -236,7 +265,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
                       Container(
                         width: double.maxFinite,
                         decoration: BoxDecoration(
-                  gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
+                          gradient:
+                              StreamChatTheme.of(context).colorTheme.bgGradient,
                         ),
                         child: Padding(
                           padding: const EdgeInsets.symmetric(
@@ -261,11 +291,13 @@ class _NewChatScreenState extends State<NewChatScreen> {
                       child: _showUserList
                           ? GestureDetector(
                               behavior: HitTestBehavior.opaque,
-                      onPanDown: (_) => FocusScope.of(context).unfocus(),
+                              onPanDown: (_) =>
+                                  FocusScope.of(context).unfocus(),
                               child: UsersBloc(
                                 child: UserListView(
                                   selectedUsers: _selectedUsers,
-                          groupAlphabetically: _isSearchActive ? false : true,
+                                  groupAlphabetically:
+                                      _isSearchActive ? false : true,
                                   onUserTap: (user, _) {
                                     _controller.clear();
                                     if (!_selectedUsers.contains(user)) {
@@ -298,16 +330,20 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                     return LayoutBuilder(
                                       builder: (context, viewportConstraints) {
                                         return SingleChildScrollView(
-                                  physics: AlwaysScrollableScrollPhysics(),
+                                          physics:
+                                              AlwaysScrollableScrollPhysics(),
                                           child: ConstrainedBox(
                                             constraints: BoxConstraints(
-                                      minHeight: viewportConstraints.maxHeight,
+                                              minHeight:
+                                                  viewportConstraints.maxHeight,
                                             ),
                                             child: Center(
                                               child: Column(
                                                 children: [
                                                   Padding(
-                                            padding: const EdgeInsets.all(24),
+                                                    padding:
+                                                        const EdgeInsets.all(
+                                                            24),
                                                     child: StreamSvgIcon.search(
                                                       size: 96,
                                                       color: Colors.grey,
@@ -315,15 +351,17 @@ class _NewChatScreenState extends State<NewChatScreen> {
                                                   ),
                                                   Text(
                                                     'No user matches these keywords...',
-                                            style: StreamChatTheme.of(context)
+                                                    style: StreamChatTheme.of(
+                                                            context)
                                                         .textTheme
                                                         .footnote
                                                         .copyWith(
-                                                    color: StreamChatTheme.of(
+                                                            color: StreamChatTheme
-                                                            context)
+                                                                    .of(context)
                                                                 .colorTheme
                                                                 .black
-                                                        .withOpacity(.5)),
+                                                                .withOpacity(
+                                                                    .5)),
                                                   ),
                                                 ],
                                               ),
@@ -377,5 +415,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                 ),
               ),
             );
+          }),
+    );
   }
 }

packages/flutter_widgets/example/lib/new_group_chat_screen.dart

@@ -87,9 +87,33 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
             )
         ],
       ),
-      body: NestedScrollView(
+      body: ValueListenableBuilder<ConnectionStatus>(
+          valueListenable: StreamChat.of(context).client.wsConnectionStatus,
+          builder: (context, status, _) {
+            String statusString = '';
+            bool showStatus = true;
+
+            switch (status) {
+              case ConnectionStatus.connected:
+                statusString = 'Connected';
+                showStatus = false;
+                break;
+              case ConnectionStatus.connecting:
+                statusString = 'Reconnecting...';
+                break;
+              case ConnectionStatus.disconnected:
+                statusString = 'Disconnected';
+                break;
+            }
+            return InfoTile(
+              showMessage: showStatus,
+              tileAnchor: Alignment.topCenter,
+              childAnchor: Alignment.topCenter,
+              message: statusString,
+              child: NestedScrollView(
                 floatHeaderSlivers: true,
-        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
+                headerSliverBuilder:
+                    (BuildContext context, bool innerBoxIsScrolled) {
                   return <Widget>[
                     SliverToBoxAdapter(
                       child: SearchTextField(
@@ -112,7 +136,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                   Stack(
                                     children: [
                                       UserAvatar(
-                                onlineIndicatorAlignment: Alignment(0.9, 0.9),
+                                        onlineIndicatorAlignment:
+                                            Alignment(0.9, 0.9),
                                         user: user,
                                         showOnlineStatus: true,
                                         borderRadius: BorderRadius.circular(32),
@@ -127,8 +152,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                         child: GestureDetector(
                                           onTap: () {
                                             if (_selectedUsers.contains(user)) {
-                                      setState(
+                                              setState(() =>
-                                          () => _selectedUsers.remove(user));
+                                                  _selectedUsers.remove(user));
                                             }
                                           },
                                           child: Container(
@@ -138,7 +163,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                                   .white,
                                               shape: BoxShape.circle,
                                               border: Border.all(
-                                        color: StreamChatTheme.of(context)
+                                                color:
+                                                    StreamChatTheme.of(context)
                                                         .colorTheme
                                                         .whiteSnow,
                                               ),
@@ -175,7 +201,9 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                         child: Container(
                           width: double.maxFinite,
                           decoration: BoxDecoration(
-                    gradient: StreamChatTheme.of(context).colorTheme.bgGradient,
+                            gradient: StreamChatTheme.of(context)
+                                .colorTheme
+                                .bgGradient,
                           ),
                           child: Padding(
                             padding: const EdgeInsets.symmetric(
@@ -187,7 +215,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                   ? 'Matches for \"$_userNameQuery\"'
                                   : 'On the platform',
                               style: TextStyle(
-                        color: StreamChatTheme.of(context).colorTheme.grey,
+                                color:
+                                    StreamChatTheme.of(context).colorTheme.grey,
                               ),
                             ),
                           ),
@@ -278,6 +307,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                 ),
               ),
             );
+          }),
+    );
   }
 }
 

packages/flutter_widgets/example/pubspec.yaml

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

packages/flutter_widgets/lib/src/channel_header.dart

@@ -3,6 +3,7 @@ import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/back_button.dart';
 import 'package:stream_chat_flutter/src/channel_info.dart';
 import 'package:stream_chat_flutter/src/channel_name.dart';
+import 'package:stream_chat_flutter/src/info_tile.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 
 import '../stream_chat_flutter.dart';
@@ -68,6 +69,8 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   /// If true the typing indicator will be rendered if a user is typing
   final bool showTypingIndicator;
 
+  final bool showConnectionStateTile;
+
   /// Creates a channel header
   ChannelHeader({
     Key key,
@@ -76,13 +79,38 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
     this.onTitleTap,
     this.showTypingIndicator = true,
     this.onImageTap,
+    this.showConnectionStateTile = false,
   })  : preferredSize = Size.fromHeight(kToolbarHeight),
         super(key: key);
 
   @override
   Widget build(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
-    return AppBar(
+    final _client = StreamChat.of(context).client;
+
+    return ValueListenableBuilder<ConnectionStatus>(
+      valueListenable: _client.wsConnectionStatus,
+      builder: (context, status, _) {
+        String statusString = '';
+        bool showStatus = true;
+
+        switch (status) {
+          case ConnectionStatus.connected:
+            statusString = 'Connected';
+            showStatus = false;
+            break;
+          case ConnectionStatus.connecting:
+            statusString = 'Reconnecting...';
+            break;
+          case ConnectionStatus.disconnected:
+            statusString = 'Disconnected';
+            break;
+        }
+
+        return InfoTile(
+          showMessage: showConnectionStateTile ? showStatus : false,
+          message: statusString,
+          child: AppBar(
             brightness: Theme.of(context).brightness,
             elevation: 1,
             leading: showBackButton
@@ -91,8 +119,10 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
                     showUnreads: true,
                   )
                 : SizedBox(),
-      backgroundColor:
+            backgroundColor: StreamChatTheme.of(context)
-          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+                .channelTheme
+                .channelHeaderTheme
+                .color,
             actions: <Widget>[
               Padding(
                 padding: const EdgeInsets.only(right: 10.0),
@@ -123,13 +153,17 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
                     ChannelInfo(
                       showTypingIndicator: showTypingIndicator,
                       channel: channel,
-                textStyle:
+                      textStyle: StreamChatTheme.of(context)
-                    StreamChatTheme.of(context).channelPreviewTheme.subtitle,
+                          .channelPreviewTheme
+                          .subtitle,
                     ),
                   ],
                 ),
               ),
             ),
+          ),
+        );
+      },
     );
   }
 

packages/flutter_widgets/lib/src/channel_list_header.dart

@@ -6,6 +6,7 @@ import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import 'info_tile.dart';
 import 'stream_chat.dart';
 
 typedef _TitleBuilder = Widget Function(
@@ -53,6 +54,7 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
     this.titleBuilder,
     this.onUserAvatarTap,
     this.onNewChatButtonTap,
+    this.showConnectionStateTile = false,
   }) : super(key: key);
 
   /// Pass this if you don't have a [Client] in your widget tree.
@@ -68,21 +70,48 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
   /// Callback to call when pressing the new chat button.
   final VoidCallback onNewChatButtonTap;
 
+  final bool showConnectionStateTile;
+
   @override
   Widget build(BuildContext context) {
     final _client = client ?? StreamChat.of(context).client;
     final user = _client.state.user;
-    return AppBar(
+    return ValueListenableBuilder<ConnectionStatus>(
+      valueListenable: _client.wsConnectionStatus,
+      builder: (context, status, child) {
+        String statusString = '';
+        bool showStatus = true;
+
+        switch (status) {
+          case ConnectionStatus.connected:
+            statusString = 'Connected';
+            showStatus = false;
+            break;
+          case ConnectionStatus.connecting:
+            statusString = 'Reconnecting...';
+            break;
+          case ConnectionStatus.disconnected:
+            statusString = 'Disconnected';
+            break;
+        }
+
+        return InfoTile(
+          showMessage: showConnectionStateTile ? showStatus : false,
+          message: statusString,
+          child: AppBar(
             brightness: Theme.of(context).brightness,
             elevation: 1,
-      backgroundColor:
+            backgroundColor: StreamChatTheme.of(context)
-          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+                .channelTheme
+                .channelHeaderTheme
+                .color,
             centerTitle: true,
             leading: Center(
               child: UserAvatar(
                 user: user,
                 showOnlineStatus: false,
-          onTap: onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
+                onTap:
+                    onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
                 borderRadius: BorderRadius.circular(20),
                 constraints: BoxConstraints.tightFor(
                   height: 40,
@@ -99,7 +128,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                       var color;
                       switch (status) {
                         case ConnectionStatus.connected:
-                    color = StreamChatTheme.of(context).colorTheme.accentBlue;
+                          color =
+                              StreamChatTheme.of(context).colorTheme.accentBlue;
                           break;
                         case ConnectionStatus.connecting:
                           color = Colors.grey;
@@ -121,9 +151,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                 ),
               )
             ],
-      title: ValueListenableBuilder<ConnectionStatus>(
+            title: Builder(
-        valueListenable: _client.wsConnectionStatus,
+              builder: (context) {
-        builder: (context, status, child) {
                 if (titleBuilder != null) {
                   return titleBuilder(context, status, _client);
                 }
@@ -139,6 +168,9 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                 }
               },
             ),
+          ),
+        );
+      },
     );
   }
 

packages/flutter_widgets/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

packages/flutter_widgets/lib/src/info_tile.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_portal/flutter_portal.dart';
+import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+
+class InfoTile extends StatelessWidget {
+  final String message;
+  final Widget child;
+  final bool showMessage;
+  final Alignment tileAnchor;
+  final Alignment childAnchor;
+  final TextStyle textStyle;
+  final Color backgroundColor;
+
+  InfoTile(
+      {this.message,
+      this.child,
+      this.showMessage,
+      this.tileAnchor,
+      this.childAnchor,
+      this.textStyle,
+      this.backgroundColor});
+
+  @override
+  Widget build(BuildContext context) {
+    return PortalEntry(
+      visible: showMessage,
+      portalAnchor: tileAnchor ?? Alignment.topCenter,
+      childAnchor: childAnchor ?? Alignment.bottomCenter,
+      portal: Container(
+        height: 25.0,
+        color: backgroundColor ??
+            StreamChatTheme.of(context).colorTheme.grey.withOpacity(0.9),
+        child: Center(
+          child: Text(
+            message,
+            style: textStyle ??
+                StreamChatTheme.of(context).textTheme.body.copyWith(
+                      color: Colors.white,
+                    ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ),
+      child: child,
+    );
+  }
+}

packages/flutter_widgets/lib/src/message_actions_modal.dart

@@ -84,6 +84,11 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
         ? 1
         : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
 
+    return TweenAnimationBuilder<double>(
+      tween: Tween(begin: 0.0, end: 1.0),
+      duration: Duration(milliseconds: 300),
+      curve: Curves.easeInOutBack,
+      builder: (context, val, snapshot) {
         return GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () => Navigator.maybePop(context),
@@ -100,7 +105,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                   ),
                 ),
               ),
-          Center(
+              Transform.scale(
+                scale: val,
+                child: Center(
                   child: SingleChildScrollView(
                     child: Padding(
                       padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -110,26 +117,25 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                             : CrossAxisAlignment.start,
                         children: <Widget>[
                           if (widget.showReactions &&
-                        (widget.message.status == MessageSendingStatus.SENT ||
+                              (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
-                                : (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
+                                          ? 0.0
+                                          : (1.0 - divFactor))
+                                      : (divFactor > 1.0
+                                          ? 0.0
+                                          : -(1.0 - divFactor)),
                                   0.0),
                               child: ReactionPicker(
                                 message: widget.message,
                                 messageTheme: widget.messageTheme,
                               ),
                             ),
-                    TweenAnimationBuilder<double>(
+                          IgnorePointer(
-                        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: widget.reverse,
@@ -156,23 +162,9 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                               shape: widget.messageShape,
                             ),
                           ),
-                          );
+                          Padding(
-                        }),
-                    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: widget.reverse
-                                ? Alignment.topRight
-                                : Alignment.topLeft,
-                            child: Padding(
                             padding: EdgeInsets.only(
-                                right: widget.reverse ? 16 : 0,
+                              right: widget.reverse ? 8 : 0,
                               left: widget.reverse ? 0 : 48,
                             ),
                             child: SizedBox(
@@ -197,15 +189,13 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                                       if (widget.showReplyMessage &&
                                           (widget.message.status ==
                                                   MessageSendingStatus.SENT ||
-                                                widget.message.status ==
+                                              widget.message.status == null) &&
-                                                    null) &&
                                           widget.message.parentId == null)
                                         _buildReplyButton(context),
                                       if (widget.showThreadReplyMessage &&
                                           (widget.message.status ==
                                                   MessageSendingStatus.SENT ||
-                                                widget.message.status ==
+                                              widget.message.status == null) &&
-                                                    null) &&
                                           widget.message.parentId == null)
                                         _buildThreadReplyButton(context),
                                       if (widget.showResendMessage)
@@ -224,15 +214,16 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
                               ),
                             ),
                           ),
+                        ],
+                      ),
+                    ),
+                  ),
+                ),
+              ),
+            ],
+          ),
         );
-                        })
+      },
-                  ],
-                ),
-              ),
-            ),
-          ),
-        ],
-      ),
     );
   }
 
@@ -457,9 +448,7 @@ class _MessageActionsModalState extends State<MessageActionsModal> {
           ),
         ],
       ),
-      onTap: () {
+      onTap: () => _showFlagDialog(),
-        _showFlagDialog();
-      },
     );
   }
 

packages/flutter_widgets/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,8 +360,10 @@ class MessageInputState extends State<MessageInput> {
     );
   }
 
-  AnimatedCrossFade _animateSendButton(BuildContext context) {
+  Widget _animateSendButton(BuildContext context) {
-    return AnimatedCrossFade(
+    return Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: AnimatedCrossFade(
         crossFadeState: ((_messageIsPresent || _attachments.isNotEmpty) &&
                 _attachments.every((a) => a.uploaded == true))
             ? CrossFadeState.showFirst
@@ -368,21 +372,19 @@ class MessageInputState extends State<MessageInput> {
         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 ==
+                StreamChannel.of(context)
+                        .channel
+                        ?.config
+                        ?.commands
+                        ?.isNotEmpty ==
                     true)
               _buildCommandButton(),
-        ],
+          ].insertBetween(const SizedBox(width: 8)),
         ),
         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,24 +433,26 @@ class MessageInputState extends State<MessageInput> {
               _buildAttachments(),
               LimitedBox(
                 maxHeight: widget.maxHeight,
+                child: SizedBox(
+                  height: 40,
                   child: TextField(
                     key: Key('messageInputText'),
                     enabled: _inputEnabled,
                     minLines: null,
                     maxLines: null,
-                  onSubmitted: (_) {
+                    onSubmitted: (_) => sendMessage(),
-                    sendMessage();
-                  },
                     keyboardType: widget.keyboardType,
                     controller: textEditingController,
                     focusNode: _focusNode,
-                  style: Theme.of(context).textTheme.bodyText2,
+                    style: theme.textTheme.body,
                     autofocus: false,
                     textAlignVertical: TextAlignVertical.center,
                     decoration: InputDecoration(
                       isDense: true,
                       hintText: _getHint(),
-                    prefixText: _commandEnabled ? null : '   ',
+                      hintStyle: theme.textTheme.body.copyWith(
+                        color: theme.colorTheme.grey,
+                      ),
                       border: OutlineInputBorder(
                           borderSide: BorderSide(color: Colors.transparent)),
                       focusedBorder: OutlineInputBorder(
@@ -457,24 +463,18 @@ class MessageInputState extends State<MessageInput> {
                           borderSide: BorderSide(color: Colors.transparent)),
                       disabledBorder: OutlineInputBorder(
                           borderSide: BorderSide(color: Colors.transparent)),
-                    contentPadding: EdgeInsets.symmetric(
+                      contentPadding: const EdgeInsets.fromLTRB(16, 12, 13, 11),
-                      horizontal: 16,
-                      vertical: 13,
-                    ),
                       prefixIcon: _commandEnabled
-                        ? Padding(
+                          ? Container(
-                            padding:
+                              decoration: BoxDecoration(
-                                const EdgeInsets.symmetric(horizontal: 8.0),
+                                borderRadius: BorderRadius.circular(12),
-                            child: Chip(
+                                color: theme.colorTheme.accentBlue,
-                              backgroundColor: StreamChatTheme.of(context)
+                              ),
-                                  .colorTheme
+                              height: 24,
-                                  .accentBlue,
+                              margin: const EdgeInsets.all(8.0),
-                              padding: EdgeInsets.zero,
+                              padding: const EdgeInsets.only(right: 8, left: 4),
-                              labelPadding:
+                              child: Row(
-                                  EdgeInsets.symmetric(horizontal: 8.0),
-                              label: Row(
                                 mainAxisSize: MainAxisSize.min,
-                                mainAxisAlignment: MainAxisAlignment.center,
                                 children: [
                                   StreamSvgIcon.lightning(
                                     color: Colors.white,
@@ -484,20 +484,24 @@ class MessageInputState extends State<MessageInput> {
                                     _chosenCommand?.name?.toUpperCase() ?? '',
                                     style: StreamChatTheme.of(context)
                                         .textTheme
-                                        .footnote
+                                        .footnoteBold
                                         .copyWith(
                                           color: Colors.white,
                                         ),
                                   ),
                                 ],
                               ),
-                            ),
                             )
                           : null,
                       suffixIcon: _commandEnabled
                           ? IconButton(
                               icon: StreamSvgIcon.close_small(),
                               splashRadius: 24,
+                              padding: const EdgeInsets.all(0),
+                              constraints: BoxConstraints.tightFor(
+                                height: 24,
+                                width: 24,
+                              ),
                               onPressed: () {
                                 setState(() => _commandEnabled = false);
                               },
@@ -506,6 +510,7 @@ class MessageInputState extends State<MessageInput> {
                     ),
                     textCapitalization: TextCapitalization.sentences,
                   ),
+                ),
               )
             ],
           ),
@@ -1515,28 +1520,28 @@ 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: Padding(
+        padding: const EdgeInsets.fromLTRB(8, 8, 8, 0),
         child: QuotedMessageWidget(
           reverse: true,
           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: [
         if (_attachments.any((e) => e.attachment?.type == 'file'))
           LimitedBox(
@@ -1548,8 +1553,7 @@ class MessageInputState extends State<MessageInput> {
                   .where((e) => e.attachment?.type == 'file')
                   .map(
                     (e) => Padding(
-                            padding:
+                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
-                                const EdgeInsets.symmetric(horizontal: 8.0),
                       child: ClipRRect(
                         borderRadius: BorderRadius.circular(10),
                         clipBehavior: Clip.antiAlias,
@@ -1565,8 +1569,7 @@ class MessageInputState extends State<MessageInput> {
                             padding: const EdgeInsets.all(8.0),
                             child: InkWell(
                               child: CircleAvatar(
-                                      backgroundColor:
+                                backgroundColor: StreamChatTheme.of(context)
-                                          StreamChatTheme.of(context)
                                     .colorTheme
                                     .black
                                     .withOpacity(0.6),
@@ -1620,10 +1623,8 @@ class MessageInputState extends State<MessageInput> {
                                 : Positioned.fill(
                                     child: Center(
                                       child: Padding(
-                                              padding:
+                                        padding: const EdgeInsets.all(16.0),
-                                                  const EdgeInsets.all(16.0),
+                                        child: CircularProgressIndicator(),
-                                              child:
-                                                  CircularProgressIndicator(),
                                       ),
                                     ),
                                   ),
@@ -1746,9 +1747,7 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildCommandButton() {
-    return Padding(
+    return IconButton(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
-      child: IconButton(
       icon: StreamSvgIcon.lightning(
         color: _commandsOverlay != null
             ? StreamChatTheme.of(context).colorTheme.accentBlue
@@ -1782,14 +1781,11 @@ class MessageInputState extends State<MessageInput> {
           });
         }
       },
-      ),
     );
   }
 
   Widget _buildAttachmentButton() {
-    return Padding(
+    return IconButton(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
-      child: IconButton(
       icon: StreamSvgIcon.attach(
         color: _openFilePickerSection
             ? StreamChatTheme.of(context).colorTheme.accentBlue
@@ -1819,7 +1815,6 @@ class MessageInputState extends State<MessageInput> {
           showAttachmentModal();
         }
       },
-      ),
     );
   }
 
@@ -2118,21 +2113,15 @@ class MessageInputState extends State<MessageInput> {
   }
 
   Widget _buildIdleSendButton(BuildContext context) {
-    return Padding(
+    return StreamSvgIcon(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
-      child: StreamSvgIcon(
       assetName: _getIdleSendIcon(),
       color: StreamChatTheme.of(context).colorTheme.greyGainsboro,
-      ),
     );
   }
 
   Widget _buildSendButton(BuildContext context) {
-    return Padding(
+    return IconButton(
-      padding: const EdgeInsets.symmetric(vertical: 12, horizontal: 8),
-      child: IconButton(
       onPressed: sendMessage,
-        visualDensity: VisualDensity.compact,
       padding: const EdgeInsets.all(0),
       splashRadius: 24,
       constraints: BoxConstraints.tightFor(
@@ -2143,7 +2132,6 @@ class MessageInputState extends State<MessageInput> {
         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);
         }

packages/flutter_widgets/lib/src/message_list_view.dart

@@ -7,6 +7,7 @@ import 'package:jiffy/jiffy.dart';
 import 'package:rxdart/rxdart.dart';
 import 'package:scrollable_positioned_list/scrollable_positioned_list.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/info_tile.dart';
 import 'package:stream_chat_flutter/src/lazy_load_scroll_view.dart';
 import 'package:stream_chat_flutter/src/message_widget.dart';
 import 'package:stream_chat_flutter/src/stream_svg_icon.dart';
@@ -17,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,
@@ -124,6 +126,7 @@ class MessageListView extends StatefulWidget {
     this.highlightInitialMessage = false,
     this.messageHighlightColor,
     this.onShowMessage,
+    this.showConnectionStateTile = false,
   }) : super(key: key);
 
   /// Function used to build a custom message widget
@@ -181,6 +184,8 @@ class MessageListView extends StatefulWidget {
 
   final ShowMessageCallback onShowMessage;
 
+  final bool showConnectionStateTile;
+
   @override
   _MessageListViewState createState() => _MessageListViewState();
 }
@@ -297,11 +302,38 @@ class _MessageListViewState extends State<MessageListView> {
           }
 
           _messageListLength = newMessagesListLength;
+          final _client = StreamChat.of(context).client;
 
           return Stack(
             alignment: Alignment.center,
             children: [
-              LazyLoadScrollView(
+              ValueListenableBuilder<ConnectionStatus>(
+                  valueListenable: _client.wsConnectionStatus,
+                  builder: (context, status, _) {
+                    String statusString = '';
+                    bool showStatus = true;
+
+                    switch (status) {
+                      case ConnectionStatus.connected:
+                        statusString = 'Connected';
+                        showStatus = false;
+                        break;
+                      case ConnectionStatus.connecting:
+                        statusString = 'Reconnecting...';
+                        break;
+                      case ConnectionStatus.disconnected:
+                        statusString = 'Disconnected';
+                        break;
+                    }
+
+                    return InfoTile(
+                      showMessage:
+                          widget.showConnectionStateTile ? showStatus : false,
+                      tileAnchor: Alignment.topCenter,
+                      childAnchor: Alignment.topCenter,
+                      message: statusString,
+                      child: LazyLoadScrollView(
+                        child: LazyLoadScrollView(
                           onStartOfPage: () async {
                             _inBetweenList = false;
                             if (!_upToDate) {
@@ -334,28 +366,53 @@ class _MessageListViewState extends State<MessageListView> {
                             physics: widget.scrollPhysics,
                             itemScrollController: _scrollController,
                             reverse: true,
-                  itemCount:
+                            itemCount: messages.length +
-                      messages.length + 2 + (_isThreadConversation ? 1 : 0),
+                                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);
+                              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,
+                                    ),
+                                  ),
+                                );
+                              }
+
                               final message = messages[i];
                               final nextMessage = messages[i - 1];
                               if (!Jiffy(message.createdAt.toLocal()).isSame(
                                 nextMessage.createdAt.toLocal(),
                                 Units.DAY,
                               )) {
-                      final divider = widget.dateDividerBuilder != null
+                                final divider =
+                                    widget.dateDividerBuilder != null
                                         ? widget.dateDividerBuilder(
                                             nextMessage.createdAt.toLocal(),
                                           )
                                         : DateDivider(
-                              dateTime: nextMessage.createdAt.toLocal(),
+                                            dateTime:
+                                                nextMessage.createdAt.toLocal(),
                                           );
                                 return Padding(
-                        padding: const EdgeInsets.symmetric(vertical: 12.0),
+                                  padding: const EdgeInsets.symmetric(
+                                      vertical: 12.0),
                                   child: divider,
                                 );
                               }
@@ -385,30 +442,8 @@ class _MessageListViewState extends State<MessageListView> {
                                     widget.parentMessage,
                                   );
                                 } else {
-                        return Column(
+                                  return buildParentMessage(
-                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                                      widget.parentMessage);
-                          children: <Widget>[
-                            buildParentMessage(widget.parentMessage),
-                            Container(
-                              decoration: BoxDecoration(
-                                gradient: StreamChatTheme.of(context)
-                                    .colorTheme
-                                    .bgGradient,
-                              ),
-                              child: Padding(
-                                padding: const EdgeInsets.all(8.0),
-                                child: Text(
-                                  '${widget.parentMessage.replyCount} ${widget.parentMessage.replyCount == 1 ? 'Reply' : 'Replies'}',
-                                  textAlign: TextAlign.center,
-                                  style: StreamChatTheme.of(context)
-                                      .channelTheme
-                                      .channelHeaderTheme
-                                      .lastMessageAt,
-                                ),
-                              ),
-                            ),
-                          ],
-                        );
                                 }
                               }
                               if (i == messages.length + 1) {
@@ -444,7 +479,8 @@ class _MessageListViewState extends State<MessageListView> {
                               } else {
                                 if (widget.messageBuilder != null) {
                                   messageWidget = Builder(
-                          key: ValueKey<String>('MESSAGE-${message.id}'),
+                                    key: ValueKey<String>(
+                                        'MESSAGE-${message.id}'),
                                     builder: (context) => widget.messageBuilder(
                                         context,
                                         MessageDetails(
@@ -456,13 +492,17 @@ class _MessageListViewState extends State<MessageListView> {
                                         messages),
                                   );
                                 } else {
-                        messageWidget = buildMessage(message, messages, i);
+                                  messageWidget =
+                                      buildMessage(message, messages, i);
                                 }
                               }
                               return messageWidget;
                             },
                           ),
                         ),
+                      ),
+                    );
+                  }),
               if (widget.showScrollToBottom) _buildScrollToBottom(),
               Positioned(
                 top: 20.0,
@@ -618,7 +658,7 @@ class _MessageListViewState extends State<MessageListView> {
           );
         }
         if (!snapshot.data) {
-            if (direction == QueryDirection.top) {
+          if (!_isThreadConversation && direction == QueryDirection.top) {
             return Container(
               height: 52,
               width: double.infinity,
@@ -632,7 +672,8 @@ class _MessageListViewState extends State<MessageListView> {
             child: const CircularProgressIndicator(),
           ),
         );
-        });
+      },
+    );
   }
 
   Widget _buildTopMessage(
@@ -711,6 +752,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,
@@ -724,12 +766,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(
@@ -738,7 +775,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
@@ -813,8 +850,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}'),
@@ -852,20 +900,27 @@ class _MessageListViewState extends State<MessageListView> {
       showDeleteMessage: isMyMessage,
       showThreadReplyMessage: !isThreadMessage,
       showFlagButton: !isMyMessage,
-      borderSide: isMyMessage ? BorderSide.none : null,
+      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),
       ),

packages/flutter_widgets/lib/src/message_reactions_modal.dart

@@ -56,6 +56,11 @@ class MessageReactionsModal extends StatelessWidget {
         ? 1
         : (roughSentenceSize == 0 ? 1 : (roughSentenceSize / roughMaxSize));
 
+    return TweenAnimationBuilder<double>(
+      tween: Tween(begin: 0.0, end: 1.0),
+      duration: Duration(milliseconds: 300),
+      curve: Curves.easeInOutBack,
+      builder: (context, val, snapshot) {
         return GestureDetector(
           behavior: HitTestBehavior.translucent,
           onTap: () => Navigator.maybePop(context),
@@ -72,7 +77,9 @@ class MessageReactionsModal extends StatelessWidget {
                   ),
                 ),
               ),
-          Center(
+              Transform.scale(
+                scale: val,
+                child: Center(
                   child: SingleChildScrollView(
                     child: Padding(
                       padding: const EdgeInsets.symmetric(vertical: 8.0),
@@ -86,21 +93,19 @@ class MessageReactionsModal extends StatelessWidget {
                             Align(
                               alignment: Alignment(
                                   user.id == message.user.id
-                                ? (divFactor > 1.0 ? 0.0 : (1.0 - divFactor))
+                                      ? (divFactor > 1.0
-                                : (divFactor > 1.0 ? 0.0 : -(1.0 - divFactor)),
+                                          ? 0.0
+                                          : (1.0 - divFactor))
+                                      : (divFactor > 1.0
+                                          ? 0.0
+                                          : -(1.0 - divFactor)),
                                   0.0),
                               child: ReactionPicker(
                                 message: message,
                                 messageTheme: messageTheme,
                               ),
                             ),
-                    TweenAnimationBuilder<double>(
+                          IgnorePointer(
-                        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,
@@ -125,8 +130,6 @@ class MessageReactionsModal extends StatelessWidget {
                                       message.status == null),
                             ),
                           ),
-                          );
-                        }),
                           if (message.latestReactions?.isNotEmpty == true)
                             _buildReactionCard(context),
                         ],
@@ -134,9 +137,12 @@ class MessageReactionsModal extends StatelessWidget {
                     ),
                   ),
                 ),
+              ),
             ],
           ),
         );
+      },
+    );
   }
 
   Padding _buildReactionCard(BuildContext context) {
@@ -191,14 +197,7 @@ 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),
-        duration: Duration(milliseconds: 300),
-        curve: Curves.easeInOut,
-        builder: (context, val, snapshot) {
-          return Transform.scale(
-            scale: val,
-            child: ConstrainedBox(
       constraints: BoxConstraints.loose(Size(
         64,
         98,
@@ -221,15 +220,13 @@ class MessageReactionsModal extends StatelessWidget {
               ),
               Positioned(
                 child: Align(
-                          alignment: reverse
+                  alignment:
-                              ? Alignment.centerRight
+                      reverse ? Alignment.centerRight : Alignment.centerLeft,
-                              : Alignment.centerLeft,
                   child: ReactionBubble(
                     reactions: [reaction],
                     flipTail: !reverse,
                     borderColor: messageTheme.reactionsBorderColor,
-                            backgroundColor:
+                    backgroundColor: messageTheme.reactionsBackgroundColor,
-                                messageTheme.reactionsBackgroundColor,
                     highlightOwnReactions: false,
                   ),
                 ),
@@ -247,8 +244,6 @@ class MessageReactionsModal extends StatelessWidget {
           ),
         ],
       ),
-            ),
     );
-        });
   }
 }

packages/flutter_widgets/lib/src/message_search_list_view.dart

@@ -2,6 +2,7 @@ import 'dart:convert';
 
 import 'package:flutter/material.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/info_tile.dart';
 import 'package:stream_chat_flutter/src/message_search_item.dart';
 
 import '../stream_chat_flutter.dart';
@@ -63,6 +64,7 @@ class MessageSearchListView extends StatefulWidget {
     this.onItemTap,
     this.showResultCount = true,
     this.pullToRefresh = true,
+    this.showErrorTile = false,
   }) : super(key: key);
 
   /// Message String to search on
@@ -111,6 +113,8 @@ class MessageSearchListView extends StatefulWidget {
   /// Set it to false to disable the pull-to-refresh widget
   final bool pullToRefresh;
 
+  final bool showErrorTile;
+
   @override
   _MessageSearchListViewState createState() => _MessageSearchListViewState();
 }
@@ -205,7 +209,12 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
               message = 'Check your connection and retry';
             }
           }
-          return Center(
+          return InfoTile(
+            showMessage: widget.showErrorTile,
+            tileAnchor: Alignment.topCenter,
+            childAnchor: Alignment.topCenter,
+            message: 'An error occurred.',
+            child: Center(
               child: Column(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
@@ -241,6 +250,7 @@ class _MessageSearchListViewState extends State<MessageSearchListView> {
                   ),
                 ],
               ),
+            ),
           );
         }
 

packages/flutter_widgets/lib/src/message_widget.dart

@@ -272,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 ||
@@ -385,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
@@ -412,6 +415,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                                                       children: <Widget>[
                                                         if (hasQuotedMessage)
                                                           _buildQuotedMessage(),
+                                                        if (hasNonUrlAttachments)
                                                           ..._parseAttachments(
                                                               context),
                                                         if (widget.message.text
@@ -428,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),
@@ -490,13 +494,21 @@ class _MessageWidgetState extends State<MessageWidget> {
             widget.onQuotedMessageTap != null
         ? () => widget.onQuotedMessageTap(widget.message.quotedMessageId)
         : null;
-    return QuotedMessageWidget(
+    return Padding(
+      padding: EdgeInsets.only(
+        right: 8,
+        left: 8,
+        top: 8,
+        bottom: hasNonUrlAttachments ? 8 : 0,
+      ),
+      child: QuotedMessageWidget(
         onTap: onTap,
         message: widget.message.quotedMessage,
         messageTheme: isMyMessage
             ? StreamChatTheme.of(context).otherMessageTheme
             : StreamChatTheme.of(context).ownMessageTheme,
         reverse: widget.reverse,
+      ),
     );
   }
 
@@ -927,7 +939,7 @@ class _MessageWidgetState extends State<MessageWidget> {
                         ? widget.messageTheme.copyWith(
                             messageText:
                                 widget.messageTheme.messageText.copyWith(
-                            fontSize: 40,
+                            fontSize: 42,
                           ))
                         : widget.messageTheme,
                   ),
@@ -942,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) {

packages/flutter_widgets/lib/src/quoted_message_widget.dart

@@ -109,23 +109,20 @@ class QuotedMessageWidget extends StatelessWidget {
   Widget build(BuildContext context) {
     return InkWell(
       onTap: onTap,
-      child: Padding(
-        padding: const EdgeInsets.only(top: 8, right: 4, left: 8),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisSize: MainAxisSize.min,
         children: [
           Flexible(child: _buildMessage(context)),
-            SizedBox(width: 4),
+          SizedBox(width: 8),
           _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,8 +244,6 @@ class QuotedMessageWidget extends StatelessWidget {
     return Transform(
       transform: Matrix4.rotationY(reverse ? pi : 0),
       alignment: Alignment.center,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 4.0),
       child: UserAvatar(
         user: message.user,
         constraints: BoxConstraints.tightFor(
@@ -256,7 +252,6 @@ class QuotedMessageWidget extends StatelessWidget {
         ),
         showOnlineStatus: false,
       ),
-      ),
     );
   }
 

packages/flutter_widgets/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,44 +52,64 @@ 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
+                      .map<Widget>((reactionIcon) {
                         final ownReactionIndex = widget.message.ownReactions
                                 ?.indexWhere((reaction) =>
                                     reaction.type == reactionIcon.type) ??
                             -1;
                         var index = reactionIcons.indexOf(reactionIcon);
 
-                    return IconButton(
+                        return ConstrainedBox(
-                      iconSize: 24,
+                          constraints: BoxConstraints.tightFor(
-                      icon: AnimatedBuilder(
+                            height: 24,
+                            width: 24,
+                          ),
+                          child: RawMaterialButton(
+                            elevation: 0,
+                            padding: const EdgeInsets.all(0),
+                            clipBehavior: Clip.none,
+                            shape: ContinuousRectangleBorder(
+                              borderRadius: BorderRadius.circular(16),
+                            ),
+                            constraints: BoxConstraints.tightFor(
+                              height: 24,
+                              width: 24,
+                            ),
+                            child: AnimatedBuilder(
                                 animation: animations[index],
                                 builder: (context, val) {
-                            return Transform(
+                                  return Transform.scale(
-                              transform: Matrix4.identity()
+                                    alignment: Alignment.center,
-                                ..scale(animations[index].value,
+                                    scale: animations[index].value,
-                                    animations[index].value)
-                                ..rotateZ(1.0 - animations[index].value),
                                     child: StreamSvgIcon(
                                       assetName: reactionIcon.assetName,
-                                height: animations[index].value * 24.0,
+                                      height: max(
-                                width: animations[index].value * 24.0,
+                                        0,
+                                        animations[index].value * 24.0,
+                                      ),
+                                      width: max(
+                                        0,
+                                        animations[index].value * 24.0,
+                                      ),
                                       color: ownReactionIndex != -1
                                           ? StreamChatTheme.of(context)
                                               .colorTheme
@@ -114,8 +134,13 @@ class _ReactionPickerState extends State<ReactionPicker>
                                 );
                               }
                             },
+                          ),
                         );
-                  }).toList(),
+                      })
+                      .insertBetween(SizedBox(
+                        width: 16,
+                      ))
+                      .toList(),
                 ),
               ),
             ),

packages/flutter_widgets/lib/src/stream_chat.dart

@@ -3,6 +3,7 @@ import 'dart:async';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_app_badger/flutter_app_badger.dart';
+import 'package:flutter_portal/flutter_portal.dart';
 import 'package:stream_chat/stream_chat.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 
@@ -67,7 +68,8 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
   @override
   Widget build(BuildContext context) {
     final theme = _getTheme(context, widget.streamChatThemeData);
-    return StreamChatTheme(
+    return Portal(
+      child: StreamChatTheme(
         data: theme,
         child: Builder(
           builder: (context) {
@@ -84,6 +86,7 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
             );
           },
         ),
+      ),
     );
   }
 

packages/flutter_widgets/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(
@@ -293,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;
-}

packages/flutter_widgets/lib/stream_chat_flutter.dart

@@ -46,3 +46,4 @@ export 'src/unread_indicator.dart';
 export 'src/option_list_tile.dart';
 export 'src/channel_file_display_screen.dart';
 export 'src/channel_media_display_screen.dart';
+export 'src/info_tile.dart';

packages/flutter_widgets/pubspec.yaml

@@ -28,7 +28,7 @@ dependencies:
   file_picker: ^2.1.5
   image_picker: ^0.6.7+17
   flutter_keyboard_visibility: ^4.0.2
-  stream_chat: ^0.2.23+1
+  stream_chat: ^0.2.23+2
   mime: ^0.9.7
   video_compress: ^2.1.1
   visibility_detector: ^0.1.5