feat: ✨ Add customizable timestamp styling for chat bubbles and improve timestamp rendering logic

vasu-nageshri · vasu-nageshri · commit ef1f4ff46afe · 2026-05-13T12:06:10.000+05:30
- Adaptive layout: inline for short messages, bottom-right for long messages
- Image/voice message timestamps overlaid inside the bubble
- Add in for per-bubble timestamp styling
- Update time format to 12-hour AM/PM (e.g. 04:32 PM)
- Add voice message duration display: (VoiceDurationFormat.hhmmss/mmss/adaptive)
- Reduce chat bubble border radius for modern look
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
   Rendering issue in attached image preview when sending message on web.
 * **Feat**: [420](https://github.com/SimformSolutionsPvtLtd/chatview/pull/420) Added support for
   `playerMode` in `VoiceMessageConfiguration` with `single` and `multi`.
+* **Feat**: [115](https://github.com/SimformSolutionsPvtLtd/chatview/issues/115) Add customizable timestamp styling for chat bubbles and improve timestamp rendering logic.
 
 ## [3.0.0]
 
diff --git a/doc/documentation.md b/doc/documentation.md
@@ -728,6 +728,12 @@ ChatView(
         topLeft: Radius.circular(12),
         bottomLeft: Radius.circular(12),
       ),
+      // Style for in-bubble timestamp text (e.g. "04:32 PM").
+      messageTimeTextStyle: const TextStyle(
+        color: Colors.white70,
+        fontSize: 11,
+        fontWeight: FontWeight.w500,
+      ),
     ),
     inComingChatBubbleConfig: ChatBubble(
       color: Colors.grey.shade200,
@@ -736,12 +742,25 @@ ChatView(
         topRight: Radius.circular(12),
         bottomRight: Radius.circular(12),
       ),
+      // Style for in-bubble timestamp text (e.g. "04:32 PM").
+      messageTimeTextStyle: const TextStyle(
+        color: Colors.black54,
+        fontSize: 11,
+        fontWeight: FontWeight.w500,
+      ),
     ),
   ),
   // ...
 )
 ```
 
+Timestamps rendered in bubbles use 12-hour format with AM/PM (for example, `04:32 PM`).
+You can control timestamp typography per bubble side using `messageTimeTextStyle`.
+
+> **Note:** `showTimestamp` (in-bubble timestamp) and `enableSwipeToSeeTime` (swipe-to-reveal timestamp) are mutually exclusive.
+> Both live in `FeatureActiveConfig`. Setting both to `true` raises an `AssertionError` in debug mode.
+> Use `showTimestamp: true` to display the time inside each bubble, or `enableSwipeToSeeTime: true` to reveal it on swipe — never both.
+
 ## Swipe to Reply Configuration
 
 ```dart
@@ -847,7 +866,10 @@ ChatView(
   // ...
   featureActiveConfig: FeatureActiveConfig(
     enableSwipeToReply: true,
-    enableSwipeToSeeTime: false,
+    // Set to true to reveal message time by swiping the chat bubble.
+    // Mutually exclusive with showTimestamp — setting both true raises
+    // an AssertionError in debug mode.
+    enableSwipeToSeeTime: true,
     enablePagination: true,
     enableOtherUserName: false,
     lastSeenAgoBuilderVisibility: false,
diff --git a/lib/src/extensions/extensions.dart b/lib/src/extensions/extensions.dart
@@ -70,7 +70,7 @@ extension TimeDifference on DateTime {
     return formatter.format(this);
   }
 
-  String get getTimeFromDateTime => DateFormat.Hm().format(this);
+  String get getTimeFromDateTime => DateFormat('hh:mm a').format(this);
 
   /// Returns `true` if [other] occurs on the same calendar day as
   /// this [DateTime].
diff --git a/lib/src/models/chat_bubble.dart b/lib/src/models/chat_bubble.dart
@@ -31,6 +31,7 @@ class ChatBubble {
     this.color,
     this.borderRadius,
     this.textStyle,
+    this.messageTimeTextStyle,
     this.padding,
     this.margin,
     this.linkPreviewConfig,
@@ -50,6 +51,10 @@ class ChatBubble {
   /// Used for giving text style of chat bubble.
   final TextStyle? textStyle;
 
+  /// Used for giving text style of in-bubble message timestamp.
+  /// Only has effect when [FeatureActiveConfig.showTimestamp] is `true`.
+  final TextStyle? messageTimeTextStyle;
+
   /// Used for giving padding of chat bubble.
   final EdgeInsetsGeometry? padding;
 
diff --git a/lib/src/models/config_models/feature_active_config.dart b/lib/src/models/config_models/feature_active_config.dart
@@ -26,6 +26,7 @@ class FeatureActiveConfig {
     this.enableReactionPopup = true,
     this.enableTextField = true,
     this.enableSwipeToSeeTime = true,
+    this.showTimestamp = false,
     this.enableCurrentUserProfileAvatar = false,
     this.enableOtherUserProfileAvatar = true,
     this.enableReplySnackBar = true,
@@ -37,7 +38,13 @@ class FeatureActiveConfig {
     this.enableOtherUserName = true,
     this.enableScrollToBottomButton = false,
     this.enableTextSelection = false,
-  });
+  }) : assert(
+         !(enableSwipeToSeeTime && showTimestamp),
+         'FeatureActiveConfig: enableSwipeToSeeTime and showTimestamp cannot '
+         'both be true at the same time. '
+         'Use showTimestamp: true to display the time inside each bubble, '
+         'or enableSwipeToSeeTime: true to reveal it on swipe — not both.',
+       );
 
   /// Used for enable/disable swipe to reply.
   final bool enableSwipeToReply;
@@ -49,8 +56,24 @@ class FeatureActiveConfig {
   final bool enableTextField;
 
   /// Used for enable/disable swipe whole chat to see message created time.
+  ///
+  /// **Mutually exclusive with `showTimestamp`.**
+  /// Setting both `enableSwipeToSeeTime: true` and `showTimestamp: true` will
+  /// throw an [AssertionError] in debug mode.
   final bool enableSwipeToSeeTime;
 
+  /// Used to globally control whether message timestamps are shown inside chat bubbles.
+  /// Defaults to `false`.
+  ///
+  /// **Mutually exclusive with `enableSwipeToSeeTime`.**
+  /// Setting both `showTimestamp: true` and `enableSwipeToSeeTime: true` will
+  /// throw an [AssertionError] in debug mode.
+  ///
+  /// When `true`, timestamps are displayed inside bubbles for all message types
+  /// (text, image, voice). Use [ChatBubble.messageTimeTextStyle] to customise
+  /// the appearance of the timestamp text per bubble direction.
+  final bool showTimestamp;
+
   /// Used for enable/disable current user profile circle.
   final bool enableCurrentUserProfileAvatar;
 
diff --git a/lib/src/widgets/chat_bubble_widget.dart b/lib/src/widgets/chat_bubble_widget.dart
@@ -94,11 +94,20 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
   Widget build(BuildContext context) {
     // Get user from id.
     final messagedUser = chatController?.getUserFromId(widget.message.sentBy);
-    return Stack(
-      children: [
-        if (featureActiveConfig?.enableSwipeToSeeTime ?? true) ...[
+
+    // showTimestamp and enableSwipeToSeeTime are mutually exclusive
+    // (enforced by FeatureActiveConfig's assert). Only one can ever be true.
+    final bool showTimestamp = featureActiveConfig?.showTimestamp ?? false;
+
+    // Use swipe-to-see-time only when in-bubble timestamps are not active.
+    final bool useSwipeToSeeTime =
+        !showTimestamp && (featureActiveConfig?.enableSwipeToSeeTime ?? true);
+
+    if (useSwipeToSeeTime && widget.slideAnimation != null) {
+      return Stack(
+        children: [
           Visibility(
-            visible: widget.slideAnimation?.value.dx == 0.0 ? false : true,
+            visible: widget.slideAnimation!.value.dx != 0.0,
             child: Positioned.fill(
               child: Align(
                 alignment: Alignment.centerRight,
@@ -113,9 +122,15 @@ class _ChatBubbleWidgetState extends State<ChatBubbleWidget> {
             position: widget.slideAnimation!,
             child: _chatBubbleWidget(messagedUser),
           ),
-        ] else
-          _chatBubbleWidget(messagedUser),
-      ],
+        ],
+      );
+    }
+
+    final slideAnimation =
+        widget.slideAnimation ?? const AlwaysStoppedAnimation(Offset.zero);
+    return SlideTransition(
+      position: slideAnimation,
+      child: _chatBubbleWidget(messagedUser),
     );
   }
 
diff --git a/lib/src/widgets/chat_list_widget.dart b/lib/src/widgets/chat_list_widget.dart
@@ -81,6 +81,16 @@ class _ChatListWidgetState extends State<ChatListWidget> {
   bool get isPaginationEnabled =>
       featureActiveConfig?.enablePagination ?? false;
 
+  /// Returns true when the swipe-to-see-time gesture should be active.
+  ///
+  /// [FeatureActiveConfig.showTimestamp] and [FeatureActiveConfig.enableSwipeToSeeTime]
+  /// are mutually exclusive — the [FeatureActiveConfig] assert already prevents
+  /// both being true simultaneously.
+  bool get _resolveSwipeToSeeTime {
+    final showTimestamp = featureActiveConfig?.showTimestamp ?? false;
+    return !showTimestamp && (featureActiveConfig?.enableSwipeToSeeTime ?? true);
+  }
+
   @override
   void initState() {
     super.initState();
@@ -106,8 +116,7 @@ class _ChatListWidgetState extends State<ChatListWidget> {
         loadingWidget: widget.loadingWidget,
         showPopUp: showPopupValue,
         scrollController: scrollController,
-        isEnableSwipeToSeeTime:
-            featureActiveConfig?.enableSwipeToSeeTime ?? true,
+        isEnableSwipeToSeeTime: _resolveSwipeToSeeTime,
         assignReplyMessage: widget.assignReplyMessage,
         onChatListTap: _onChatListTap,
         textFieldConfig: widget.textFieldConfig,
diff --git a/lib/src/widgets/image_message_view.dart b/lib/src/widgets/image_message_view.dart
@@ -28,6 +28,7 @@ import 'package:flutter/material.dart';
 
 import '../extensions/extensions.dart';
 import '../models/chat_bubble.dart';
+import '../models/config_models/feature_active_config.dart';
 import '../models/config_models/image_message_configuration.dart';
 import '../models/config_models/message_reaction_configuration.dart';
 import 'reaction_widget.dart';
@@ -44,6 +45,7 @@ class ImageMessageView extends StatelessWidget {
     this.outgoingChatBubbleConfig,
     this.highlightImage = false,
     this.highlightScale = 1.2,
+    this.featureActiveConfig,
   }) : super(key: key);
 
   /// Provides configuration of chat bubble appearance from other user of chat.
@@ -70,6 +72,9 @@ class ImageMessageView extends StatelessWidget {
   /// Provides scale of highlighted image when user taps on replied image.
   final double highlightScale;
 
+  /// Provides configuration of active features in chat.
+  final FeatureActiveConfig? featureActiveConfig;
+
   String get imageUrl => message.message;
 
   Widget get iconButton => ShareIcon(
@@ -80,7 +85,7 @@ class ImageMessageView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final borderRadius = imageMessageConfig?.borderRadius ??
-        const BorderRadius.all(Radius.circular(14));
+      const BorderRadius.all(Radius.circular(10));
     final backgroundColor = isMessageBySender
         ? outgoingChatBubbleConfig?.color ?? Colors.purple
         : inComingChatBubbleConfig?.color ?? Colors.grey.shade500;
@@ -118,44 +123,75 @@ class ImageMessageView extends StatelessWidget {
                       ),
                   height: imageMessageConfig?.height ?? 200,
                   width: imageMessageConfig?.width ?? 150,
-                  child: ClipRRect(
-                    borderRadius: borderRadius,
-                    child: (() {
-                      if (imageUrl.isUrl) {
-                        return Image.network(
-                          imageUrl,
-                          fit: BoxFit.fitHeight,
-                          loadingBuilder: (context, child, loadingProgress) {
-                            if (loadingProgress == null) return child;
-                            return Center(
-                              child: CircularProgressIndicator(
-                                value: loadingProgress.expectedTotalBytes !=
-                                        null
-                                    ? loadingProgress.cumulativeBytesLoaded /
-                                        loadingProgress.expectedTotalBytes!
-                                    : null,
-                              ),
+                  child: Stack(
+                    children: [
+                      ClipRRect(
+                        borderRadius: borderRadius,
+                        child: (() {
+                          if (imageUrl.isUrl) {
+                            return Image.network(
+                              imageUrl,
+                              fit: BoxFit.fitHeight,
+                              loadingBuilder: (context, child, loadingProgress) {
+                                if (loadingProgress == null) return child;
+                                return Center(
+                                  child: CircularProgressIndicator(
+                                    value: loadingProgress.expectedTotalBytes !=
+                                            null
+                                        ? loadingProgress.cumulativeBytesLoaded /
+                                            loadingProgress.expectedTotalBytes!
+                                        : null,
+                                  ),
+                                );
+                              },
+                            );
+                          } else if (imageUrl.fromMemory) {
+                            return Image.memory(
+                              base64Decode(imageUrl
+                                  .substring(imageUrl.indexOf('base64') + 7)),
+                              fit: BoxFit.fill,
                             );
-                          },
-                        );
-                      } else if (imageUrl.fromMemory) {
-                        return Image.memory(
-                          base64Decode(imageUrl
-                              .substring(imageUrl.indexOf('base64') + 7)),
-                          fit: BoxFit.fill,
-                        );
-                      } else {
-                        return kIsWeb
-                            ? Image.network(
-                                imageUrl,
-                                fit: BoxFit.fill,
-                              )
-                            : Image.file(
-                                File(imageUrl),
-                                fit: BoxFit.fill,
-                              );
-                      }
-                    }()),
+                          } else {
+                            return kIsWeb
+                                ? Image.network(
+                                    imageUrl,
+                                    fit: BoxFit.fill,
+                                  )
+                                : Image.file(
+                                    File(imageUrl),
+                                    fit: BoxFit.fill,
+                                  );
+                          }
+                        }()),
+                      ),
+                      if (featureActiveConfig?.showTimestamp ?? false)
+                        Positioned(
+                          right: 8,
+                          bottom: 8,
+                          child: Container(
+                          padding: const EdgeInsets.symmetric(
+                            horizontal: 6,
+                            vertical: 2,
+                          ),
+                          decoration: BoxDecoration(
+                            color: Colors.black45,
+                            borderRadius: BorderRadius.circular(10),
+                          ),
+                          child: Text(
+                            message.createdAt.getTimeFromDateTime,
+                            style: const TextStyle(
+                              color: Colors.white,
+                              fontSize: 10,
+                              fontWeight: FontWeight.w500,
+                            ).merge(
+                              isMessageBySender
+                                  ? outgoingChatBubbleConfig?.messageTimeTextStyle
+                                  : inComingChatBubbleConfig?.messageTimeTextStyle,
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
                   ),
                 ),
               ),
diff --git a/lib/src/widgets/message_view.dart b/lib/src/widgets/message_view.dart
@@ -220,6 +220,7 @@ class _MessageViewState extends State<MessageView>
                     outgoingChatBubbleConfig: widget.outgoingChatBubbleConfig,
                     highlightImage: widget.shouldHighlight,
                     highlightScale: widget.highlightScale,
+                    featureActiveConfig: chatViewIW?.featureActiveConfig,
                   );
                 } else if (widget.message.messageType.isText) {
                   return TextMessageView(
@@ -243,6 +244,7 @@ class _MessageViewState extends State<MessageView>
                     messageReactionConfig: messageConfig?.messageReactionConfig,
                     inComingChatBubbleConfig: widget.inComingChatBubbleConfig,
                     outgoingChatBubbleConfig: widget.outgoingChatBubbleConfig,
+                    featureActiveConfig: chatViewIW?.featureActiveConfig,
                   );
                 } else if (widget.message.messageType.isCustom &&
                     messageConfig?.customMessageBuilder != null) {
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

Original file line number	Diff line number	Diff line change
`@@ -70,7 +70,7 @@ extension TimeDifference on DateTime {`
`70`	`70`	`return formatter.format(this);`
`71`	`71`	`}`
`72`	`72`
`73`		`- String get getTimeFromDateTime => DateFormat.Hm().format(this);`
	`73`	`+ String get getTimeFromDateTime => DateFormat('hh:mm a').format(this);`
`74`	`74`
`75`	`75`	/// Returns `true` if [other] occurs on the same calendar day as
`76`	`76`	`/// this [DateTime].`