add online indicator to useravatar

lib/src/channel_image.dart

@@ -49,6 +49,7 @@ class ChannelImage extends StatelessWidget {
     this.channel,
     this.constraints,
     this.onTap,
+    this.showOnlineStatus = true,
   }) : super(key: key);
 
   /// The channel to show the image of
@@ -60,9 +61,11 @@ class ChannelImage extends StatelessWidget {
   /// The function called when the image is tapped
   final VoidCallback onTap;
 
+  final bool showOnlineStatus;
+
   @override
   Widget build(BuildContext context) {
-    final client = StreamChat.of(context);
+    final streamChat = StreamChat.of(context);
     final channel = this.channel ?? StreamChannel.of(context).channel;
     return StreamBuilder<Map<String, dynamic>>(
         stream: channel.extraDataStream,
@@ -73,8 +76,26 @@ class ChannelImage extends StatelessWidget {
             image = snapshot.data['image'];
           } else if (channel.state.members.length == 2) {
             final otherMember = channel.state.members
-                .firstWhere((member) => member.user.id != client.user.id);
+                .firstWhere((member) => member.user.id != streamChat.user.id);
-            image = otherMember.user.extraData['image'];
+            return StreamBuilder<User>(
+                stream: streamChat.client.state.usersStream
+                    .map((users) => users[otherMember.userId]),
+                initialData: otherMember.user,
+                builder: (context, snapshot) {
+                  return UserAvatar(
+                    user: snapshot.data ?? otherMember.user,
+                    constraints: constraints ??
+                        StreamChatTheme.of(context)
+                            .channelPreviewTheme
+                            .avatarTheme
+                            .constraints,
+                    onTap: onTap != null
+                        ? (_) {
+                            onTap();
+                          }
+                        : null,
+                  );
+                });
           }
 
           return ClipRRect(

lib/src/message_widget.dart

@@ -426,6 +426,7 @@ class _MessageWidgetState extends State<MessageWidget> {
               child: UserAvatar(
                 user: e.user,
                 constraints: BoxConstraints.loose(Size.fromRadius(16)),
+                showOnlineStatus: false,
               ),
             ),
           ),
@@ -648,6 +649,7 @@ class _MessageWidgetState extends State<MessageWidget> {
               user: widget.message.user,
               onTap: widget.onUserAvatarTap,
               constraints: widget.messageTheme.avatarTheme.constraints,
+              showOnlineStatus: false,
             ),
           ),
         ),

lib/src/user_avatar.dart

@@ -9,55 +9,88 @@ class UserAvatar extends StatelessWidget {
     Key key,
     @required this.user,
     this.constraints,
+    this.onlineIndicatorConstraints,
     this.onTap,
+    this.showOnlineStatus = true,
   }) : super(key: key);
 
   final User user;
   final BoxConstraints constraints;
+  final BoxConstraints onlineIndicatorConstraints;
   final void Function(User) onTap;
+  final bool showOnlineStatus;
 
   @override
   Widget build(BuildContext context) {
     return GestureDetector(
-      onTap: () {
+      onTap: onTap != null
-        if (onTap != null) {
+          ? () {
-          onTap(user);
+              if (onTap != null) {
-        }
+                onTap(user);
-      },
+              }
-      child: ClipRRect(
+            }
-        borderRadius: StreamChatTheme.of(context)
+          : null,
-            .ownMessageTheme
+      child: Stack(
-            .avatarTheme
+        children: <Widget>[
-            .borderRadius,
+          ClipRRect(
-        child: Container(
+            borderRadius: StreamChatTheme.of(context)
-          constraints: constraints ??
+                .ownMessageTheme
-              StreamChatTheme.of(context)
+                .avatarTheme
-                  .ownMessageTheme
+                .borderRadius,
-                  .avatarTheme
+            child: Container(
-                  .constraints,
+              constraints: constraints ??
-          decoration: BoxDecoration(
+                  StreamChatTheme.of(context)
-            color: StreamChatTheme.of(context).accentColor,
+                      .ownMessageTheme
+                      .avatarTheme
+                      .constraints,
+              decoration: BoxDecoration(
+                color: StreamChatTheme.of(context).accentColor,
+              ),
+              child: user.extraData?.containsKey('image') ?? false
+                  ? CachedNetworkImage(
+                      imageUrl: user.extraData['image'],
+                      errorWidget: (_, __, ___) {
+                        return Center(
+                          child: Text(
+                            user.extraData?.containsKey('name') ?? false
+                                ? user.extraData['name'][0]
+                                : '',
+                            style: TextStyle(
+                              color: Colors.white,
+                              fontWeight: FontWeight.bold,
+                            ),
+                          ),
+                        );
+                      },
+                      fit: BoxFit.cover,
+                    )
+                  : StreamChatTheme.of(context).defaultUserImage(context, user),
+            ),
           ),
-          child: user.extraData?.containsKey('image') ?? false
+          if (showOnlineStatus && user.online)
-              ? CachedNetworkImage(
+            Positioned(
-                  imageUrl: user.extraData['image'],
+              top: 0,
-                  errorWidget: (_, __, ___) {
+              right: 0,
-                    return Center(
+              child: Material(
-                      child: Text(
+                child: Center(
-                        user.extraData?.containsKey('name') ?? false
+                  child: Container(
-                            ? user.extraData['name'][0]
+                    padding: const EdgeInsets.all(2.0),
-                            : '',
+                    constraints: onlineIndicatorConstraints ??
-                        style: TextStyle(
+                        BoxConstraints.tightFor(
-                          color: Colors.white,
+                          width: 12,
-                          fontWeight: FontWeight.bold,
+                          height: 12,
                         ),
-                      ),
+                    child: Material(
-                    );
+                      shape: CircleBorder(),
-                  },
+                      color: Color(0xff20E070),
-                  fit: BoxFit.cover,
+                    ),
-                )
+                  ),
-              : StreamChatTheme.of(context).defaultUserImage(context, user),
+                ),
-        ),
+                shape: CircleBorder(),
+                color: Colors.white,
+              ),
+            ),
+        ],
       ),
     );
   }