feat: added chat options

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## 0.6.0 - December 1 2023
 
 - Made the message controller nullable
+- Improved chat UI and added showTime option for chatDetailScreen to always show the time
 
 ## 0.5.0 - November 29 2023
 

packages/flutter_community_chat_view/example/lib/main.dart

@@ -75,6 +75,7 @@ class _MyStatefulWidgetState extends State<MyStatefulWidget> {
     users: [pietUser, janUser],
     lastUsed: DateTime.now().subtract(const Duration(days: 1)),
     messages: messages,
+    canBeDeleted: false,
   );
 
   Stream<List<ChatModel>> get chatStream => (() {

packages/flutter_community_chat_view/example/pubspec.yaml

@@ -15,10 +15,7 @@ dependencies:
   flutter:
     sdk: flutter
   flutter_community_chat_view:
-    git:
+    path: ..
-      url: https://github.com/Iconica-Development/flutter_community_chat
-      path: packages/flutter_community_chat_view
-      ref: 0.6.0
 
 dev_dependencies:
   flutter_test:

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

@@ -11,16 +11,18 @@ 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,
+    this.previousMessage,
+    this.showTime = false,
     super.key,
   });
 
   final ChatTranslations translations;
-  final bool isFirstMessage;
   final ChatMessageModel message;
   final UserAvatarBuilder userAvatarBuilder;
+  final bool showTime;
+  final ChatMessageModel? previousMessage;
 
   @override
   State<ChatDetailRow> createState() => _ChatDetailRowState();
@@ -30,14 +32,25 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
   final DateFormatter _dateFormatter = DateFormatter();
 
   @override
-  Widget build(BuildContext context) => Padding(
+  Widget build(BuildContext context) {
-        padding: EdgeInsets.only(top: widget.isFirstMessage ? 25.0 : 0),
+    var isNewDate = widget.previousMessage != null &&
+        widget.message.timestamp.day != widget.previousMessage!.timestamp.day;
+    return Padding(
+      padding: EdgeInsets.only(
+        top: isNewDate ||
+                widget.previousMessage == null ||
+                widget.previousMessage?.sender.id != widget.message.sender.id
+            ? 25.0
+            : 0,
+      ),
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-            Opacity(
+          if (isNewDate ||
-              opacity: widget.isFirstMessage ? 1 : 0,
+              widget.previousMessage == null ||
-              child: Padding(
+              widget.previousMessage?.sender.id !=
+                  widget.message.sender.id) ...[
+            Padding(
               padding: const EdgeInsets.only(left: 10.0),
               child: widget.message.sender.imageUrl != null &&
                       widget.message.sender.imageUrl!.isNotEmpty
@@ -49,7 +62,11 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                       30,
                     ),
             ),
+          ] else ...[
+            const SizedBox(
+              width: 50,
             ),
+          ],
           Expanded(
             child: Container(
               child: Padding(
@@ -58,7 +75,10 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                   crossAxisAlignment: CrossAxisAlignment.start,
                   mainAxisAlignment: MainAxisAlignment.start,
                   children: [
-                      if (widget.isFirstMessage)
+                    if (isNewDate ||
+                        widget.previousMessage == null ||
+                        widget.previousMessage?.sender.id !=
+                            widget.message.sender.id)
                       Row(
                         mainAxisAlignment: MainAxisAlignment.spaceBetween,
                         children: [
@@ -88,9 +108,27 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
                     Padding(
                       padding: const EdgeInsets.only(top: 3.0),
                       child: widget.message is ChatTextMessageModel
-                            ? Text(
+                          ? RichText(
-                                (widget.message as ChatTextMessageModel).text,
+                              text: TextSpan(
+                                text: (widget.message as ChatTextMessageModel)
+                                    .text,
                                 style: const TextStyle(fontSize: 16),
+                                children: <TextSpan>[
+                                  if (widget.showTime)
+                                    TextSpan(
+                                      text: " ${_dateFormatter.format(
+                                            date: widget.message.timestamp,
+                                            showFullDate: true,
+                                          ).split(' ').last}",
+                                      style: const TextStyle(
+                                        fontSize: 12,
+                                        color: Color(0xFFBBBBBB),
+                                      ),
+                                    )
+                                  else
+                                    const TextSpan(),
+                                ],
+                              ),
                               overflow: TextOverflow.ellipsis,
                               maxLines: 999,
                             )
@@ -108,4 +146,5 @@ class _ChatDetailRowState extends State<ChatDetailRow> {
         ],
       ),
     );
+  }
 }

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

@@ -23,6 +23,7 @@ class ChatDetailScreen extends StatefulWidget {
     this.chatMessages,
     this.onPressChatTitle,
     this.iconColor,
+    this.showTime = false,
     super.key,
   });
 
@@ -43,6 +44,7 @@ class ChatDetailScreen extends StatefulWidget {
 
   /// The color of the icon buttons in the chat bottom.
   final Color? iconColor;
+  final bool showTime;
 
   @override
   State<ChatDetailScreen> createState() => _ChatDetailScreenState();
@@ -154,21 +156,21 @@ class _ChatDetailScreenState extends State<ChatDetailScreen> {
               stream: _chatMessages,
               builder: (BuildContext context, snapshot) {
                 var messages = snapshot.data ?? widget.chat?.messages ?? [];
-                ChatMessageModel? lastMessage;
+                ChatMessageModel? previousMessage;
+
                 var messageWidgets = <Widget>[];
 
                 for (var message in messages) {
-                  var isFirstMessage = lastMessage == null ||
-                      lastMessage.sender.id != message.sender.id;
                   messageWidgets.add(
                     ChatDetailRow(
+                      previousMessage: previousMessage,
+                      showTime: widget.showTime,
                       translations: widget.translations,
                       message: message,
-                      isFirstMessage: isFirstMessage,
                       userAvatarBuilder: widget.options.userAvatarBuilder,
                     ),
                   );
-                  lastMessage = message;
+                  previousMessage = message;
                 }
 
                 return ListView(

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

@@ -2,6 +2,8 @@
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
+// ignore_for_file: lines_longer_than_80_chars
+
 import 'package:flutter/material.dart';
 import 'package:flutter_community_chat_view/flutter_community_chat_view.dart';
 import 'package:flutter_community_chat_view/src/services/date_formatter.dart';
@@ -16,6 +18,7 @@ class ChatScreen extends StatefulWidget {
     this.deleteChatDialog,
     this.unreadChats,
     this.translations = const ChatTranslations(),
+    this.disableDismiss = false,
     super.key,
   });
 
@@ -26,6 +29,7 @@ class ChatScreen extends StatefulWidget {
   final VoidCallback? onPressStartChat;
   final void Function(ChatModel chat) onDeleteChat;
   final void Function(ChatModel chat) onPressChat;
+  final bool disableDismiss;
 
   /// Method to optionally change the bottomsheetdialog
   final Future<bool?> Function(BuildContext, ChatModel)? deleteChatDialog;
@@ -76,12 +80,15 @@ class _ChatScreenState extends State<ChatScreen> {
                     children: [
                       for (ChatModel chat in snapshot.data ?? []) ...[
                         Builder(
-                          builder: (context) => Dismissible(
+                          builder: (context) => !widget.disableDismiss
+                              ? Dismissible(
                                   confirmDismiss: (_) =>
-                                widget.deleteChatDialog?.call(context, chat) ??
+                                      widget.deleteChatDialog
+                                          ?.call(context, chat) ??
                                       showModalBottomSheet(
                                         context: context,
-                                  builder: (BuildContext context) => Container(
+                                        builder: (BuildContext context) =>
+                                            Container(
                                           padding: const EdgeInsets.all(16.0),
                                           child: Column(
                                             mainAxisSize: MainAxisSize.min,
@@ -90,7 +97,8 @@ class _ChatScreenState extends State<ChatScreen> {
                                                 chat.canBeDeleted
                                                     ? translations
                                                         .deleteChatModalTitle
-                                              : translations.chatCantBeDeleted,
+                                                    : translations
+                                                        .chatCantBeDeleted,
                                                 style: const TextStyle(
                                                   fontSize: 20,
                                                   fontWeight: FontWeight.bold,
@@ -101,8 +109,9 @@ class _ChatScreenState extends State<ChatScreen> {
                                                 Text(
                                                   translations
                                                       .deleteChatModalDescription,
-                                            style:
+                                                  style: const TextStyle(
-                                                const TextStyle(fontSize: 16),
+                                                    fontSize: 16,
+                                                  ),
                                                 ),
                                               const SizedBox(height: 16),
                                               Row(
@@ -156,62 +165,18 @@ class _ChatScreenState extends State<ChatScreen> {
                                   key: ValueKey(
                                     chat.id.toString(),
                                   ),
-                            child: GestureDetector(
+                                  child: ChatListItem(
-                              onTap: () => widget.onPressChat(chat),
+                                    widget: widget,
-                              child: widget.options.chatRowContainerBuilder(
+                                    chat: chat,
-                                (chat is PersonalChatModel)
+                                    translations: translations,
-                                    ? ChatRow(
+                                    dateFormatter: _dateFormatter,
-                                        unreadMessages:
-                                            chat.unreadMessages ?? 0,
-                                        avatar:
-                                            widget.options.userAvatarBuilder(
-                                          chat.user,
-                                          40.0,
                                   ),
-                                        title: chat.user.fullName ??
-                                            translations.anonymousUser,
-                                        subTitle: chat.lastMessage != null
-                                            ? chat.lastMessage
-                                                    is ChatTextMessageModel
-                                                ? (chat.lastMessage!
-                                                        as ChatTextMessageModel)
-                                                    .text
-                                                : '📷 '
-                                                    '${translations.image}'
-                                            : '',
-                                        lastUsed: chat.lastUsed != null
-                                            ? _dateFormatter.format(
-                                                date: chat.lastUsed!,
                                 )
-                                            : null,
+                              : ChatListItem(
-                                      )
+                                  widget: widget,
-                                    : ChatRow(
+                                  chat: chat,
-                                        title: (chat as GroupChatModel).title,
+                                  translations: translations,
-                                        unreadMessages:
+                                  dateFormatter: _dateFormatter,
-                                            chat.unreadMessages ?? 0,
-                                        subTitle: chat.lastMessage != null
-                                            ? chat.lastMessage
-                                                    is ChatTextMessageModel
-                                                ? (chat.lastMessage!
-                                                        as ChatTextMessageModel)
-                                                    .text
-                                                : '📷 '
-                                                    '${translations.image}'
-                                            : '',
-                                        avatar:
-                                            widget.options.groupAvatarBuilder(
-                                          chat.title,
-                                          chat.imageUrl,
-                                          40.0,
-                                        ),
-                                        lastUsed: chat.lastUsed != null
-                                            ? _dateFormatter.format(
-                                                date: chat.lastUsed!,
-                                              )
-                                            : null,
-                                      ),
-                              ),
-                            ),
                                 ),
                         ),
                       ],
@@ -232,3 +197,68 @@ class _ChatScreenState extends State<ChatScreen> {
     );
   }
 }
+
+class ChatListItem extends StatelessWidget {
+  const ChatListItem({
+    required this.widget,
+    required this.chat,
+    required this.translations,
+    required DateFormatter dateFormatter,
+    super.key,
+  }) : _dateFormatter = dateFormatter;
+
+  final ChatScreen widget;
+  final ChatModel chat;
+  final ChatTranslations translations;
+  final DateFormatter _dateFormatter;
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () => widget.onPressChat(chat),
+      child: widget.options.chatRowContainerBuilder(
+        (chat is PersonalChatModel)
+            ? ChatRow(
+                unreadMessages: chat.unreadMessages ?? 0,
+                avatar: widget.options.userAvatarBuilder(
+                  (chat as PersonalChatModel).user,
+                  40.0,
+                ),
+                title: (chat as PersonalChatModel).user.fullName ??
+                    translations.anonymousUser,
+                subTitle: chat.lastMessage != null
+                    ? chat.lastMessage is ChatTextMessageModel
+                        ? (chat.lastMessage! as ChatTextMessageModel).text
+                        : '📷 '
+                            '${translations.image}'
+                    : '',
+                lastUsed: chat.lastUsed != null
+                    ? _dateFormatter.format(
+                        date: chat.lastUsed!,
+                      )
+                    : null,
+              )
+            : ChatRow(
+                title: (chat as GroupChatModel).title,
+                unreadMessages: chat.unreadMessages ?? 0,
+                subTitle: chat.lastMessage != null
+                    ? chat.lastMessage is ChatTextMessageModel
+                        ? (chat.lastMessage! as ChatTextMessageModel).text
+                        : '📷 '
+                            '${translations.image}'
+                    : '',
+                avatar: widget.options.groupAvatarBuilder(
+                  (chat as GroupChatModel).title,
+                  (chat as GroupChatModel).imageUrl,
+                  40.0,
+                ),
+                lastUsed: chat.lastUsed != null
+                    ? _dateFormatter.format(
+                        date: chat.lastUsed!,
+                      )
+                    : null,
+              ),
+      ),
+    );
+  }
+}