feat : ChannelListHeader

2020-11-23 16:36:50 +05:30
parent 0a9652f1ac
commit 525991f24b
6 changed files with 165 additions and 13 deletions
@@ -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);
+}
@@ -0,0 +1,40 @@
+import 'package:flutter/material.dart';
+
+class StreamNeumorphicButton extends StatelessWidget {
+  final Widget child;
+  final Color backgroundColor;
+
+  const StreamNeumorphicButton({
+    Key key,
+    @required this.child,
+    this.backgroundColor = Colors.white,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      child: child,
+      margin: EdgeInsets.all(8.0),
+      height: 40,
+      width: 40,
+      decoration: BoxDecoration(
+        color: backgroundColor,
+        shape: BoxShape.circle,
+        boxShadow: [
+          BoxShadow(
+            color: Colors.grey[700],
+            offset: Offset(0, 1.0),
+            blurRadius: 0.5,
+            spreadRadius: 0,
+          ),
+          BoxShadow(
+            color: Colors.white,
+            offset: Offset.zero,
+            blurRadius: 0.5,
+            spreadRadius: 0,
+          ),
+        ],
+      ),
+    );
+  }
+}