extract date_divider and reply_indicator widgets

lib/src/date_divider.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/material.dart';
+import 'package:jiffy/jiffy.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+/// It shows a date divider depending on the date difference
+class DateDivider extends StatelessWidget {
+  const DateDivider({
+    Key key,
+    @required this.nextMessage,
+    @required this.messageWidget,
+  }) : super(key: key);
+
+  final Message nextMessage;
+  final Widget messageWidget;
+
+  @override
+  Widget build(BuildContext context) {
+    final divider = Expanded(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8.0),
+        child: Divider(),
+      ),
+    );
+
+    final createdAt = Jiffy(nextMessage.createdAt.toLocal());
+    final now = DateTime.now();
+    final hourInfo = createdAt.format('h:mm a');
+
+    String dayInfo;
+    if (Jiffy(createdAt).isSame(now, Units.DAY)) {
+      dayInfo = 'TODAY';
+    } else if (Jiffy(createdAt)
+        .isSame(now.subtract(Duration(days: 1)), Units.DAY)) {
+      dayInfo = 'YESTERDAY';
+    } else if (Jiffy(createdAt).isAfter(
+      now.subtract(Duration(days: 7)),
+      Units.DAY,
+    )) {
+      dayInfo = createdAt.format('EEEE').toUpperCase();
+    } else if (Jiffy(createdAt).isAfter(
+      Jiffy(now).subtract(years: 1),
+      Units.DAY,
+    )) {
+      dayInfo = createdAt.format('dd/MM').toUpperCase();
+    } else {
+      dayInfo = createdAt.format('dd/MM/yyyy').toUpperCase();
+    }
+
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: <Widget>[
+        messageWidget,
+        Padding(
+          padding: const EdgeInsets.only(top: 24.0),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.center,
+            children: <Widget>[
+              divider,
+              Padding(
+                padding: const EdgeInsets.symmetric(horizontal: 32.0),
+                child: Text.rich(
+                  TextSpan(
+                    children: [
+                      TextSpan(
+                        text: dayInfo,
+                        style: TextStyle(
+                          fontWeight: FontWeight.bold,
+                        ),
+                      ),
+                      TextSpan(text: ' AT'),
+                      TextSpan(text: ' $hourInfo'),
+                    ],
+                    style: TextStyle(
+                      fontWeight: FontWeight.normal,
+                    ),
+                  ),
+                  style: TextStyle(
+                    fontSize: 10,
+                    color:
+                        Theme.of(context).textTheme.title.color.withOpacity(.5),
+                  ),
+                ),
+              ),
+              divider,
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/src/message_list_view.dart

@@ -6,6 +6,7 @@ import 'package:stream_chat/stream_chat.dart';
 import 'package:visibility_detector/visibility_detector.dart';
 
 import '../stream_chat_flutter.dart';
+import 'date_divider.dart';
 import 'message_widget.dart';
 import 'stream_channel.dart';
 
@@ -225,80 +226,9 @@ class _MessageListViewState extends State<MessageListView> {
             if (nextMessage != null &&
                 !Jiffy(message.createdAt.toLocal())
                     .isSame(nextMessage.createdAt.toLocal(), Units.DAY)) {
-              final divider = Expanded(
+              return DateDivider(
-                child: Padding(
+                messageWidget: messageWidget,
-                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
+                nextMessage: nextMessage,
-                  child: Divider(),
-                ),
-              );
-
-              final createdAt = Jiffy(nextMessage.createdAt.toLocal());
-              final now = DateTime.now();
-              final hourInfo = createdAt.format('h:mm a');
-
-              String dayInfo;
-              if (Jiffy(createdAt).isSame(now, Units.DAY)) {
-                dayInfo = 'TODAY';
-              } else if (Jiffy(createdAt)
-                  .isSame(now.subtract(Duration(days: 1)), Units.DAY)) {
-                dayInfo = 'YESTERDAY';
-              } else if (Jiffy(createdAt).isAfter(
-                now.subtract(Duration(days: 7)),
-                Units.DAY,
-              )) {
-                dayInfo = createdAt.format('EEEE').toUpperCase();
-              } else if (Jiffy(createdAt).isAfter(
-                Jiffy(now).subtract(years: 1),
-                Units.DAY,
-              )) {
-                dayInfo = createdAt.format('dd/MM').toUpperCase();
-              } else {
-                dayInfo = createdAt.format('dd/MM/yyyy').toUpperCase();
-              }
-
-              return Column(
-                crossAxisAlignment: CrossAxisAlignment.stretch,
-                children: <Widget>[
-                  messageWidget,
-                  Padding(
-                    padding: const EdgeInsets.only(top: 24.0),
-                    child: Row(
-                      crossAxisAlignment: CrossAxisAlignment.center,
-                      children: <Widget>[
-                        divider,
-                        Padding(
-                          padding: const EdgeInsets.symmetric(horizontal: 32.0),
-                          child: Text.rich(
-                            TextSpan(
-                              children: [
-                                TextSpan(
-                                  text: dayInfo,
-                                  style: TextStyle(
-                                    fontWeight: FontWeight.bold,
-                                  ),
-                                ),
-                                TextSpan(text: ' AT'),
-                                TextSpan(text: ' $hourInfo'),
-                              ],
-                              style: TextStyle(
-                                fontWeight: FontWeight.normal,
-                              ),
-                            ),
-                            style: TextStyle(
-                              fontSize: 10,
-                              color: Theme.of(context)
-                                  .textTheme
-                                  .title
-                                  .color
-                                  .withOpacity(.5),
-                            ),
-                          ),
-                        ),
-                        divider,
-                      ],
-                    ),
-                  ),
-                ],
               );
             }
 

lib/src/message_widget.dart

@@ -1,5 +1,4 @@
 import 'dart:io';
-import 'dart:math';
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:chewie/chewie.dart';
@@ -13,6 +12,7 @@ import 'package:stream_chat_flutter/src/full_screen_image.dart';
 import 'package:stream_chat_flutter/src/message_input.dart';
 import 'package:stream_chat_flutter/src/message_list_view.dart';
 import 'package:stream_chat_flutter/src/reaction_picker.dart';
+import 'package:stream_chat_flutter/src/reply_indicator.dart';
 import 'package:stream_chat_flutter/src/sending_indicator.dart';
 import 'package:stream_chat_flutter/src/stream_channel.dart';
 import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
@@ -206,45 +206,19 @@ class _MessageWidgetState extends State<MessageWidget>
   }
 
   Widget _buildThreadIndicator(BuildContext context) {
-    var row = [
+    if (widget.message?.replyCount != null && widget.message.replyCount > 0) {
-      Text(
+      return ReplyIndicator(
-        'Replies: ${widget.message.replyCount}',
+        onTap: widget.isParent
-        style: _messageTheme.replies,
+            ? () {
-      ),
-      Transform(
-        transform: Matrix4.rotationY(_isMyMessage ? 0 : pi),
-        alignment: Alignment.center,
-        child: Icon(
-          Icons.subdirectory_arrow_left,
-          color: Theme.of(context).brightness == Brightness.dark
-              ? Colors.white12
-              : Colors.black12,
-        ),
-      ),
-    ];
-
-    if (!_isMyMessage) {
-      row = row.reversed.toList();
-    }
-
-    return (widget.message.replyCount ?? 0) > 0
-        ? GestureDetector(
-            onTap: () {
-              if (widget.isParent) {
-                return;
-              }
-              if (widget.onThreadTap != null) {
                 widget.onThreadTap(widget.message);
               }
-            },
+            : null,
-            child: Padding(
+        message: widget.message,
-              padding: const EdgeInsets.symmetric(vertical: 2.0),
+        messageTheme: _messageTheme,
-              child: Row(
+        reversed: _isMyMessage,
-                children: row,
+      );
-              ),
+    }
-            ),
+    return SizedBox();
-          )
-        : SizedBox();
   }
 
   Widget _buildBubble(

lib/src/reply_indicator.dart

@@ -0,0 +1,54 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/stream_chat_flutter.dart';
+
+class ReplyIndicator extends StatelessWidget {
+  final Message message;
+  final VoidCallback onTap;
+  final bool reversed;
+  final MessageTheme messageTheme;
+
+  const ReplyIndicator({
+    Key key,
+    this.message,
+    this.onTap,
+    this.reversed = false,
+    this.messageTheme,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    var row = [
+      Text(
+        'Replies: ${message.replyCount}',
+        style: messageTheme?.replies,
+      ),
+      Transform(
+        transform: Matrix4.rotationY(reversed ? 0 : pi),
+        alignment: Alignment.center,
+        child: Icon(
+          Icons.subdirectory_arrow_left,
+          color: Theme.of(context).brightness == Brightness.dark
+              ? Colors.white12
+              : Colors.black12,
+        ),
+      ),
+    ];
+
+    if (!reversed) {
+      row = row.reversed.toList();
+    }
+
+    return GestureDetector(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(vertical: 2.0),
+        child: Row(
+          children: row,
+        ),
+      ),
+    );
+  }
+}

lib/src/sending_indicator.dart

@@ -19,7 +19,7 @@ class SendingIndicator extends StatelessWidget {
         ),
         child: CircleAvatar(
           radius: 4,
-          backgroundColor: Theme.of(context).accentColor,
+          backgroundColor: StreamChatTheme.of(context).accentColor,
           child: Icon(
             Icons.done,
             color: Colors.white,

lib/stream_chat_flutter.dart

@@ -6,6 +6,7 @@ export 'src/channel_list_view.dart';
 export 'src/channel_name.dart';
 export 'src/channel_preview.dart';
 export 'src/channels_bloc.dart';
+export 'src/date_divider.dart';
 export 'src/message_input.dart';
 export 'src/message_list_view.dart';
 export 'src/message_widget.dart';