[UI-KIT] Add connection status builder

Signed-off-by: Sahil Kumar <[email protected]>

packages/flutter_widgets/example/lib/group_chat_details_screen.dart

@@ -150,9 +150,8 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
             ),
           ],
         ),
-        body: ValueListenableBuilder<ConnectionStatus>(
+        body: ConnectionStatusBuilder(
-            valueListenable: StreamChat.of(context).client.wsConnectionStatus,
+          statusBuilder: (context, status) {
-            builder: (context, status, _) {
             String statusString = '';
             bool showStatus = true;
 
@@ -259,7 +258,8 @@ class _GroupChatDetailsScreenState extends State<GroupChatDetailsScreen> {
                 ],
               ),
             );
-            }),
+          },
+        ),
       ),
     );
   }

packages/flutter_widgets/example/lib/new_chat_screen.dart

@@ -134,9 +134,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
         ),
         centerTitle: true,
       ),
-      body: ValueListenableBuilder<ConnectionStatus>(
+      body: ConnectionStatusBuilder(
-        valueListenable: StreamChat.of(context).client.wsConnectionStatus,
+        statusBuilder: (context, status) {
-        builder: (context, status, _) {
           String statusString = '';
           bool showStatus = true;
 

packages/flutter_widgets/example/lib/new_group_chat_screen.dart

@@ -87,9 +87,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
             )
         ],
       ),
-      body: ValueListenableBuilder<ConnectionStatus>(
+      body: ConnectionStatusBuilder(
-          valueListenable: StreamChat.of(context).client.wsConnectionStatus,
+        statusBuilder: (context, status) {
-          builder: (context, status, _) {
           String statusString = '';
           bool showStatus = true;
 
@@ -163,8 +162,7 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                                                 .white,
                                             shape: BoxShape.circle,
                                             border: Border.all(
-                                                color:
+                                              color: StreamChatTheme.of(context)
-                                                    StreamChatTheme.of(context)
                                                   .colorTheme
                                                   .whiteSnow,
                                             ),
@@ -201,9 +199,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
                       child: Container(
                         width: double.maxFinite,
                         decoration: BoxDecoration(
-                            gradient: StreamChatTheme.of(context)
+                          gradient:
-                                .colorTheme
+                              StreamChatTheme.of(context).colorTheme.bgGradient,
-                                .bgGradient,
                         ),
                         child: Padding(
                           padding: const EdgeInsets.symmetric(
@@ -307,7 +304,8 @@ class _NewGroupChatScreenState extends State<NewGroupChatScreen> {
               ),
             ),
           );
-          }),
+        },
+      ),
     );
   }
 }

packages/flutter_widgets/lib/src/channel_header.dart

@@ -9,6 +9,7 @@ import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
 import '../stream_chat_flutter.dart';
 import './channel_name.dart';
 import 'channel_image.dart';
+import 'connection_status_builder.dart';
 
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header.png)
 /// ![screenshot](https://raw.githubusercontent.com/GetStream/stream-chat-flutter/master/screenshots/channel_header_paint.png)
@@ -85,11 +86,9 @@ class ChannelHeader extends StatelessWidget implements PreferredSizeWidget {
   @override
   Widget build(BuildContext context) {
     final channel = StreamChannel.of(context).channel;
-    final _client = StreamChat.of(context).client;
 
-    return ValueListenableBuilder<ConnectionStatus>(
+    return ConnectionStatusBuilder(
-      valueListenable: _client.wsConnectionStatus,
+      statusBuilder: (context, status) {
-      builder: (context, status, _) {
         String statusString = '';
         bool showStatus = true;
 

packages/flutter_widgets/lib/src/channel_info.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import 'connection_status_builder.dart';
+
 class ChannelInfo extends StatelessWidget {
   final Channel channel;
 
@@ -25,9 +27,8 @@ class ChannelInfo extends StatelessWidget {
       stream: channel.state.membersStream,
       initialData: channel.state.members,
       builder: (context, snapshot) {
-        return ValueListenableBuilder(
+        return ConnectionStatusBuilder(
-          valueListenable: client.wsConnectionStatus,
+          statusBuilder: (context, status) {
-          builder: (context, status, child) {
             switch (status) {
               case ConnectionStatus.connected:
                 return _buildConnectedTitleState(context, snapshot.data);

packages/flutter_widgets/lib/src/channel_list_header.dart

@@ -6,6 +6,7 @@ import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
 import 'package:stream_chat_flutter/src/stream_neumorphic_button.dart';
 import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 
+import 'connection_status_builder.dart';
 import 'info_tile.dart';
 import 'stream_chat.dart';
 
@@ -79,9 +80,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
   Widget build(BuildContext context) {
     final _client = client ?? StreamChat.of(context).client;
     final user = _client.state.user;
-    return ValueListenableBuilder<ConnectionStatus>(
+    return ConnectionStatusBuilder(
-      valueListenable: _client.wsConnectionStatus,
+      statusBuilder: (context, status) {
-      builder: (context, status, child) {
         String statusString = '';
         bool showStatus = true;
 
@@ -130,9 +130,8 @@ class ChannelListHeader extends StatelessWidget implements PreferredSizeWidget {
             actions: [
               StreamNeumorphicButton(
                 child: IconButton(
-                  icon: ValueListenableBuilder<ConnectionStatus>(
+                  icon: ConnectionStatusBuilder(
-                    valueListenable: _client.wsConnectionStatus,
+                    statusBuilder: (context, status) {
-                    builder: (context, status, child) {
                       var color;
                       switch (status) {
                         case ConnectionStatus.connected:

packages/flutter_widgets/lib/src/connection_status_builder.dart

@@ -0,0 +1,55 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';
+import 'stream_chat.dart';
+
+class ConnectionStatusBuilder extends StatelessWidget {
+  /// Creates a new ConnectionStatusBuilder
+  const ConnectionStatusBuilder({
+    Key key,
+    @required this.statusBuilder,
+    this.initialStatus = ConnectionStatus.disconnected,
+    this.connectionStatusStream,
+    this.errorBuilder,
+    this.loadingBuilder,
+  })  : assert(statusBuilder != null),
+        super(key: key);
+
+  /// The connection status that will be used to create the initial snapshot.
+  final ConnectionStatus initialStatus;
+
+  /// The asynchronous computation to which this builder is currently connected.
+  final Stream<ConnectionStatus> connectionStatusStream;
+
+  /// The builder that will be used in case of error
+  final Widget Function(BuildContext context, Object error) errorBuilder;
+
+  /// The builder that will be used in case of loading
+  final WidgetBuilder loadingBuilder;
+
+  /// The builder that will be used in case of data
+  final Widget Function(BuildContext context, ConnectionStatus status)
+      statusBuilder;
+
+  @override
+  Widget build(BuildContext context) {
+    final stream = connectionStatusStream ??
+        StreamChat.of(context).client.wsConnectionStatusStream;
+    return StreamBuilder<ConnectionStatus>(
+      initialData: initialStatus,
+      stream: stream,
+      builder: (context, snapshot) {
+        if (snapshot.hasError) {
+          if (errorBuilder != null) {
+            return errorBuilder(context, snapshot.error);
+          }
+          return Offstage();
+        }
+        if (!snapshot.hasData) {
+          if (loadingBuilder != null) return loadingBuilder(context);
+          return Offstage();
+        }
+        return statusBuilder(context, snapshot.data);
+      },
+    );
+  }
+}

packages/flutter_widgets/lib/src/message_list_view.dart

@@ -14,6 +14,7 @@ import 'package:stream_chat_flutter/src/system_message.dart';
 import 'package:visibility_detector/visibility_detector.dart';
 
 import '../stream_chat_flutter.dart';
+import 'connection_status_builder.dart';
 import 'date_divider.dart';
 import 'swipeable.dart';
 import 'extension.dart';
@@ -301,17 +302,14 @@ class _MessageListViewState extends State<MessageListView> {
     }
 
     _messageListLength = newMessagesListLength;
-    final _client = StreamChat.of(context).client;
 
     return Stack(
       alignment: Alignment.center,
       children: [
-        ValueListenableBuilder<ConnectionStatus>(
+        ConnectionStatusBuilder(
-            valueListenable: _client.wsConnectionStatus,
+          statusBuilder: (context, status) {
-            builder: (context, status, _) {
             String statusString = '';
             bool showStatus = true;
-
             switch (status) {
               case ConnectionStatus.connected:
                 statusString = 'Connected';
@@ -326,8 +324,7 @@ class _MessageListViewState extends State<MessageListView> {
             }
 
             return InfoTile(
-                showMessage:
+              showMessage: widget.showConnectionStateTile ? showStatus : false,
-                    widget.showConnectionStateTile ? showStatus : false,
               tileAnchor: Alignment.topCenter,
               childAnchor: Alignment.topCenter,
               message: statusString,
@@ -373,9 +370,8 @@ class _MessageListViewState extends State<MessageListView> {
                       final replyCount = widget.parentMessage.replyCount;
                       return Container(
                         decoration: BoxDecoration(
-                            gradient: StreamChatTheme.of(context)
+                          gradient:
-                                .colorTheme
+                              StreamChatTheme.of(context).colorTheme.bgGradient,
-                                .bgGradient,
                         ),
                         child: Padding(
                           padding: const EdgeInsets.all(8.0),
@@ -491,7 +487,8 @@ class _MessageListViewState extends State<MessageListView> {
                 ),
               ),
             );
-            }),
+          },
+        ),
         if (widget.showScrollToBottom) _buildScrollToBottom(),
         Positioned(
           top: 20.0,

packages/flutter_widgets/lib/stream_chat_flutter.dart

@@ -40,4 +40,5 @@ export 'src/channel_file_display_screen.dart';
 export 'src/channel_media_display_screen.dart';
 export 'src/info_tile.dart';
 export 'src/stream_chat.dart';
+export 'src/connection_status_builder.dart';
 export 'package:stream_chat_flutter_core/stream_chat_flutter_core.dart';

packages/flutter_widgets/pubspec.yaml

@@ -32,8 +32,6 @@ dependencies:
   image_picker: ^0.6.7+17
   flutter_keyboard_visibility: ^4.0.2
   mime: ^0.9.7
-  stream_chat:
-    path: ../dart_client
   video_compress: ^2.1.1
   visibility_detector: ^0.1.5
   http_parser: ^3.1.4

packages/stream_chat_flutter_core/pubspec.yaml

@@ -10,8 +10,8 @@ environment:
   flutter: ">=1.17.0"
 
 dependencies:
-  stream_chat: ^0.2.23+3
+  stream_chat:
-  rxdart: ^0.24.1
+    path: ../dart_client
   flutter:
     sdk: flutter