Improved design

lib/components/avatar.dart

@@ -1,5 +1,6 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:famedlysdk/famedlysdk.dart';
+import 'package:fluffychat/utils/string_color.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -7,10 +8,11 @@ import 'matrix.dart';
 
 class Avatar extends StatelessWidget {
   final MxContent mxContent;
+  final String name;
   final double size;
   final Function onTap;
 
-  const Avatar(this.mxContent, {this.size = 40, this.onTap, Key key})
+  const Avatar(this.mxContent, this.name, {this.size = 40, this.onTap, Key key})
       : super(key: key);
 
   @override
@@ -21,6 +23,12 @@ class Avatar extends StatelessWidget {
       height: size * MediaQuery.of(context).devicePixelRatio,
       method: ThumbnailMethod.scale,
     );
+    String fallbackLetters = "@";
+    if ((name?.length ?? 0) >= 2) {
+      fallbackLetters = name.substring(0, 2);
+    } else if ((name?.length ?? 0) == 1) {
+      fallbackLetters = name;
+    }
     return InkWell(
       onTap: onTap,
       child: CircleAvatar(
@@ -34,9 +42,9 @@ class Avatar extends StatelessWidget {
                     src,
                   )
             : null,
-        backgroundColor: Theme.of(context).secondaryHeaderColor,
+        backgroundColor: name?.color ?? Theme.of(context).secondaryHeaderColor,
         child: mxContent.mxc.isEmpty
-            ? Text("@", style: TextStyle(color: Colors.blueGrey))
+            ? Text(fallbackLetters, style: TextStyle(color: Colors.white))
             : null,
       ),
     );

lib/components/list_items/chat_list_item.dart

@@ -86,7 +86,7 @@ class ChatListItem extends StatelessWidget {
     return Material(
       color: activeChat ? Color(0xFFE8E8E8) : Colors.white,
       child: ListTile(
-        leading: Avatar(room.avatar),
+        leading: Avatar(room.avatar, room.displayname),
         title: Row(
           children: <Widget>[
             Expanded(

lib/components/list_items/message.dart

@@ -4,6 +4,7 @@ import 'package:fluffychat/components/dialogs/redact_message_dialog.dart';
 import 'package:fluffychat/components/message_content.dart';
 import 'package:fluffychat/utils/app_route.dart';
 import 'package:fluffychat/utils/date_time_extension.dart';
+import 'package:fluffychat/utils/string_color.dart';
 import 'package:fluffychat/views/content_web_view.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@@ -144,7 +145,7 @@ class Message extends StatelessWidget {
                         style: TextStyle(
                           color: ownMessage
                               ? textColor
-                              : Theme.of(context).primaryColor,
+                              : event.sender.calcDisplayname().color,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -172,6 +173,7 @@ class Message extends StatelessWidget {
         ? SizedBox(width: 40)
         : Avatar(
             event.sender.avatarUrl,
+            event.sender.calcDisplayname(),
             onTap: () => Navigator.of(context).push(
               AppRoute.defaultRoute(
                 context,
@@ -187,7 +189,7 @@ class Message extends StatelessWidget {
 
     return Padding(
       padding: EdgeInsets.only(
-          left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 12.0),
+          left: 8.0, right: 8.0, bottom: sameSender ? 4.0 : 8.0),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.end,
         mainAxisAlignment: rowMainAxisAlignment,

lib/components/list_items/participant_list_item.dart

@@ -117,7 +117,7 @@ class ParticipantListItem extends StatelessWidget {
           ],
         ),
         subtitle: Text(user.id),
-        leading: Avatar(user.avatarUrl),
+        leading: Avatar(user.avatarUrl, user.calcDisplayname()),
       ),
     );
   }

lib/components/list_items/state_message.dart

@@ -12,7 +12,11 @@ class StateMessage extends StatelessWidget {
   Widget build(BuildContext context) {
     if (event.type == EventTypes.Redaction) return Container();
     return Padding(
-      padding: const EdgeInsets.all(8.0),
+      padding: const EdgeInsets.only(
+        left: 8.0,
+        right: 8.0,
+        bottom: 8.0,
+      ),
       child: Opacity(
         opacity: 0.5,
         child: Bubble(

lib/utils/string_color.dart

@@ -0,0 +1,13 @@
+import 'package:flutter/material.dart';
+
+extension StringColor on String {
+  Color get color {
+    double number = 0.0;
+    for (var i = 0; i < this.length; i++) {
+      number += this.codeUnitAt(i);
+    }
+    number = (number % 10) * 25.5;
+    print(number);
+    return HSLColor.fromAHSL(1, number, 1, 0.35).toColor();
+  }
+}

lib/views/chat_details.dart

@@ -214,12 +214,18 @@ class _ChatDetailsState extends State<ChatDetails> {
                         : Container(),
                   ],
                 )
-              : i < members.length + 1
+              : i < members.length + 1 && false
                   ? ParticipantListItem(members[i - 1])
                   : ListTile(
                       title: Text(
                           "Load more ${actualMembersCount - members.length} participants"),
-                      leading: Icon(Icons.refresh),
+                      leading: CircleAvatar(
+                        backgroundColor: Colors.white,
+                        child: Icon(
+                          Icons.refresh,
+                          color: Colors.grey,
+                        ),
+                      ),
                       onTap: () => requestMoreMembersAction(context),
                     ),
         ),

lib/views/invitation_selection.dart

@@ -68,7 +68,10 @@ class InvitationSelection extends StatelessWidget {
               return ListView.builder(
                 itemCount: contacts.length,
                 itemBuilder: (BuildContext context, int i) => ListTile(
-                  leading: Avatar(contacts[i].avatarUrl),
+                  leading: Avatar(
+                    contacts[i].avatarUrl,
+                    contacts[i].calcDisplayname(),
+                  ),
                   title: Text(contacts[i].calcDisplayname()),
                   subtitle: Text(contacts[i].id),
                   onTap: () => inviteAction(context, contacts[i].id),