feat:✨Added a support for showing message time in message bubble. Rem…

…oved enableSwipeToSeeTime(bool) & added showMessageTimeIn(Enum) from FeatureActiveConfig class.(#115)

CHANGELOG.md

@@ -1,3 +1,9 @@
+## [1.4.0] (UnReleased)
+
+* **Feat**: [115](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/issues/115) Added
+  option for showing message sent/received time in message bubble. Removed 'enableSwipeToSeeTime'
+  & added 'showMessageTimeIn' from FeatureActiveConfig class for the visibility of message time.
+
 ## [1.3.1]
 
 * **Feat**: [105](https://github.com/SimformSolutionsPvtLtd/flutter_chatview/pull/105) Allow user 

example/lib/main.dart

@@ -81,6 +81,7 @@ class _ChatScreenState extends State<ChatScreen> {
         featureActiveConfig: const FeatureActiveConfig(
           lastSeenAgoBuilderVisibility: true,
           receiptsBuilderVisibility: true,
+          messageTimePositionType: MessageTimePositionType.insideChatBubble,
         ),
         chatViewState: ChatViewState.hasMessages,
         chatViewStateConfig: ChatViewStateConfiguration(

lib/src/models/feature_active_config.dart

@@ -1,9 +1,10 @@
+import 'package:chatview/chatview.dart';
+
 class FeatureActiveConfig {
   const FeatureActiveConfig({
     this.enableSwipeToReply = true,
     this.enableReactionPopup = true,
     this.enableTextField = true,
-    this.enableSwipeToSeeTime = true,
     this.enableCurrentUserProfileAvatar = false,
     this.enableOtherUserProfileAvatar = true,
     this.enableReplySnackBar = true,
@@ -12,8 +13,8 @@ class FeatureActiveConfig {
     this.enableDoubleTapToLike = true,
     this.lastSeenAgoBuilderVisibility = true,
     this.receiptsBuilderVisibility = true,
-  });
-
+    this.messageTimePositionType = MessageTimePositionType.onRightSwipe,
+  }) ;
   /// Used for enable/disable swipe to reply.
   final bool enableSwipeToReply;
 
@@ -23,9 +24,6 @@ class FeatureActiveConfig {
   /// Used for enable/disable text field.
   final bool enableTextField;
 
-  /// Used for enable/disable swipe whole chat to see message created time.
-  final bool enableSwipeToSeeTime;
-
   /// Used for enable/disable current user profile circle.
   final bool enableCurrentUserProfileAvatar;
 
@@ -49,4 +47,8 @@ class FeatureActiveConfig {
 
   /// Controls the visibility of the message [receiptsBuilder]
   final bool receiptsBuilderVisibility;
+
+  /// Controls the Position of message created time.
+  /// default value: onRightSwipe
+  final MessageTimePositionType messageTimePositionType;
 }

lib/src/models/message_configuration.dart

@@ -19,10 +19,11 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-import 'package:chatview/src/models/models.dart';
+import 'package:chatview/chatview.dart';
 import 'package:chatview/src/models/voice_message_configuration.dart';
 import 'package:flutter/material.dart';
 
+
 class MessageConfiguration {
   /// Provides configuration of image message appearance.
   final ImageMessageConfiguration? imageMessageConfig;
@@ -39,11 +40,15 @@ class MessageConfiguration {
   /// Configurations for voice message bubble
   final VoiceMessageConfiguration? voiceMessageConfig;
 
+  /// Allow user to set custom formatting of message time.
+  final MessageDateTimeBuilder? messageDateTimeBuilder;
+
   const MessageConfiguration({
     this.imageMessageConfig,
     this.messageReactionConfig,
     this.emojiMessageConfig,
     this.customMessageBuilder,
     this.voiceMessageConfig,
+    this.messageDateTimeBuilder,
   });
 }

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,22 @@ extension ChatViewStateExtension on ChatViewState {
 
   bool get noMessages => this == ChatViewState.noData;
 }
+
+enum MessageTimePositionType {
+  /// Used for viewing the message created time inside the chatBubble.
+  insideChatBubble,
+  /// Used for viewing the message created time outside the chatBubble.
+  outsideChatBubble,
+  /// Used for enable/disable swipe whole chat to see message created time.
+  onRightSwipe,
+  /// Used for disabling the viewing of the message created time.
+  disable;
+
+  bool get isInsideChatBubble => this == insideChatBubble;
+
+  bool get isOutSideChatBubble => this == outsideChatBubble;
+
+  bool get isOnRightSwipe => this == onRightSwipe;
+
+  bool get isDisable => this == disable;
+}

lib/src/values/typedefs.dart

@@ -35,3 +35,4 @@ typedef VoidCallBackWithFuture = Future<void> Function();
 typedef StringsCallBack = void Function(String emoji, String messageId);
 typedef StringWithReturnWidget = Widget Function(String separator);
 typedef DragUpdateDetailsCallback = void Function(DragUpdateDetails);
+typedef MessageDateTimeBuilder = Widget Function(DateTime date);

lib/src/widgets/chat_bubble_widget.dart

@@ -127,13 +127,15 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
     final messagedUser = chatController?.getUserFromId(widget.message.sendBy);
     return Stack(
       children: [
-        if (featureActiveConfig?.enableSwipeToSeeTime ?? true) ...[
+        if (featureActiveConfig?.messageTimePositionType.isOnRightSwipe ?? true) ...[
           Visibility(
             visible: widget.slideAnimation?.value.dx == 0.0 ? false : true,
             child: Positioned.fill(
               child: Align(
                 alignment: Alignment.centerRight,
                 child: MessageTimeWidget(
+                  messageDateTimeBuilder:
+                      widget.messageConfig?.messageDateTimeBuilder,
                   messageTime: widget.message.createdAt,
                   isCurrentUser: isMessageBySender,
                   messageTimeIconColor: widget.messageTimeIconColor,

lib/src/widgets/chat_list_widget.dart

@@ -192,7 +192,7 @@ class _ChatListWidgetState extends State<ChatListWidget>
                     showTypingIndicator: showTypingIndicator,
                     scrollController: scrollController,
                     isEnableSwipeToSeeTime:
-                        featureActiveConfig?.enableSwipeToSeeTime ?? true,
+                        featureActiveConfig?.messageTimePositionType.isOnRightSwipe ?? true,
                     chatBackgroundConfig: widget.chatBackgroundConfig,
                     assignReplyMessage: widget.assignReplyMessage,
                     replyMessage: widget.replyMessage,

lib/src/widgets/image_message_view.dart

@@ -22,10 +22,12 @@
 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:chatview/src/widgets/message_time_widget.dart';
 import 'package:flutter/material.dart';
 
+import 'chat_view_inherited_widget.dart';
 import 'reaction_widget.dart';
 import 'share_icon.dart';
 
@@ -38,6 +40,7 @@ class ImageMessageView extends StatelessWidget {
     this.messageReactionConfig,
     this.highlightImage = false,
     this.highlightScale = 1.2,
+    this.messageDateTimeBuilder,
   }) : super(key: key);
 
   /// Provides message instance of chat.
@@ -58,6 +61,9 @@ class ImageMessageView extends StatelessWidget {
   /// Provides scale of highlighted image when user taps on replied image.
   final double highlightScale;
 
+  /// Allow user to set custom formatting of message time.
+  final MessageDateTimeBuilder? messageDateTimeBuilder;
+
   String get imageUrl => message.message;
 
   Widget get iconButton => ShareIcon(
@@ -67,6 +73,10 @@ class ImageMessageView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final messageTimePositionType = ChatViewInheritedWidget.of(context)
+            ?.featureActiveConfig
+            .messageTimePositionType ??
+        MessageTimePositionType.onRightSwipe;
     return Row(
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment:
@@ -139,6 +149,17 @@ class ImageMessageView extends StatelessWidget {
                 reaction: message.reaction,
                 messageReactionConfig: messageReactionConfig,
               ),
+            if (!messageTimePositionType.isOnRightSwipe &&
+                !messageTimePositionType.isDisable)
+              Positioned(
+                right: message.reaction.reactions.isNotEmpty ? 16 : 18,
+                bottom: 20,
+                child: messageDateTimeBuilder?.call(message.createdAt) ??
+                    MessageTimeWidget(
+                      isCurrentUser: isMessageBySender,
+                      messageTime: message.createdAt,
+                    ),
+              ),
           ],
         ),
         if (!isMessageBySender) iconButton,

lib/src/widgets/message_time_widget.dart

@@ -20,15 +20,19 @@
  * SOFTWARE.
  */
 import 'package:chatview/src/extensions/extensions.dart';
+import 'package:chatview/src/values/typedefs.dart';
 import 'package:flutter/material.dart';
 
+import 'chat_view_inherited_widget.dart';
+
 class MessageTimeWidget extends StatelessWidget {
   const MessageTimeWidget({
     Key? key,
     required this.messageTime,
     required this.isCurrentUser,
     this.messageTimeTextStyle,
     this.messageTimeIconColor,
+    this.messageDateTimeBuilder,
   }) : super(key: key);
 
   /// Provides message crated date time.
@@ -44,37 +48,57 @@ class MessageTimeWidget extends StatelessWidget {
   /// seeing message sending time
   final Color? messageTimeIconColor;
 
+  /// Allow user to set custom formatting of message time.
+  final MessageDateTimeBuilder? messageDateTimeBuilder;
+
   @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,
+    final showMessageTimeIn = ChatViewInheritedWidget.of(context)!
+        .featureActiveConfig
+        .messageTimePositionType;
+    return !showMessageTimeIn.isOnRightSwipe
+        ? Text(
+            messageTime.getTimeFromDateTime,
+            style: messageTimeTextStyle ??
+                TextStyle(
+                  fontSize: 10,
+                  color: Colors.black.withOpacity(0.6),
+                ),
+          )
+        : Align(
+            alignment: Alignment.centerRight,
+            child: messageDateTimeBuilder?.call(messageTime) ??
+                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),
-            ),
-          ],
-        ),
-      ),
-    );
+          );
   }
 }