add border color in recent chat page preparing for presence

Author: Wahid Nasri

lib/ui/items/contact_or_group_item.dart

@@ -8,7 +8,9 @@ class ContactOrGroupItem extends StatelessWidget {
   final Function()? onTap;
   final Widget? subtitle;
   final Widget? trailing;
-  const ContactOrGroupItem({Key? key, required this.chat, this.onTap, this.subtitle, this.trailing})
+  final int? avatarBorderWidth;
+  final Color? avatarBorderColor;
+  const ContactOrGroupItem({Key? key, required this.chat, this.onTap, this.subtitle, this.trailing, this.avatarBorderWidth, this.avatarBorderColor})
       : super(key: key);
 
   @override
@@ -28,7 +30,7 @@ class ContactOrGroupItem extends StatelessWidget {
           ],
         ),
         subtitle: subtitle ?? Text("Room: " + chat.roomId),
-        leading: Hero(tag: "avatar_" + chat.id, child: ContactAvatar(chat: chat)),
+        leading: Hero(tag: "avatar_" + chat.id, child: ContactAvatar(chat: chat, borderColor: avatarBorderColor, borderWidth: avatarBorderWidth)),
         trailing: trailing,
       ),
     );

lib/ui/screens/main/chats_page.dart

@@ -29,6 +29,8 @@ class ChatsPage extends StatelessWidget {
                       chat: chats[position].toContactChat(),
                       subtitle: _subtitle(chats[position]),
                       trailing: Text(DateFormat('HH:mm').format(dt)),
+                      avatarBorderWidth: chats[position].is_group ? 0 : 2,
+                      avatarBorderColor: chats[position].is_group ? null : Colors.grey,//fixme: use color for presence
                       onTap: () {
                         _openRoom(context, chats[position].toContactChat());
                       });

lib/ui/views/contact_avatar.dart

@@ -1,40 +1,66 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_mqtt/abstraction/models/ContactChat.dart';
+import 'package:flutter_mqtt/ui/widgets/avatar_cancellable.dart';
 
 class ContactAvatar extends StatelessWidget {
   final ContactChat chat;
   final double? radius;
-  const ContactAvatar({Key? key, required this.chat, this.radius})
+  final int? borderWidth;
+  final Color? borderColor;
+  const ContactAvatar(
+      {Key? key,
+      required this.chat,
+      this.radius,
+      this.borderWidth,
+      this.borderColor})
       : super(key: key);
 
   @override
   Widget build(BuildContext context) {
     if (chat.isGroup ?? false) {
-      return chat.avatar != null
-          ? CircleAvatar(
-              foregroundImage: NetworkImage(chat.avatar!),
-              radius: radius ?? 20,
-            )
-          : CircleAvatar(
-              child: Icon(
-                Icons.group,
-                size: radius ?? 25,
-              ),
-              radius: radius ?? 20,
-            );
+      return _buildForGroup();
     } else {
-      return chat.avatar != null
-          ? CircleAvatar(
-              foregroundImage: NetworkImage(
-                chat.avatar!,
-              ),
-              radius: radius ?? 20)
-          : CircleAvatar(
-              child: Icon(
-                Icons.person,
-                size: radius ?? 25,
-              ),
-              radius: radius ?? 20);
+      return _buildForContact();
     }
   }
+
+  Widget _buildForGroup() {
+    double theRadiusForImage = radius ?? 20;
+    double iconSize = radius ?? 25;
+    return chat.avatar != null
+        ? CircleAvatar(
+            foregroundImage: NetworkImage(chat.avatar!),
+            radius: theRadiusForImage,
+          )
+        : CircleAvatar(
+            child: Icon(
+              Icons.group,
+              size: iconSize,
+            ),
+            radius: theRadiusForImage,
+          );
+  }
+
+  Widget _buildForContact() {
+    double theRadiusForImage = radius ?? 20;
+    double iconSize = radius ?? 25;
+    int theBorderWidth = borderWidth ?? 0;
+
+    return chat.avatar != null
+        ? CircleAvatar(
+            radius: theRadiusForImage + theBorderWidth,
+            backgroundColor: borderColor ?? Colors.grey,
+            child: CircleAvatar(
+                foregroundImage: NetworkImage(
+                  chat.avatar!,
+                ),
+                radius: theRadiusForImage),
+          )
+        : CircleAvatar(
+            child: Icon(
+              Icons.person,
+              size: iconSize,
+            ),
+            radius: theRadiusForImage);
+  }
 }