feat : ChannelListHeader

example/lib/group_chat_details_screen.dart

@@ -3,7 +3,6 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 import 'package:uuid/uuid.dart';
 
 import 'main.dart';
-import 'neumorphic_button.dart';
 
 class GroupChatDetailsScreen extends StatefulWidget {
   final List<User> selectedUsers;
@@ -103,7 +102,7 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
           ),
         ),
         actions: [
-          NeumorphicButton(
+          StreamNeumorphicButton(
             child: IconButton(
               padding: const EdgeInsets.all(0),
               icon: Icon(StreamIcons.check),

example/lib/main.dart

@@ -69,13 +69,7 @@ class ChannelListPage extends StatelessWidget {
   Widget build(BuildContext context) {
     final user = StreamChat.of(context).user;
     return Scaffold(
-      appBar: AppBar(
+      appBar: ChannelListHeader(),
-        backgroundColor: Colors.white,
-        title: Text(
-          'Stream Chat',
-          style: TextStyle(color: Colors.black),
-        ),
-      ),
       drawer: _buildDrawer(context, user),
       drawerEdgeDragWidth: 50,
       body: ChannelsBloc(

example/lib/new_chat_screen.dart

@@ -5,7 +5,6 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
 import 'chips_input_text_field.dart';
 import 'main.dart';
-import 'neumorphic_button.dart';
 import 'new_group_chat_screen.dart';
 
 class NewChatScreen extends StatefulWidget {
@@ -193,7 +192,7 @@ class _NewChatScreenState extends State<NewChatScreen> {
                     padding: const EdgeInsets.symmetric(vertical: 8),
                     child: Row(
                       children: [
-                        NeumorphicButton(
+                        StreamNeumorphicButton(
                           child: Icon(
                             StreamIcons.group,
                             color: Color(0xFF006CFF),

lib/src/channel_list_header.dart

@@ -0,0 +1,158 @@
+import 'dart:ui';
+
+import 'package:flutter/material.dart';
+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 'stream_chat.dart';
+
+typedef TitleBuilder = Widget Function(
+  BuildContext context,
+  ConnectionStatus status,
+  Client client,
+);
+
+class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
+  const ChannelListHeader({
+    Key key,
+    this.client,
+    this.titleBuilder,
+  }) : super(key: key);
+
+  final Client client;
+
+  final TitleBuilder titleBuilder;
+
+  @override
+  Widget build(BuildContext context) {
+    final _client = client ?? StreamChat.of(context).client;
+    final user = _client.state.user;
+    return AppBar(
+      brightness: Theme.of(context).brightness,
+      elevation: 1,
+      backgroundColor:
+          StreamChatTheme.of(context).channelTheme.channelHeaderTheme.color,
+      centerTitle: true,
+      leading: Center(
+        child: UserAvatar(
+          user: user,
+          onTap: (_) => Scaffold.of(context).openDrawer(),
+          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 = Color(0xFF006CFF);
+                    break;
+                  case ConnectionStatus.connecting:
+                    color = Colors.grey;
+                    break;
+                  case ConnectionStatus.disconnected:
+                    color = Colors.grey;
+                    break;
+                }
+                return Icon(
+                  StreamIcons.pen_write,
+                  color: color,
+                );
+              },
+            ),
+            onPressed: () {},
+          ),
+        )
+      ],
+      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();
+            case ConnectionStatus.connecting:
+              return _buildConnectingTitleState();
+            case ConnectionStatus.disconnected:
+              return _buildDisconnectedTitleState(_client);
+            default:
+              return Offstage();
+          }
+        },
+      ),
+    );
+  }
+
+  Widget _buildConnectedTitleState() => Text(
+        'Stream Chat',
+        style: TextStyle(
+          fontSize: 16,
+          fontWeight: FontWeight.bold,
+          color: Colors.black,
+        ),
+      );
+
+  Widget _buildConnectingTitleState() {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Container(
+          height: 16,
+          width: 16,
+          child: Center(
+            child: CircularProgressIndicator(),
+          ),
+        ),
+        SizedBox(width: 10),
+        Text(
+          'Searching for Network',
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.bold,
+            color: Colors.black,
+          ),
+        )
+      ],
+    );
+  }
+
+  Widget _buildDisconnectedTitleState(Client client) {
+    return Row(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        Text(
+          'Offline...',
+          style: TextStyle(
+            fontSize: 16,
+            fontWeight: FontWeight.bold,
+            color: Colors.black,
+          ),
+        ),
+        TextButton(
+          onPressed: () => client.connect(),
+          child: Text(
+            'Try Again',
+            style: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.bold,
+              color: Color(0xFF006CFF),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  @override
+  Size get preferredSize => Size.fromHeight(kToolbarHeight);
+}

lib/src/stream_neumorphic_button.dart

@@ -1,10 +1,10 @@
 import 'package:flutter/material.dart';
 
-class NeumorphicButton extends StatelessWidget {
+class StreamNeumorphicButton extends StatelessWidget {
   final Widget child;
   final Color backgroundColor;
 
-  const NeumorphicButton({
+  const StreamNeumorphicButton({
     Key key,
     @required this.child,
     this.backgroundColor = Colors.white,

lib/stream_chat_flutter.dart

@@ -33,3 +33,5 @@ export 'src/video_attachment.dart';
 export 'src/users_bloc.dart';
 export 'src/user_list_view.dart';
 export 'src/user_item.dart';
+export 'src/stream_neumorphic_button.dart';
+export 'src/channel_list_header.dart';