feat:✨Added a feature to show message time in message bubble. Removed…

… enableSwipeToSeeTime(bool) & added showMessageTimeIn(Enum) from FeatureActiveConfig class.(#115)
SimformSolutionsPvtLtd · Sep 28, 2023 · 1fd51a3 · 1fd51a3
1 parent 75e1dbf
commit 1fd51a3
Show file tree

Hide file tree

Showing 20 changed files with 133 additions and 141 deletions.
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/android/app/src/main/AndroidManifest.xml b/example/android/app/src/main/AndroidManifest.xml
@@ -7,7 +7,6 @@
        </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,8 +8,7 @@ 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(
@@ -107,35 +106,12 @@ 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,12 +78,9 @@ class _ChatScreenState extends State<ChatScreen> {
         currentUser: currentUser,
         chatController: _chatController,
         onSendTap: _onSendTap,
-        featureActiveConfig: FeatureActiveConfig(
-          lastSeenAgoBuilderVisibility: false,
+        featureActiveConfig: const FeatureActiveConfig(
+          lastSeenAgoBuilderVisibility: true,
           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
@@ -5,7 +5,6 @@ class FeatureActiveConfig {
     this.enableSwipeToReply = true,
     this.enableReactionPopup = true,
     this.enableTextField = true,
-    this.enableSwipeToSeeTime = true,
     this.enableCurrentUserProfileAvatar = false,
     this.enableOtherUserProfileAvatar = true,
     this.enableReplySnackBar = true,
@@ -14,7 +13,7 @@ class FeatureActiveConfig {
     this.enableDoubleTapToLike = true,
     this.lastSeenAgoBuilderVisibility = true,
     this.receiptsBuilderVisibility = true,
-    this.showMessageTimeIn = ShowMessageTimeIn.none,
+    this.showMessageTimeIn = ShowMessageCreateTime.onRightSwipe,
   }) ;
   /// Used for enable/disable swipe to reply.
   final bool enableSwipeToReply;
@@ -25,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;
 
@@ -52,5 +48,7 @@ class FeatureActiveConfig {
   /// Controls the visibility of the message [receiptsBuilder]
   final bool receiptsBuilderVisibility;
 
-  final ShowMessageTimeIn showMessageTimeIn;
+  /// Controls the visibility of message created time.
+  /// default value: onRightSwipe
+  final ShowMessageCreateTime showMessageTimeIn;
 }
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/utils/package_strings.dart b/lib/src/utils/package_strings.dart
@@ -34,4 +34,7 @@ class PackageStrings {
   static const String photo = "Photo";
   static const String send = "Send";
   static const String you = "You";
+  static const String emptyString = '';
+  static const String messageTimeSpacing ='         ';
+
 }
diff --git a/lib/src/values/enumaration.dart b/lib/src/values/enumaration.dart
@@ -53,14 +53,21 @@ extension ChatViewStateExtension on ChatViewState {
   bool get noMessages => this == ChatViewState.noData;
 }
 
-enum ShowMessageTimeIn {
+enum ShowMessageCreateTime {
+  /// Used for viewing the message created time inside the chatBubble.
   insideChatBubble,
+  /// Used for viewing the message created time outside the chatBubble.
   outsideChatBubble,
-  none;
+  /// 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 isNone => this == none;
+  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
@@ -47,7 +47,6 @@ class ChatBubbleWidget extends StatefulWidget {
     this.messageConfig,
     this.onReplyTap,
     this.shouldHighlight = false,
-    this.showMessageTimeIn = ShowMessageTimeIn.none,
   }) : super(key: key);
 
   /// Represent current instance of message.
@@ -93,8 +92,6 @@ 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();
 }
@@ -130,13 +127,15 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
     final messagedUser = chatController?.getUserFromId(widget.message.sendBy);
     return Stack(
       children: [
-        if (featureActiveConfig?.enableSwipeToSeeTime ?? true) ...[
+        if (featureActiveConfig?.showMessageTimeIn.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,
@@ -355,7 +354,6 @@ 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,7 +47,6 @@ 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.
@@ -93,8 +92,6 @@ class ChatGroupedListWidget extends StatefulWidget {
   /// swipe whole chat.
   final bool isEnableSwipeToSeeTime;
 
-  final ShowMessageTimeIn showMessageTimeIn;
-
   @override
   State<ChatGroupedListWidget> createState() => _ChatGroupedListWidgetState();
 }
@@ -332,7 +329,6 @@ 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,7 +51,6 @@ 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.
@@ -109,8 +108,6 @@ class ChatListWidget extends StatefulWidget {
   /// Provides callback when user tap anywhere on whole chat.
   final VoidCallBack? onChatListTap;
 
-  final ShowMessageTimeIn showMessageTimeIn;
-
   @override
   State<ChatListWidget> createState() => _ChatListWidgetState();
 }
@@ -195,7 +192,7 @@ class _ChatListWidgetState extends State<ChatListWidget>
                     showTypingIndicator: showTypingIndicator,
                     scrollController: scrollController,
                     isEnableSwipeToSeeTime:
-                        featureActiveConfig?.enableSwipeToSeeTime ?? true,
+                        featureActiveConfig?.showMessageTimeIn.isOnRightSwipe ?? true,
                     chatBackgroundConfig: widget.chatBackgroundConfig,
                     assignReplyMessage: widget.assignReplyMessage,
                     replyMessage: widget.replyMessage,
@@ -224,7 +221,6 @@ 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,8 +250,6 @@ 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,9 +106,7 @@ 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
@@ -24,9 +24,10 @@ 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';
 
@@ -39,7 +40,7 @@ class ImageMessageView extends StatelessWidget {
     this.messageReactionConfig,
     this.highlightImage = false,
     this.highlightScale = 1.2,
-    this.showMessageTimeIn = ShowMessageTimeIn.none,
+    this.messageDateTimeBuilder,
   }) : super(key: key);
 
   /// Provides message instance of chat.
@@ -60,7 +61,8 @@ class ImageMessageView extends StatelessWidget {
   /// Provides scale of highlighted image when user taps on replied image.
   final double highlightScale;
 
-  final ShowMessageTimeIn showMessageTimeIn;
+  /// Allow user to set custom formatting of message time.
+  final MessageDateTimeBuilder? messageDateTimeBuilder;
 
   String get imageUrl => message.message;
 
@@ -71,6 +73,9 @@ class ImageMessageView extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final showMessageTimeIn = ChatViewInheritedWidget.of(context)!
+        .featureActiveConfig
+        .showMessageTimeIn;
     return Row(
       mainAxisSize: MainAxisSize.min,
       mainAxisAlignment:
@@ -143,18 +148,17 @@ 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 (!showMessageTimeIn.isOnRightSwipe &&
+                !showMessageTimeIn.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,