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,54 +83,84 @@ 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;
-      brightness: Theme.of(context).brightness,
+
-      elevation: 1,
+    return ValueListenableBuilder<ConnectionStatus>(
-      leading: showBackButton
+      valueListenable: _client.wsConnectionStatus,
-          ? StreamBackButton(
+      builder: (context, status, _) {
-              onPressed: onBackPressed,
+        String statusString = '';
-              showUnreads: true,
+        bool showStatus = true;
-            )
+
-          : SizedBox(),
+        switch (status) {
-      backgroundColor:
+          case ConnectionStatus.connected:
-          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+            statusString = 'Connected';
-      actions: <Widget>[
+            showStatus = false;
-        Padding(
+            break;
-          padding: const EdgeInsets.only(right: 10.0),
+          case ConnectionStatus.connecting:
-          child: Center(
+            statusString = 'Connecting';
-            child: ChannelImage(
+            break;
-              onTap: onImageTap,
+          case ConnectionStatus.disconnected:
-            ),
+            statusString = 'Disconnected';
-          ),
+            break;
-        ),
+        }
-      ],
+
-      centerTitle: true,
+        return InfoTile(
-      title: InkWell(
+          showMessage: showStatus,
-        onTap: onTitleTap,
+          message: statusString,
-        child: Container(
+          child: AppBar(
-          height: preferredSize.height,
+            brightness: Theme.of(context).brightness,
-          width: preferredSize.width,
+            elevation: 1,
-          child: Column(
+            leading: showBackButton
-            crossAxisAlignment: CrossAxisAlignment.center,
+                ? StreamBackButton(
-            mainAxisAlignment: MainAxisAlignment.center,
+                    onPressed: onBackPressed,
-            children: <Widget>[
+                    showUnreads: true,
-              ChannelName(
+                  )
-                textStyle: StreamChatTheme.of(context)
+                : SizedBox(),
-                    .channelTheme
+            backgroundColor: StreamChatTheme.of(context)
-                    .channelHeaderTheme
+                .channelTheme
-                    .title,
+                .channelHeaderTheme
-              ),
+                .color,
-              SizedBox(height: 2),
+            actions: <Widget>[
-              ChannelInfo(
+              Padding(
-                showTypingIndicator: showTypingIndicator,
+                padding: const EdgeInsets.only(right: 10.0),
-                channel: channel,
+                child: Center(
-                textStyle:
+                  child: ChannelImage(
-                    StreamChatTheme.of(context).channelPreviewTheme.subtitle,
+                    onTap: onImageTap,
+                  ),
+                ),
               ),
             ],
+            centerTitle: true,
+            title: InkWell(
+              onTap: onTitleTap,
+              child: Container(
+                height: preferredSize.height,
+                width: preferredSize.width,
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: <Widget>[
+                    ChannelName(
+                      textStyle: StreamChatTheme.of(context)
+                          .channelTheme
+                          .channelHeaderTheme
+                          .title,
+                    ),
+                    SizedBox(height: 2),
+                    ChannelInfo(
+                      showTypingIndicator: showTypingIndicator,
+                      channel: channel,
+                      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,73 +73,101 @@ 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>(
-      brightness: Theme.of(context).brightness,
+      valueListenable: _client.wsConnectionStatus,
-      elevation: 1,
+      builder: (context, status, child) {
-      backgroundColor:
+        String statusString = '';
-          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+        bool showStatus = true;
-      centerTitle: true,
+
-      leading: Center(
+        switch (status) {
-        child: UserAvatar(
+          case ConnectionStatus.connected:
-          user: user,
+            statusString = 'Connected';
-          showOnlineStatus: false,
+            showStatus = false;
-          onTap: onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
+            break;
-          borderRadius: BorderRadius.circular(20),
+          case ConnectionStatus.connecting:
-          constraints: BoxConstraints.tightFor(
+            statusString = 'Connecting';
-            height: 40,
+            break;
-            width: 40,
+          case ConnectionStatus.disconnected:
-          ),
+            statusString = 'Disconnected';
-        ),
+            break;
-      ),
+        }
-      actions: [
+
-        StreamNeumorphicButton(
+        return InfoTile(
-          child: IconButton(
+          showMessage: showStatus,
-            icon: ValueListenableBuilder<ConnectionStatus>(
+          message: statusString,
-              valueListenable: _client.wsConnectionStatus,
+          child: AppBar(
-              builder: (context, status, child) {
+            brightness: Theme.of(context).brightness,
-                var color;
+            elevation: 1,
+            backgroundColor: StreamChatTheme.of(context)
+                .channelTheme
+                .channelHeaderTheme
+                .color,
+            centerTitle: true,
+            leading: Center(
+              child: UserAvatar(
+                user: user,
+                showOnlineStatus: false,
+                onTap:
+                    onUserAvatarTap ?? (_) => Scaffold.of(context).openDrawer(),
+                borderRadius: BorderRadius.circular(20),
+                constraints: BoxConstraints.tightFor(
+                  height: 40,
+                  width: 40,
+                ),
+              ),
+            ),
+            actions: [
+              StreamNeumorphicButton(
+                child: IconButton(
+                  icon: ValueListenableBuilder<ConnectionStatus>(
+                    valueListenable: _client.wsConnectionStatus,
+                    builder: (context, status, child) {
+                      var color;
+                      switch (status) {
+                        case ConnectionStatus.connected:
+                          color =
+                              StreamChatTheme.of(context).colorTheme.accentBlue;
+                          break;
+                        case ConnectionStatus.connecting:
+                          color = Colors.grey;
+                          break;
+                        case ConnectionStatus.disconnected:
+                          color = Colors.grey;
+                          break;
+                      }
+                      return SvgPicture.asset(
+                        'svgs/icon_pen_write.svg',
+                        package: 'stream_chat_flutter',
+                        width: 24.0,
+                        height: 24.0,
+                        color: color,
+                      );
+                    },
+                  ),
+                  onPressed: onNewChatButtonTap,
+                ),
+              )
+            ],
+            title: Builder(
+              builder: (context) {
+                if (titleBuilder != null) {
+                  return titleBuilder(context, status, _client);
+                }
                 switch (status) {
                   case ConnectionStatus.connected:
-                    color = StreamChatTheme.of(context).colorTheme.accentBlue;
+                    return _buildConnectedTitleState(context);
-                    break;
                   case ConnectionStatus.connecting:
-                    color = Colors.grey;
+                    return _buildConnectingTitleState(context);
-                    break;
                   case ConnectionStatus.disconnected:
-                    color = Colors.grey;
+                    return _buildDisconnectedTitleState(context, _client);
-                    break;
+                  default:
+                    return Offstage();
                 }
-                return SvgPicture.asset(
-                  'svgs/icon_pen_write.svg',
-                  package: 'stream_chat_flutter',
-                  width: 24.0,
-                  height: 24.0,
-                  color: color,
-                );
               },
             ),
-            onPressed: onNewChatButtonTap,
           ),
-        )
+        );
-      ],
+      },
-      title: ValueListenableBuilder<ConnectionStatus>(
-        valueListenable: _client.wsConnectionStatus,
-        builder: (context, status, child) {
-          if (titleBuilder != null) {
-            return titleBuilder(context, status, _client);
-          }
-          switch (status) {
-            case ConnectionStatus.connected:
-              return _buildConnectedTitleState(context);
-            case ConnectionStatus.connecting:
-              return _buildConnectingTitleState(context);
-            case ConnectionStatus.disconnected:
-              return _buildDisconnectedTitleState(context, _client);
-            default:
-              return Offstage();
-          }
-        },
-      ),
     );
   }
 

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,22 +68,24 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
   @override
   Widget build(BuildContext context) {
     final theme = _getTheme(context, widget.streamChatThemeData);
-    return StreamChatTheme(
+    return Portal(
-      data: theme,
+      child: StreamChatTheme(
-      child: Builder(
+        data: theme,
-        builder: (context) {
+        child: Builder(
-          final materialTheme = Theme.of(context);
+          builder: (context) {
-          final streamTheme = StreamChatTheme.of(context);
+            final materialTheme = Theme.of(context);
-          return Theme(
+            final streamTheme = StreamChatTheme.of(context);
-            data: materialTheme.copyWith(
+            return Theme(
-              primaryIconTheme: streamTheme.primaryIconTheme,
+              data: materialTheme.copyWith(
-              accentColor: streamTheme.colorTheme.accentBlue,
+                primaryIconTheme: streamTheme.primaryIconTheme,
-              scaffoldBackgroundColor: streamTheme.colorTheme.white,
+                accentColor: streamTheme.colorTheme.accentBlue,
-              buttonTheme: streamTheme.buttonTheme,
+                scaffoldBackgroundColor: streamTheme.colorTheme.white,
-            ),
+                buttonTheme: streamTheme.buttonTheme,
-            child: widget.child,
+              ),
-          );
+              child: widget.child,
-        },
+            );
+          },
+        ),
       ),
     );
   }