add unread indicator

lib/src/channel_preview.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:jiffy/jiffy.dart';
 import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/unread_indicator.dart';
 
 import '../stream_chat_flutter.dart';
 import 'channel_name.dart';
@@ -53,16 +54,8 @@ class ChannelPreview extends StatelessWidget {
         children: <Widget>[
           _buildDate(context),
           if (channel.state.unreadCount > 0)
-            Padding(
+            UnreadIndicator(
-              padding: const EdgeInsets.only(left: 8.0),
+              channel: channel,
-              child: CircleAvatar(
-                backgroundColor: Color(0xffd0021B),
-                radius: 6,
-                child: Text(
-                  '${channel.state.unreadCount}',
-                  style: TextStyle(fontSize: 8),
-                ),
-              ),
             ),
         ],
       ),

lib/src/stream_chat.dart

@@ -172,6 +172,7 @@ class StreamChatState extends State<StreamChat> with WidgetsBindingObserver {
         title: themeData?.channelPreviewTheme?.title,
         lastMessageAt: themeData?.channelPreviewTheme?.lastMessageAt,
         subtitle: themeData?.channelPreviewTheme?.subtitle,
+        unreadCounterColor: themeData?.channelPreviewTheme?.unreadCounterColor,
       ),
     );
     return theme;

lib/src/stream_chat_theme.dart

@@ -191,6 +191,7 @@ class StreamChatThemeData {
         ),
       ),
       channelPreviewTheme: ChannelPreviewTheme(
+        unreadCounterColor: Color(0xffd0021B),
         avatarTheme: AvatarTheme(
           borderRadius: BorderRadius.circular(20),
           constraints: BoxConstraints.tightFor(
@@ -415,12 +416,14 @@ class ChannelPreviewTheme {
   final TextStyle subtitle;
   final TextStyle lastMessageAt;
   final AvatarTheme avatarTheme;
+  final Color unreadCounterColor;
 
   const ChannelPreviewTheme({
     this.title,
     this.subtitle,
     this.lastMessageAt,
     this.avatarTheme,
+    this.unreadCounterColor,
   });
 
   ChannelPreviewTheme copyWith({
@@ -428,12 +431,14 @@ class ChannelPreviewTheme {
     TextStyle subtitle,
     TextStyle lastMessageAt,
     AvatarTheme avatarTheme,
+    Color unreadCounterColor,
   }) =>
       ChannelPreviewTheme(
         title: title ?? this.title,
         subtitle: subtitle ?? this.subtitle,
         lastMessageAt: lastMessageAt ?? this.lastMessageAt,
         avatarTheme: avatarTheme ?? this.avatarTheme,
+        unreadCounterColor: unreadCounterColor ?? this.unreadCounterColor,
       );
 }
 

lib/src/unread_indicator.dart

@@ -0,0 +1,28 @@
+import 'package:flutter/material.dart';
+import 'package:stream_chat/stream_chat.dart';
+import 'package:stream_chat_flutter/src/stream_chat_theme.dart';
+
+class UnreadIndicator extends StatelessWidget {
+  const UnreadIndicator({
+    Key key,
+    @required this.channel,
+  }) : super(key: key);
+
+  final Channel channel;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.only(left: 8.0),
+      child: CircleAvatar(
+        backgroundColor:
+            StreamChatTheme.of(context).channelPreviewTheme.unreadCounterColor,
+        radius: 6,
+        child: Text(
+          '${channel.state.unreadCount}',
+          style: TextStyle(fontSize: 8),
+        ),
+      ),
+    );
+  }
+}