feat: Added info tile and wrapped channel list and channel header

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';
@@ -82,7 +83,31 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   @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 = 'Connecting';
+            break;
+          case ConnectionStatus.disconnected:
+            statusString = 'Disconnected';
+            break;
+        }
+
+        return InfoTile(
+          showMessage: showStatus,
+          message: statusString,
+          child: AppBar(
             brightness: Theme.of(context).brightness,
             elevation: 1,
             leading: showBackButton
@@ -91,8 +116,10 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
                     showUnreads: true,
                   )
                 : SizedBox(),
-      backgroundColor:
-          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+            backgroundColor: StreamChatTheme.of(context)
+                .channelTheme
+                .channelHeaderTheme
+                .color,
             actions: <Widget>[
               Padding(
                 padding: const EdgeInsets.only(right: 10.0),
@@ -123,13 +150,17 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
                     ChannelInfo(
                       showTypingIndicator: showTypingIndicator,
                       channel: channel,
-                textStyle:
-                    StreamChatTheme.of(context).channelPreviewTheme.subtitle,
+                      textStyle: StreamChatTheme.of(context)
+                          .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(
@@ -72,17 +73,42 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
   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 = 'Connecting';
+            break;
+          case ConnectionStatus.disconnected:
+            statusString = 'Disconnected';
+            break;
+        }
+
+        return InfoTile(
+          showMessage: showStatus,
+          message: statusString,
+          child: AppBar(
             brightness: Theme.of(context).brightness,
             elevation: 1,
-      backgroundColor:
-          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+            backgroundColor: StreamChatTheme.of(context)
+                .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 +125,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 +148,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                 ),
               )
             ],
-      title: ValueListenableBuilder<ConnectionStatus>(
-        valueListenable: _client.wsConnectionStatus,
-        builder: (context, status, child) {
+            title: Builder(
+              builder: (context) {
                 if (titleBuilder != null) {
                   return titleBuilder(context, status, _client);
                 }
@@ -139,6 +165,9 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
                 }
               },
             ),
+          ),
+        );
+      },
     );
   }
 

lib/src/info_tile.dart

@@ -0,0 +1,35 @@
+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;
+
+  InfoTile({this.message, this.child, this.showMessage});
+
+  @override
+  Widget build(BuildContext context) {
+    return PortalEntry(
+      visible: showMessage,
+      portalAnchor: Alignment.topCenter,
+      childAnchor: Alignment.bottomCenter,
+      portal: Container(
+        height: 25.0,
+        color: StreamChatTheme.of(context).colorTheme.grey,
+        child: Center(
+          child: Text(
+            message,
+            style: StreamChatTheme.of(context).textTheme.body.copyWith(
+                  color: Colors.white,
+                ),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+        ),
+      ),
+      child: child,
+    );
+  }
+}

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