Merge pull request #20 from Iconica-Development/0.4.0

New Chat UI

CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.4.0 - November 6 2023
+
+- Show amount of unread messages per chat
+- More intuitive chat UI
+- Fix default profile avatars
+
 ## 0.3.4 - October 25 2023
 
 - Add interface methods for getting amount of unread messages

packages/flutter_community_chat/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_community_chat
 description: A new Flutter package project.
-version: 0.3.4
+version: 0.4.0
 
 publish_to: none
 
@@ -19,12 +19,12 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_view
-       ref: 0.3.4
+       ref: 0.4.0
   flutter_community_chat_interface:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_interface
-       ref: 0.3.4
+       ref: 0.4.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0

packages/flutter_community_chat_firebase/lib/service/firebase_chat_service.dart

@@ -29,6 +29,24 @@ class FirebaseChatService implements ChatService {
     _options = options ?? const FirebaseChatOptions();
   }
 
+  StreamSubscription<DocumentSnapshot> _addUnreadChatSubscription(
+    String chatId,
+    String userId,
+    Function(int) onUnreadChatsUpdated,
+  ) {
+    var snapshots = _db
+        .collection(_options.usersCollectionName)
+        .doc(userId)
+        .collection('chats')
+        .doc(chatId)
+        .snapshots();
+
+    return snapshots.listen((snapshot) {
+      var data = snapshot.data();
+      onUnreadChatsUpdated(data?['amount_unread_messages'] ?? 0);
+    });
+  }
+
   StreamSubscription<QuerySnapshot> _addChatSubscription(
     List<String> chatIds,
     Function(List<ChatModel>) onReceivedChats,
@@ -79,6 +97,8 @@ class FirebaseChatService implements ChatService {
             );
           }
         }
+        ChatModel? chatModel;
+
         if (chatData.personal) {
           var otherUserId = List<String>.from(chatData.users).firstWhere(
             (element) => element != currentUser?.id,
@@ -86,8 +106,7 @@ class FirebaseChatService implements ChatService {
           var otherUser = await _userService.getUser(otherUserId);
 
           if (otherUser != null) {
-            chats.add(
+            chatModel = PersonalChatModel(
-              PersonalChatModel(
               id: chatDoc.id,
               user: otherUser,
               lastMessage: messages.isNotEmpty ? messages.last : null,
@@ -97,7 +116,6 @@ class FirebaseChatService implements ChatService {
                   : DateTime.fromMillisecondsSinceEpoch(
                       chatData.lastUsed!.millisecondsSinceEpoch,
                     ),
-              ),
             );
           }
         } else {
@@ -109,8 +127,7 @@ class FirebaseChatService implements ChatService {
               users.add(user);
             }
           }
-          chats.add(
+          chatModel = GroupChatModel(
-            GroupChatModel(
             id: chatDoc.id,
             title: chatData.title ?? '',
             imageUrl: chatData.imageUrl ?? '',
@@ -122,9 +139,27 @@ class FirebaseChatService implements ChatService {
                 : DateTime.fromMillisecondsSinceEpoch(
                     chatData.lastUsed!.millisecondsSinceEpoch,
                   ),
-            ),
           );
         }
+        if (chatModel != null) {
+          _addUnreadChatSubscription(chatModel.id ?? '', currentUser?.id ?? '',
+              (unreadMessages) {
+            // the chatmodel should be updated to reflect the amount of unread messages
+            if (chatModel is PersonalChatModel) {
+              chatModel = (chatModel as PersonalChatModel)
+                  .copyWith(unreadMessages: unreadMessages);
+            } else if (chatModel is GroupChatModel) {
+              chatModel = (chatModel as GroupChatModel)
+                  .copyWith(unreadMessages: unreadMessages);
+            }
+
+            chats = chats
+                .map((chat) => chat.id == chatModel?.id ? chatModel! : chat)
+                .toList();
+            onReceivedChats(chats);
+          });
+          chats.add(chatModel!);
+        }
       }
       onReceivedChats(chats);
     });

packages/flutter_community_chat_firebase/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_community_chat_firebase
 description: A new Flutter package project.
-version: 0.3.4
+version: 0.4.0
 publish_to: none
 
 environment:
@@ -23,7 +23,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_interface
-       ref: 0.3.4
+       ref: 0.4.0
 
 dev_dependencies:
   flutter_lints: ^2.0.0

packages/flutter_community_chat_interface/lib/src/model/chat.dart

@@ -8,12 +8,14 @@ abstract class ChatModel {
   ChatModel({
     this.id,
     this.messages = const [],
+    this.unreadMessages,
     this.lastUsed,
     this.lastMessage,
   });
 
   String? id;
   List<ChatMessageModel>? messages;
+  int? unreadMessages;
   DateTime? lastUsed;
   ChatMessageModel? lastMessage;
 }

packages/flutter_community_chat_interface/lib/src/model/group_chat.dart

@@ -13,9 +13,31 @@ class GroupChatModel extends ChatModel {
     super.messages,
     super.lastUsed,
     super.lastMessage,
+    super.unreadMessages,
   });
 
   final String title;
   final String imageUrl;
   final List<ChatUserModel> users;
+
+  GroupChatModel copyWith({
+    String? id,
+    List<ChatMessageModel>? messages,
+    int? unreadMessages,
+    DateTime? lastUsed,
+    ChatMessageModel? lastMessage,
+    String? title,
+    String? imageUrl,
+    List<ChatUserModel>? users,
+  }) =>
+      GroupChatModel(
+        id: id ?? this.id,
+        messages: messages ?? this.messages,
+        unreadMessages: unreadMessages ?? this.unreadMessages,
+        lastUsed: lastUsed ?? this.lastUsed,
+        lastMessage: lastMessage ?? this.lastMessage,
+        title: title ?? this.title,
+        imageUrl: imageUrl ?? this.imageUrl,
+        users: users ?? this.users,
+      );
 }

packages/flutter_community_chat_interface/lib/src/model/personal_chat.dart

@@ -9,9 +9,27 @@ class PersonalChatModel extends ChatModel {
     required this.user,
     super.id,
     super.messages,
+    super.unreadMessages,
     super.lastUsed,
     super.lastMessage,
   });
 
   final ChatUserModel user;
+
+  PersonalChatModel copyWith({
+    String? id,
+    List<ChatMessageModel>? messages,
+    int? unreadMessages,
+    DateTime? lastUsed,
+    ChatMessageModel? lastMessage,
+    ChatUserModel? user,
+  }) =>
+      PersonalChatModel(
+        id: id ?? this.id,
+        messages: messages ?? this.messages,
+        unreadMessages: unreadMessages ?? this.unreadMessages,
+        lastUsed: lastUsed ?? this.lastUsed,
+        lastMessage: lastMessage ?? this.lastMessage,
+        user: user ?? this.user,
+      );
 }

packages/flutter_community_chat_interface/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_community_chat_interface
 description: A new Flutter package project.
-version: 0.3.4
+version: 0.4.0
 publish_to: none
 
 environment:

packages/flutter_community_chat_view/example/lib/main.dart

@@ -41,7 +41,22 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
       sender: janUser,
       text: 'Met mij gaat het goed, dankje!',
       timestamp: DateTime.now().subtract(const Duration(days: 2)),
-    )
+    ),
+    ChatTextMessageModel(
+      sender: pietUser,
+      text: 'Mooi zo!',
+      timestamp: DateTime.now().subtract(const Duration(days: 1)),
+    ),
+    ChatTextMessageModel(
+      sender: pietUser,
+      text: 'Hoe gaat het?',
+      timestamp: DateTime.now(),
+    ),
+    ChatTextMessageModel(
+      sender: janUser,
+      text: 'Met mij gaat het goed, dankje!',
+      timestamp: DateTime.now().subtract(const Duration(days: 2)),
+    ),
   ];
 
   static final chat = PersonalChatModel(

packages/flutter_community_chat_view/example/pubspec.yaml

@@ -18,7 +18,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_view
-       ref: 0.3.4
+       ref: 0.4.0
 
 dev_dependencies:
   flutter_test:

packages/flutter_community_chat_view/lib/src/components/chat_detail_row.dart

@@ -4,17 +4,23 @@
 
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_community_chat_interface/flutter_community_chat_interface.dart';
+import 'package:flutter_community_chat_view/flutter_community_chat_view.dart';
 import 'package:flutter_community_chat_view/src/components/chat_image.dart';
 import 'package:flutter_community_chat_view/src/services/date_formatter.dart';
 
 class ChatDetailRow extends StatefulWidget {
   const ChatDetailRow({
+    required this.translations,
+    required this.isFirstMessage,
     required this.message,
+    required this.userAvatarBuilder,
     super.key,
   });
 
+  final ChatTranslations translations;
+  final bool isFirstMessage;
   final ChatMessageModel message;
+  final UserAvatarBuilder userAvatarBuilder;
 
   @override
   State<ChatDetailRow> createState() => _ChatDetailRowState();
@@ -25,14 +31,23 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
 
   @override
   Widget build(BuildContext context) => Padding(
-        padding: const EdgeInsets.only(bottom: 43.0),
+        padding: EdgeInsets.only(top: widget.isFirstMessage ? 25.0 : 0),
         child: Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            Padding(
+            Opacity(
+              opacity: widget.isFirstMessage ? 1 : 0,
+              child: Padding(
                 padding: const EdgeInsets.only(left: 10.0),
-              child: ChatImage(
+                child: widget.message.sender.imageUrl != null &&
-                image: widget.message.sender.imageUrl,
+                        widget.message.sender.imageUrl!.isNotEmpty
+                    ? ChatImage(
+                        image: widget.message.sender.imageUrl!,
+                      )
+                    : widget.userAvatarBuilder(
+                        widget.message.sender,
+                        30,
+                      ),
               ),
             ),
             Expanded(
@@ -42,29 +57,19 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                   child: Column(
                     crossAxisAlignment: CrossAxisAlignment.start,
                     mainAxisAlignment: MainAxisAlignment.start,
+                    children: [
+                      if (widget.isFirstMessage)
+                        Row(
+                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                           children: [
                             Text(
-                        widget.message.sender.fullName?.toUpperCase() ?? '',
+                              widget.message.sender.fullName?.toUpperCase() ??
+                                  widget.translations.anonymousUser,
                               style: const TextStyle(
                                 fontSize: 14,
                                 fontWeight: FontWeight.w500,
                               ),
                             ),
-                      Padding(
-                        padding: const EdgeInsets.only(top: 3.0),
-                        child: widget.message is ChatTextMessageModel
-                            ? Text(
-                                (widget.message as ChatTextMessageModel).text,
-                                style: const TextStyle(fontSize: 16),
-                                overflow: TextOverflow.ellipsis,
-                                maxLines: 999,
-                              )
-                            : CachedNetworkImage(
-                                imageUrl:
-                                    (widget.message as ChatImageMessageModel)
-                                        .imageUrl,
-                              ),
-                      ),
                             Padding(
                               padding: const EdgeInsets.only(top: 5.0),
                               child: Text(
@@ -80,6 +85,23 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                             ),
                           ],
                         ),
+                      Padding(
+                        padding: const EdgeInsets.only(top: 3.0),
+                        child: widget.message is ChatTextMessageModel
+                            ? Text(
+                                (widget.message as ChatTextMessageModel).text,
+                                style: const TextStyle(fontSize: 16),
+                                overflow: TextOverflow.ellipsis,
+                                maxLines: 999,
+                              )
+                            : CachedNetworkImage(
+                                imageUrl:
+                                    (widget.message as ChatImageMessageModel)
+                                        .imageUrl,
+                              ),
+                      ),
+                    ],
+                  ),
                 ),
               ),
             ),

packages/flutter_community_chat_view/lib/src/components/chat_image.dart

@@ -7,12 +7,12 @@ import 'package:flutter/material.dart';
 
 class ChatImage extends StatelessWidget {
   const ChatImage({
-    super.key,
+    required this.image,
-    this.image,
     this.size = 40,
+    super.key,
   });
 
-  final String? image;
+  final String image;
   final double size;
 
   @override
@@ -24,10 +24,8 @@ class ChatImage extends StatelessWidget {
         ),
         width: size,
         height: size,
-        child: image == null || image!.isEmpty
+        child: CachedNetworkImage(
-            ? const Center(child: Icon(Icons.person))
+          imageUrl: image,
-            : CachedNetworkImage(
-                imageUrl: image!,
           fit: BoxFit.cover,
         ),
       );

packages/flutter_community_chat_view/lib/src/components/chat_row.dart

@@ -7,12 +7,14 @@ import 'package:flutter/material.dart';
 class ChatRow extends StatelessWidget {
   const ChatRow({
     required this.title,
+    this.unreadMessages = 0,
     this.lastUsed,
     this.subTitle,
     this.avatar,
     super.key,
   });
   final String title;
+  final int unreadMessages;
   final Widget? avatar;
   final String? subTitle;
   final String? lastUsed;
@@ -35,9 +37,11 @@ class ChatRow extends StatelessWidget {
                     title,
                     maxLines: 1,
                     overflow: TextOverflow.ellipsis,
-                    style: const TextStyle(
+                    style: TextStyle(
                       fontSize: 18,
-                      fontWeight: FontWeight.w500,
+                      fontWeight: unreadMessages > 0
+                          ? FontWeight.w600
+                          : FontWeight.w400,
                     ),
                   ),
                   if (subTitle != null)
@@ -45,8 +49,11 @@ class ChatRow extends StatelessWidget {
                       padding: const EdgeInsets.only(top: 3.0),
                       child: Text(
                         subTitle!,
-                        style: const TextStyle(
+                        style: TextStyle(
                           fontSize: 16,
+                          fontWeight: unreadMessages > 0
+                              ? FontWeight.w600
+                              : FontWeight.w400,
                         ),
                         overflow: TextOverflow.ellipsis,
                         maxLines: 1,
@@ -56,6 +63,10 @@ class ChatRow extends StatelessWidget {
               ),
             ),
           ),
+          Column(
+            mainAxisAlignment: MainAxisAlignment.start,
+            crossAxisAlignment: CrossAxisAlignment.end,
+            children: [
               Text(
                 lastUsed ?? '',
                 style: const TextStyle(
@@ -63,6 +74,29 @@ class ChatRow extends StatelessWidget {
                   fontSize: 14,
                 ),
               ),
+              if (unreadMessages > 0) ...[
+                Padding(
+                  padding: const EdgeInsets.only(top: 4.0),
+                  child: Container(
+                    width: 20,
+                    height: 20,
+                    decoration: BoxDecoration(
+                      color: Theme.of(context).colorScheme.primary,
+                      shape: BoxShape.circle,
+                    ),
+                    child: Center(
+                      child: Text(
+                        unreadMessages.toString(),
+                        style: const TextStyle(
+                          fontSize: 14,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ],
+            ],
+          ),
         ],
       );
 }

packages/flutter_community_chat_view/lib/src/config/chat_options.dart

@@ -100,7 +100,7 @@ Widget _createUserAvatar(
   double size,
 ) =>
     ChatImage(
-      image: user.imageUrl,
+      image: user.imageUrl ?? '',
       size: size,
     );
 Widget _createGroupAvatar(

packages/flutter_community_chat_view/lib/src/config/chat_translations.dart

@@ -5,6 +5,7 @@
 class ChatTranslations {
   const ChatTranslations({
     this.chatsTitle = 'Chats',
+    this.chatsUnread = 'unread',
     this.newChatButton = 'Start chat',
     this.newChatTitle = 'Start chat',
     this.image = 'Image',
@@ -19,9 +20,11 @@ class ChatTranslations {
     this.deleteChatModalCancel = 'Cancel',
     this.deleteChatModalConfirm = 'Delete',
     this.noUsersFound = 'No users found',
+    this.anonymousUser = 'Anonymous user',
   });
 
   final String chatsTitle;
+  final String chatsUnread;
   final String newChatButton;
   final String newChatTitle;
   final String deleteChatButton;
@@ -35,4 +38,7 @@ class ChatTranslations {
   final String deleteChatModalCancel;
   final String deleteChatModalConfirm;
   final String noUsersFound;
+
+  /// Shown when the user has no name
+  final String anonymousUser;
 }

packages/flutter_community_chat_view/lib/src/screens/chat_detail_screen.dart

@@ -50,8 +50,8 @@ class ChatDetailScreen extends StatefulWidget {
 
 class _ChatDetailScreenState extends State<ChatDetailScreen> {
   // stream listener that needs to be disposed later
-  late StreamSubscription<List<ChatMessageModel>>? _chatMessagesSubscription;
+  StreamSubscription<List<ChatMessageModel>>? _chatMessagesSubscription;
-  late Stream<List<ChatMessageModel>>? _chatMessages;
+  Stream<List<ChatMessageModel>>? _chatMessages;
 
   @override
   void initState() {
@@ -67,10 +67,11 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
         widget.onReadChat(widget.chat!);
       }
     });
-    // set the chat to read when opening the screen
+    WidgetsBinding.instance.addPostFrameCallback((_) {
       if (widget.chat != null) {
         widget.onReadChat(widget.chat!);
       }
+    });
   }
 
   @override
@@ -135,7 +136,7 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
                                   ? (widget.chat! as PersonalChatModel)
                                           .user
                                           .fullName ??
-                                      ''
+                                      widget.translations.anonymousUser
                                   : '',
                           style: const TextStyle(fontSize: 18),
                         ),
@@ -150,18 +151,31 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
           Expanded(
             child: StreamBuilder<List<ChatMessageModel>>(
               stream: _chatMessages,
-              builder: (BuildContext context, snapshot) => ListView(
+              builder: (BuildContext context, snapshot) {
+                var messages = snapshot.data ?? widget.chat?.messages ?? [];
+                ChatMessageModel? lastMessage;
+                var messageWidgets = <Widget>[];
+
+                for (var message in messages) {
+                  var isFirstMessage = lastMessage == null ||
+                      lastMessage.sender.id != message.sender.id;
+                  messageWidgets.add(
+                    ChatDetailRow(
+                      translations: widget.translations,
+                      message: message,
+                      isFirstMessage: isFirstMessage,
+                      userAvatarBuilder: widget.options.userAvatarBuilder,
+                    ),
+                  );
+                  lastMessage = message;
+                }
+
+                return ListView(
                   reverse: true,
                   padding: const EdgeInsets.only(top: 24.0),
-                children: [
+                  children: messageWidgets.reversed.toList(),
-                  for (var message
+                );
-                      in (snapshot.data ?? widget.chat?.messages ?? [])
+              },
-                          .reversed)
-                    ChatDetailRow(
-                      message: message,
-                    ),
-                ],
-              ),
             ),
           ),
           if (widget.chat != null)

packages/flutter_community_chat_view/lib/src/screens/chat_screen.dart

@@ -13,6 +13,7 @@ class ChatScreen extends StatefulWidget {
     required this.onPressStartChat,
     required this.onPressChat,
     required this.onDeleteChat,
+    this.unreadChats,
     this.translations = const ChatTranslations(),
     super.key,
   });
@@ -20,6 +21,7 @@ class ChatScreen extends StatefulWidget {
   final ChatOptions options;
   final ChatTranslations translations;
   final Stream<List<ChatModel>> chats;
+  final Stream<int>? unreadChats;
   final VoidCallback? onPressStartChat;
   final void Function(ChatModel chat) onDeleteChat;
   final void Function(ChatModel chat) onPressChat;
@@ -37,6 +39,27 @@ class _ChatScreenState extends State<ChatScreen> {
     return widget.options.scaffoldBuilder(
       AppBar(
         title: Text(translations.chatsTitle),
+        centerTitle: true,
+        actions: widget.unreadChats != null
+            ? [
+                StreamBuilder<int>(
+                  stream: widget.unreadChats,
+                  builder: (BuildContext context, snapshot) => Align(
+                    alignment: Alignment.centerRight,
+                    child: Padding(
+                      padding: const EdgeInsets.only(right: 22.0),
+                      child: Text(
+                        '${snapshot.data ?? 0} ${translations.chatsUnread}',
+                        style: const TextStyle(
+                          color: Color(0xFFBBBBBB),
+                          fontSize: 14,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
+              ]
+            : [],
       ),
       Column(
         children: [
@@ -99,12 +122,15 @@ class _ChatScreenState extends State<ChatScreen> {
                               child: widget.options.chatRowContainerBuilder(
                                 (chat is PersonalChatModel)
                                     ? ChatRow(
+                                        unreadMessages:
+                                            chat.unreadMessages ?? 0,
                                         avatar:
                                             widget.options.userAvatarBuilder(
                                           chat.user,
                                           40.0,
                                         ),
-                                        title: chat.user.fullName ?? '',
+                                        title: chat.user.fullName ??
+                                            translations.anonymousUser,
                                         subTitle: chat.lastMessage != null
                                             ? chat.lastMessage
                                                     is ChatTextMessageModel
@@ -122,6 +148,8 @@ class _ChatScreenState extends State<ChatScreen> {
                                       )
                                     : ChatRow(
                                         title: (chat as GroupChatModel).title,
+                                        unreadMessages:
+                                            chat.unreadMessages ?? 0,
                                         subTitle: chat.lastMessage != null
                                             ? chat.lastMessage
                                                     is ChatTextMessageModel

packages/flutter_community_chat_view/lib/src/screens/new_chat_screen.dart

@@ -90,7 +90,8 @@ class _NewChatScreenState extends State<NewChatScreen> {
                           user,
                           40.0,
                         ),
-                        title: user.fullName ?? '',
+                        title:
+                            user.fullName ?? widget.translations.anonymousUser,
                       ),
                     ),
                     onTap: () => widget.onPressCreateChat(user),

packages/flutter_community_chat_view/pubspec.yaml

@@ -4,7 +4,7 @@
 
 name: flutter_community_chat_view
 description: A standard flutter package.
-version: 0.3.4
+version: 0.4.0
 
 publish_to: none
 
@@ -20,7 +20,7 @@ dependencies:
     git: 
        url: https://github.com/Iconica-Development/flutter_community_chat
        path: packages/flutter_community_chat_interface
-       ref: 0.3.4
+       ref: 0.4.0
   cached_network_image: ^3.2.2
   flutter_image_picker:
     git: