feat:✨Added a support for showing message time in message bubble. Removed enableSwipeToSeeTime(bool) & added showMessageTimeIn(Enum) from FeatureActiveConfig class.(#115)

jaiminrana05 · jaiminrana05 · commit 552e024c4797 · 2023-10-03T12:08:18.000+05:30
diff --git a/CHANGELOG.md b/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 
diff --git a/example/lib/data.dart b/example/lib/data.dart
@@ -32,86 +32,86 @@ class Data {
       sendBy: '1',
       status: MessageStatus.read,
     ),
-    Message(
-      id: '5',
-      message: "That's fine",
-      createdAt: DateTime.now(),
-      sendBy: '2',
-      reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['1']),
-      status: MessageStatus.read,
-    ),
-    Message(
-      id: '6',
-      message: "When to go ?",
-      createdAt: DateTime.now(),
-      sendBy: '3',
-      status: MessageStatus.read,
-    ),
-    Message(
-      id: '7',
-      message: "I guess Simform will reply",
-      createdAt: DateTime.now(),
-      sendBy: '4',
-      status: MessageStatus.read,
-    ),
-    Message(
-      id: '8',
-      message: "https://bit.ly/3JHS2Wl",
-      createdAt: DateTime.now(),
-      sendBy: '2',
-      reaction: Reaction(
-        reactions: ['\u{2764}', '\u{1F44D}', '\u{1F44D}'],
-        reactedUserIds: ['2', '3', '4'],
-      ),
-      status: MessageStatus.read,
-      replyMessage: const ReplyMessage(
-        message: "Can you write the time and place of the meeting?",
-        replyTo: '1',
-        replyBy: '2',
-        messageId: '4',
-      ),
-    ),
-    Message(
-      id: '9',
-      message: "Done",
-      createdAt: DateTime.now(),
-      sendBy: '1',
-      status: MessageStatus.read,
-      reaction: Reaction(
-        reactions: [
-          '\u{2764}',
-          '\u{2764}',
-          '\u{2764}',
-        ],
-        reactedUserIds: ['2', '3', '4'],
-      ),
-    ),
-    Message(
-      id: '10',
-      message: "Thank you!!",
-      status: MessageStatus.read,
-      createdAt: DateTime.now(),
-      sendBy: '1',
-      reaction: Reaction(
-        reactions: ['\u{2764}', '\u{2764}', '\u{2764}', '\u{2764}'],
-        reactedUserIds: ['2', '4', '3', '1'],
-      ),
-    ),
-    Message(
-      id: '11',
-      message: "https://miro.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg",
-      createdAt: DateTime.now(),
-      messageType: MessageType.image,
-      sendBy: '1',
-      reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
-      status: MessageStatus.read,
-    ),
-    Message(
-      id: '12',
-      message: "🤩🤩",
-      createdAt: DateTime.now(),
-      sendBy: '2',
-      status: MessageStatus.read,
-    ),
+    // Message(
+    //   id: '5',
+    //   message: "That's fine",
+    //   createdAt: DateTime.now(),
+    //   sendBy: '2',
+    //   reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['1']),
+    //   status: MessageStatus.read,
+    // ),
+    // Message(
+    //   id: '6',
+    //   message: "When to go ?",
+    //   createdAt: DateTime.now(),
+    //   sendBy: '3',
+    //   status: MessageStatus.read,
+    // ),
+    // Message(
+    //   id: '7',
+    //   message: "I guess Simform will reply",
+    //   createdAt: DateTime.now(),
+    //   sendBy: '4',
+    //   status: MessageStatus.read,
+    // ),
+    // Message(
+    //   id: '8',
+    //   message: "https://bit.ly/3JHS2Wl",
+    //   createdAt: DateTime.now(),
+    //   sendBy: '2',
+    //   reaction: Reaction(
+    //     reactions: ['\u{2764}', '\u{1F44D}', '\u{1F44D}'],
+    //     reactedUserIds: ['2', '3', '4'],
+    //   ),
+    //   status: MessageStatus.read,
+    //   replyMessage: const ReplyMessage(
+    //     message: "Can you write the time and place of the meeting?",
+    //     replyTo: '1',
+    //     replyBy: '2',
+    //     messageId: '4',
+    //   ),
+    // ),
+    // Message(
+    //   id: '9',
+    //   message: "Done",
+    //   createdAt: DateTime.now(),
+    //   sendBy: '1',
+    //   status: MessageStatus.read,
+    //   reaction: Reaction(
+    //     reactions: [
+    //       '\u{2764}',
+    //       '\u{2764}',
+    //       '\u{2764}',
+    //     ],
+    //     reactedUserIds: ['2', '3', '4'],
+    //   ),
+    // ),
+    // Message(
+    //   id: '10',
+    //   message: "Thank you!!",
+    //   status: MessageStatus.read,
+    //   createdAt: DateTime.now(),
+    //   sendBy: '1',
+    //   reaction: Reaction(
+    //     reactions: ['\u{2764}', '\u{2764}', '\u{2764}', '\u{2764}'],
+    //     reactedUserIds: ['2', '4', '3', '1'],
+    //   ),
+    // ),
+    // Message(
+    //   id: '11',
+    //   message: "https://miro.medium.com/max/1000/0*s7of7kWnf9fDg4XM.jpeg",
+    //   createdAt: DateTime.now(),
+    //   messageType: MessageType.image,
+    //   sendBy: '1',
+    //   reaction: Reaction(reactions: ['\u{2764}'], reactedUserIds: ['2']),
+    //   status: MessageStatus.read,
+    // ),
+    // Message(
+    //   id: '12',
+    //   message: "🤩🤩",
+    //   createdAt: DateTime.now(),
+    //   sendBy: '2',
+    //   status: MessageStatus.read,
+    // ),
   ];
 }
diff --git a/example/lib/main.dart b/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(
diff --git a/lib/src/models/feature_active_config.dart b/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;
 }
diff --git a/lib/src/models/message_configuration.dart b/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,
   });
 }
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,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;
+}
diff --git a/lib/src/values/typedefs.dart b/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);
diff --git a/lib/src/widgets/chat_bubble_widget.dart b/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,
diff --git a/lib/src/widgets/chat_list_widget.dart b/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,
diff --git a/lib/src/widgets/image_message_view.dart b/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,
diff --git a/lib/src/widgets/message_time_widget.dart b/lib/src/widgets/message_time_widget.dart
diff --git a/lib/src/widgets/message_view.dart b/lib/src/widgets/message_view.dart
diff --git a/lib/src/widgets/text_message_view.dart b/lib/src/widgets/text_message_view.dart
diff --git a/lib/src/widgets/voice_message_view.dart b/lib/src/widgets/voice_message_view.dart
diff --git a/pubspec.yaml b/pubspec.yaml
