[Message Widget] Modify read indicator as per new design v2

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

lib/src/channel_preview.dart

@@ -122,7 +122,11 @@ class ChannelPreview extends StatelessWidget {
                           padding: const EdgeInsets.only(right: 4.0),
                           child: SendingIndicator(
                             message: channel.state.lastMessage,
-                            allRead: channel.state.read
+                            size: StreamChatTheme.of(context)
+                                .channelPreviewTheme
+                                .lastMessageAt
+                                .fontSize,
+                            isMessageRead: channel.state.read
                                     .where((element) => element.lastRead
                                         .isAfter(channel
                                             .state.lastMessage.createdAt))

lib/src/message_widget.dart

@@ -228,7 +228,7 @@ class _MessageWidgetState extends State<MessageWidget> {
   bool get showTimeStamp =>
       widget.message.createdAt != null && widget.showTimestamp;
 
-  bool get showReadList => widget.readList?.isNotEmpty == true;
+  bool get isMessageRead => widget.readList?.isNotEmpty == true;
 
   bool get showInChannel =>
       widget.showInChannelIndicator && widget.message?.showInChannel == true;
@@ -488,14 +488,14 @@ class _MessageWidgetState extends State<MessageWidget> {
 
       children.addAll([
         if (showSendingIndicator) _buildSendingIndicator(),
-        if (showReadList)
-          SizedBox.fromSize(
-            size: Size((widget.readList.length * 10.0) + 10, 17),
-            child: Padding(
-              padding: const EdgeInsets.only(left: 4.0),
-              child: _buildReadIndicator(),
-            ),
-          ),
+        // if (showReadList)
+        //   SizedBox.fromSize(
+        //     size: Size((widget.readList.length * 10.0) + 10, 17),
+        //     child: Padding(
+        //       padding: const EdgeInsets.only(left: 4.0),
+        //       child: _buildReadIndicator(),
+        //     ),
+        //   ),
         if (showThreadReplyIndicator)
           InkWell(
             onTap: widget.onThreadTap != null ? onThreadTap : null,
@@ -798,14 +798,27 @@ class _MessageWidgetState extends State<MessageWidget> {
   }
 
   Widget _buildSendingIndicator() {
-    return Container(
-      height: widget.messageTheme.createdAt.fontSize + 2,
-      width: widget.messageTheme.createdAt.fontSize + 2,
-      child: SendingIndicator(
-        message: widget.message,
-        allRead: widget.allRead,
-      ),
+    final style = widget.messageTheme.createdAt;
+    Widget child = SendingIndicator(
+      message: widget.message,
+      isMessageRead: isMessageRead,
+      size: style.fontSize,
     );
+    if (isMessageRead) {
+      child = Row(
+        children: [
+          Text(
+            widget.readList.length.toString(),
+            style: style.copyWith(
+              color: StreamChatTheme.of(context).accentColor,
+            ),
+          ),
+          SizedBox(width: 2),
+          child,
+        ],
+      );
+    }
+    return child;
   }
 
   Widget _buildUserAvatar() => Transform(

lib/src/sending_indicator.dart

@@ -4,27 +4,29 @@ import 'package:stream_chat_flutter/stream_chat_flutter.dart';
 /// Used to show the sending status of the message
 class SendingIndicator extends StatelessWidget {
   final Message message;
-  final bool allRead;
+  final bool isMessageRead;
+  final double size;
 
   const SendingIndicator({
     Key key,
     this.message,
-    this.allRead = false,
+    this.isMessageRead = false,
+    this.size = 12,
   }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    if (allRead) {
+    if (isMessageRead) {
       return Icon(
-        Icons.done_all,
-        size: 8,
+        Icons.done_all_rounded,
+        size: size,
         color: StreamChatTheme.of(context).accentColor,
       );
     }
     if (message.status == MessageSendingStatus.SENT || message.status == null) {
       return Icon(
         Icons.done,
-        size: 8,
+        size: size,
         color: IconTheme.of(context).color.withOpacity(0.5),
       );
     }
@@ -32,7 +34,7 @@ class SendingIndicator extends StatelessWidget {
         message.status == MessageSendingStatus.UPDATING) {
       return Icon(
         Icons.access_time,
-        size: 8,
+        size: size,
       );
     }
     return SizedBox();