Merge branches 'feature/new-ui' and 'qa4-fixes' of github.com:GetStream/stream-chat-flutter into qa4-fixes

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();
+                  },
+                ),
+              ],
+            ),
+          ],
+        );
+      },
+    );
+  }
 }

example/lib/main.dart

@@ -763,7 +763,7 @@ class _ChannelPageState extends State<ChannelPage> {
   }
 }
 
-class ThreadPage extends StatelessWidget {
+class ThreadPage extends StatefulWidget {
   final Message parent;
   final int initialScrollIndex;
   final double initialAlignment;
@@ -775,25 +775,54 @@ class ThreadPage extends StatelessWidget {
     this.initialAlignment,
   }) : super(key: key);
 
+  @override
+  _ThreadPageState createState() => _ThreadPageState();
+}
+
+class _ThreadPageState extends State<ThreadPage> {
+  Message _quotedMessage;
+  FocusNode _focusNode = FocusNode();
+
+  @override
+  void dispose() {
+    _focusNode.dispose();
+    super.dispose();
+  }
+
+  void _reply(Message message) {
+    setState(() => _quotedMessage = message);
+    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
+      _focusNode.requestFocus();
+    });
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: StreamChatTheme.of(context).colorTheme.whiteSnow,
       appBar: ThreadHeader(
-        parent: parent,
+        parent: widget.parent,
       ),
       body: Column(
         children: <Widget>[
           Expanded(
             child: MessageListView(
-              parentMessage: parent,
+              parentMessage: widget.parent,
-              initialScrollIndex: initialScrollIndex,
+              initialScrollIndex: widget.initialScrollIndex,
-              initialAlignment: initialAlignment,
+              initialAlignment: widget.initialAlignment,
+              onMessageSwiped: _reply,
+              onReplyTap: _reply,
             ),
           ),
-          if (parent.type != 'deleted')
+          if (widget.parent.type != 'deleted')
             MessageInput(
-              parentMessage: parent,
+              parentMessage: widget.parent,
+              focusNode: _focusNode,
+              quotedMessage: _quotedMessage,
+              onQuotedMessageCleared: () {
+                setState(() => _quotedMessage = null);
+                _focusNode.unfocus();
+              },
             ),
         ],
       ),

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> {
                 ),
               ),
             );
+          }),
+    );
   }
 }

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> {
                 ),
               ),
             );
+          }),
+    );
   }
 }
 

example/pubspec.yaml

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

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,
                     ),
                   ],
                 ),
               ),
             ),
+          ),
+        );
+      },
     );
   }
 

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 {
                 }
               },
             ),
+          ),
+        );
+      },
     );
   }
 

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,
+    );
+  }
+}

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';
@@ -125,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
@@ -182,6 +184,8 @@ class MessageListView extends StatefulWidget {
 
   final ShowMessageCallback onShowMessage;
 
+  final bool showConnectionStateTile;
+
   @override
   _MessageListViewState createState() => _MessageListViewState();
 }
@@ -298,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) {
@@ -335,17 +366,20 @@ 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 == 0) return SizedBox(height: 30);
                               if (i == messages.length + 1) {
-                      final replyCount = widget.parentMessage.replyCount;
+                                final replyCount =
+                                    widget.parentMessage.replyCount;
                                 return Container(
                                   decoration: BoxDecoration(
-                          gradient:
+                                    gradient: StreamChatTheme.of(context)
-                              StreamChatTheme.of(context).colorTheme.bgGradient,
+                                        .colorTheme
+                                        .bgGradient,
                                   ),
                                   child: Padding(
                                     padding: const EdgeInsets.all(8.0),
@@ -367,15 +401,18 @@ class _MessageListViewState extends State<MessageListView> {
                                 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,
                                 );
                               }
@@ -405,7 +442,8 @@ class _MessageListViewState extends State<MessageListView> {
                                     widget.parentMessage,
                                   );
                                 } else {
-                        return buildParentMessage(widget.parentMessage);
+                                  return buildParentMessage(
+                                      widget.parentMessage);
                                 }
                               }
                               if (i == messages.length + 1) {
@@ -441,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(
@@ -453,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,

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> {
                   ),
                 ],
               ),
+            ),
           );
         }
 

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 {
             );
           },
         ),
+      ),
     );
   }
 

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';

pubspec.yaml

@@ -28,7 +28,7 @@ dependencies:
   file_picker: ^2.0.12
   image_picker: ^0.6.7+2
   flutter_keyboard_visibility: ^4.0.2
-  stream_chat: ^0.2.23
+  stream_chat: ^0.2.23+2
   mime: ^0.9.6+3
   video_compress: ^2.1.1
   visibility_detector: ^0.1.5