feat:✨Added support to show message time in chat bubble(#115).

SimformSolutionsPvtLtd · Sep 22, 2023 · 75e1dbf · 75e1dbf
1 parent 31eedc2
commit 75e1dbf
Show file tree

Hide file tree

Showing 15 changed files with 325 additions and 138 deletions.
diff --git a/example/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -7,6 +7,7 @@
        </intent>
    </queries>
    <uses-permission android:name="android.permission.INTERNET"/>
+    <uses-permission android:name="android.permission.RECORD_AUDIO"/>
    <application
         android:label="example"
         android:icon="@mipmap/ic_launcher">

diff --git a/example/lib/data.dart b/example/lib/data.dart
@@ -8,7 +8,8 @@ class Data {
       id: '1',
       message: "Hi!",
       createdAt: DateTime.now(),
-      sendBy: '1', // userId of who sends the message
+      sendBy: '1',
+      // userId of who sends the message
       status: MessageStatus.read,
     ),
     Message(
@@ -106,12 +107,35 @@ class Data {
       reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
       status: MessageStatus.read,
     ),
+    Message(
+      id: '12',
+      message: "https://miro.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg",
+      createdAt: DateTime.now(),
+      messageType: MessageType.image,
+      sendBy: '2',
+      status: MessageStatus.read,
+    ),
     Message(
       id: '12',
       message: "🤩🤩",
       createdAt: DateTime.now(),
       sendBy: '2',
       status: MessageStatus.read,
     ),
+    Message(
+      id: '16',
+      message: "🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩🤩",
+      createdAt: DateTime.now(),
+      sendBy: '2',
+      status: MessageStatus.read,
+    ),
+    Message(
+      id: '116',
+      message: "",
+      createdAt: DateTime.now(),
+      sendBy: '2',
+      status: MessageStatus.read,
+      messageType: MessageType.voice,
+    ),
   ];
 }
diff --git a/example/lib/main.dart b/example/lib/main.dart
@@ -78,9 +78,12 @@ class _ChatScreenState extends State<ChatScreen> {
         currentUser: currentUser,
         chatController: _chatController,
         onSendTap: _onSendTap,
-        featureActiveConfig: const FeatureActiveConfig(
-          lastSeenAgoBuilderVisibility: true,
+        featureActiveConfig: FeatureActiveConfig(
+          lastSeenAgoBuilderVisibility: false,
           receiptsBuilderVisibility: true,
+          enablePagination: true,
+          showMessageTimeIn: ShowMessageTimeIn.outsideChatBubble,
+          enableSwipeToSeeTime: true,
         ),
         chatViewState: ChatViewState.hasMessages,
         chatViewStateConfig: ChatViewStateConfiguration(

diff --git a/lib/src/models/feature_active_config.dart b/lib/src/models/feature_active_config.dart
@@ -1,3 +1,5 @@
+import 'package:chatview/chatview.dart';
+
 class FeatureActiveConfig {
   const FeatureActiveConfig({
     this.enableSwipeToReply = true,
@@ -12,8 +14,8 @@ class FeatureActiveConfig {
     this.enableDoubleTapToLike = true,
     this.lastSeenAgoBuilderVisibility = true,
     this.receiptsBuilderVisibility = true,
-  });
-
+    this.showMessageTimeIn = ShowMessageTimeIn.none,
+  }) ;
   /// Used for enable/disable swipe to reply.
   final bool enableSwipeToReply;
 
@@ -49,4 +51,6 @@ class FeatureActiveConfig {
 
   /// Controls the visibility of the message [receiptsBuilder]
   final bool receiptsBuilderVisibility;
+
+  final ShowMessageTimeIn showMessageTimeIn;
 }
diff --git a/lib/src/values/enumaration.dart b/lib/src/values/enumaration.dart
@@ -30,7 +30,7 @@ enum MessageType {
   custom
 }
 
-/// Events, Wheter the user is still typing a message or has
+/// Events, Whether the user is still typing a message or has
 /// typed the message
 enum TypeWriterStatus { typing, typed }
 
@@ -52,3 +52,15 @@ extension ChatViewStateExtension on ChatViewState {
 
   bool get noMessages => this == ChatViewState.noData;
 }
+
+enum ShowMessageTimeIn {
+  insideChatBubble,
+  outsideChatBubble,
+  none;
+
+  bool get isInsideChatBubble => this == insideChatBubble;
+
+  bool get isOutSideChatBubble => this == outsideChatBubble;
+
+  bool get isNone => this == none;
+}
diff --git a/lib/src/widgets/chat_bubble_widget.dart b/lib/src/widgets/chat_bubble_widget.dart
@@ -47,6 +47,7 @@ class ChatBubbleWidget extends StatefulWidget {
     this.messageConfig,
     this.onReplyTap,
     this.shouldHighlight = false,
+    this.showMessageTimeIn = ShowMessageTimeIn.none,
   }) : super(key: key);
 
   /// Represent current instance of message.
@@ -92,6 +93,8 @@ class ChatBubbleWidget extends StatefulWidget {
   /// Flag for when user tap on replied message and highlight actual message.
   final bool shouldHighlight;
 
+  final ShowMessageTimeIn showMessageTimeIn;
+
   @override
   State<ChatBubbleWidget> createState() => _ChatBubbleWidgetState();
 }
@@ -352,6 +355,7 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
                   ?.repliedMsgAutoScrollConfig.highlightScale ??
               1.1,
           onMaxDuration: _onMaxDuration,
+          showMessageTimeIn: widget.showMessageTimeIn,
         ),
       ],
     );

diff --git a/lib/src/widgets/chat_groupedlist_widget.dart b/lib/src/widgets/chat_groupedlist_widget.dart
@@ -47,6 +47,7 @@ class ChatGroupedListWidget extends StatefulWidget {
     this.swipeToReplyConfig,
     this.repliedMessageConfig,
     this.typeIndicatorConfig,
+    this.showMessageTimeIn = ShowMessageTimeIn.none,
   }) : super(key: key);
 
   /// Allow user to swipe to see time while reaction pop is not open.
@@ -92,6 +93,8 @@ class ChatGroupedListWidget extends StatefulWidget {
   /// swipe whole chat.
   final bool isEnableSwipeToSeeTime;
 
+  final ShowMessageTimeIn showMessageTimeIn;
+
   @override
   State<ChatGroupedListWidget> createState() => _ChatGroupedListWidgetState();
 }
@@ -329,6 +332,7 @@ class _ChatGroupedListWidgetState extends State<ChatGroupedListWidget>
                                 false
                             ? (replyId) => _onReplyTap(replyId, snapshot.data)
                             : null,
+                        showMessageTimeIn: widget.showMessageTimeIn,
                       );
                     },
                   );

diff --git a/lib/src/widgets/chat_list_widget.dart b/lib/src/widgets/chat_list_widget.dart
@@ -51,6 +51,7 @@ class ChatListWidget extends StatefulWidget {
     this.loadMoreData,
     this.isLastPage,
     this.onChatListTap,
+    this.showMessageTimeIn = ShowMessageTimeIn.none,
   }) : super(key: key);
 
   /// Provides controller for accessing few function for running chat.
@@ -108,6 +109,8 @@ class ChatListWidget extends StatefulWidget {
   /// Provides callback when user tap anywhere on whole chat.
   final VoidCallBack? onChatListTap;
 
+  final ShowMessageTimeIn showMessageTimeIn;
+
   @override
   State<ChatListWidget> createState() => _ChatListWidgetState();
 }
@@ -221,6 +224,7 @@ class _ChatListWidgetState extends State<ChatListWidget>
                       }
                     },
                     onChatListTap: _onChatListTap,
+                    showMessageTimeIn: widget.showMessageTimeIn,
                   ),
                   if (featureActiveConfig?.enableReactionPopup ?? false)
                     ReactionPopup(

diff --git a/lib/src/widgets/chat_view.dart b/lib/src/widgets/chat_view.dart
@@ -250,6 +250,8 @@ class _ChatViewState extends State<ChatView>
                           assignReplyMessage: (message) => _sendMessageKey
                               .currentState
                               ?.assignReplyMessage(message),
+                          showMessageTimeIn:
+                              widget.featureActiveConfig.showMessageTimeIn,
                         );
                       },
                     ),

diff --git a/lib/src/widgets/chatui_textfield.dart b/lib/src/widgets/chatui_textfield.dart
@@ -106,7 +106,9 @@ class _ChatUITextFieldState extends State<ChatUITextField> {
 
     if (defaultTargetPlatform == TargetPlatform.iOS ||
         defaultTargetPlatform == TargetPlatform.android) {
-      controller = RecorderController();
+      controller = RecorderController(
+
+      );
     }
   }
 

diff --git a/lib/src/widgets/image_message_view.dart b/lib/src/widgets/image_message_view.dart
@@ -22,6 +22,7 @@
 import 'dart:convert';
 import 'dart:io';
 
+import 'package:chatview/chatview.dart';
 import 'package:chatview/src/extensions/extensions.dart';
 import 'package:chatview/src/models/models.dart';
 import 'package:flutter/material.dart';
@@ -38,6 +39,7 @@ class ImageMessageView extends StatelessWidget {
     this.messageReactionConfig,
     this.highlightImage = false,
     this.highlightScale = 1.2,
+    this.showMessageTimeIn = ShowMessageTimeIn.none,
   }) : super(key: key);
 
   /// Provides message instance of chat.
@@ -58,6 +60,8 @@ class ImageMessageView extends StatelessWidget {
   /// Provides scale of highlighted image when user taps on replied image.
   final double highlightScale;
 
+  final ShowMessageTimeIn showMessageTimeIn;
+
   String get imageUrl => message.message;
 
   Widget get iconButton => ShareIcon(
@@ -139,6 +143,18 @@ class ImageMessageView extends StatelessWidget {
                 reaction: message.reaction,
                 messageReactionConfig: messageReactionConfig,
               ),
+            if(!showMessageTimeIn.isNone)
+            Positioned(
+              right: message.reaction.reactions.isNotEmpty ? 16 : 18,
+              bottom: 20,
+              child: Text(
+                message.createdAt.getTimeFromDateTime,
+                style: TextStyle(
+                  fontSize: 10,
+                  color: Colors.white.withOpacity(0.5),
+                ),
+              ),
+            ),
           ],
         ),
         if (!isMessageBySender) iconButton,

diff --git a/lib/src/widgets/message_time_widget.dart b/lib/src/widgets/message_time_widget.dart
@@ -19,6 +19,7 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+import 'package:chatview/chatview.dart';
 import 'package:chatview/src/extensions/extensions.dart';
 import 'package:flutter/material.dart';
 
@@ -29,6 +30,7 @@ class MessageTimeWidget extends StatelessWidget {
     required this.isCurrentUser,
     this.messageTimeTextStyle,
     this.messageTimeIconColor,
+    this.showMessageTimeIn = ShowMessageTimeIn.none,
   }) : super(key: key);
 
   /// Provides message crated date time.
@@ -44,37 +46,49 @@ class MessageTimeWidget extends StatelessWidget {
   /// seeing message sending time
   final Color? messageTimeIconColor;
 
+  final ShowMessageTimeIn showMessageTimeIn;
+
   @override
   Widget build(BuildContext context) {
-    return Align(
-      alignment: Alignment.centerRight,
-      child: Padding(
-        padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
-        child: Row(
-          mainAxisSize: MainAxisSize.min,
-          children: [
-            Container(
-              padding: const EdgeInsets.all(2),
-              decoration: BoxDecoration(
-                shape: BoxShape.circle,
-                border: Border.all(
-                  color: messageTimeIconColor ?? Colors.black,
+    return !showMessageTimeIn.isNone
+        ? Text(
+            messageTime.getTimeFromDateTime,
+            style: messageTimeTextStyle ??
+                TextStyle(
+                  fontSize: 10,
+                  color: Colors.black.withOpacity(0.5),
                 ),
+          )
+        : Align(
+            alignment: Alignment.centerRight,
+            child: Padding(
+              padding: const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
+              child: Row(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Container(
+                    padding: const EdgeInsets.all(2),
+                    decoration: BoxDecoration(
+                      shape: BoxShape.circle,
+                      border: Border.all(
+                        color: messageTimeIconColor ?? Colors.black,
+                      ),
+                    ),
+                    child: Icon(
+                      isCurrentUser ? Icons.arrow_forward : Icons.arrow_back,
+                      size: 10,
+                      color: messageTimeIconColor ?? Colors.black,
+                    ),
+                  ),
+                  const SizedBox(width: 4),
+                  Text(
+                    messageTime.getTimeFromDateTime,
+                    style:
+                        messageTimeTextStyle ?? const TextStyle(fontSize: 12),
+                  ),
+                ],
               ),
-              child: Icon(
-                isCurrentUser ? Icons.arrow_forward : Icons.arrow_back,
-                size: 10,
-                color: messageTimeIconColor ?? Colors.black,
-              ),
-            ),
-            const SizedBox(width: 4),
-            Text(
-              messageTime.getTimeFromDateTime,
-              style: messageTimeTextStyle ?? const TextStyle(fontSize: 12),
             ),
-          ],
-        ),
-      ),
-    );
+          );
   }
 }