fix: Implement "Seen" receipt reveal animation with fade, slide, and expand effects

CHANGELOG.md

@@ -4,6 +4,7 @@
 * **Feat**: [457](https://github.com/SimformSolutionsPvtLtd/chatview/pull/457) :sparkles: Add errorWidget support to ImageMessageConfiguration
 * **Fix**: [458](https://github.com/SimformSolutionsPvtLtd/chatview/pull/458) Enhance text field action animations for improved UX
 * **Refactor**: [455](https://github.com/SimformSolutionsPvtLtd/chatview/pull/455) Rework sending receipt animation with different transition
+* **Fix**: [463](https://github.com/SimformSolutionsPvtLtd/chatview/pull/463) Implement "Seen" receipt reveal animation with fade, slide, and expand effects
 
 ## 3.1.0
 

lib/src/utils/constants/constants.dart

@@ -91,6 +91,13 @@ const double sendingReceiptInBubbleReservedHeight = 18;
 /// message is pending.
 const String sendingLabelText = 'Sending...';
 
+/// Duration of the "Seen" receipt reveal (fade + slide + expand) shown below
+/// the last outgoing bubble once it is read.
+const Duration seenAppearanceAnimationDuration = Duration(milliseconds: 300);
+
+/// Curve of the "Seen" receipt reveal animation.
+const Curve seenAppearanceAnimationCurve = Curves.easeOutCubic;
+
 String applicationDateFormatter(DateTime inputTime) {
   if (DateTime.now().difference(inputTime).inDays <= 3) {
     return timeago.format(inputTime);

lib/src/widgets/message_view.dart

@@ -284,26 +284,49 @@ class _MessageViewState extends State<MessageView>
           ValueListenableBuilder(
             valueListenable: widget.message.statusNotifier,
             builder: (context, value, child) {
-              if (widget.isMessageBySender &&
+              final showSeen = widget.isMessageBySender &&
                   widget.controller?.initialMessageList.last.id ==
                       widget.message.id &&
-                  widget.message.status == MessageStatus.read) {
-                if (ChatViewInheritedWidget.of(context)
-                        ?.featureActiveConfig
-                        .lastSeenAgoBuilderVisibility ??
-                    true) {
-                  return widget.outgoingChatBubbleConfig?.receiptsWidgetConfig
-                          ?.lastSeenAgoBuilder
-                          ?.call(
-                              widget.message,
-                              applicationDateFormatter(
-                                  widget.message.createdAt)) ??
-                      lastSeenAgoBuilder(widget.message,
-                          applicationDateFormatter(widget.message.createdAt));
-                }
-                return const SizedBox();
-              }
-              return const SizedBox();
+                  widget.message.status == MessageStatus.read &&
+                  (ChatViewInheritedWidget.of(context)
+                          ?.featureActiveConfig
+                          .lastSeenAgoBuilderVisibility ??
+                      true);
+              return AnimatedSwitcher(
+                duration: seenAppearanceAnimationDuration,
+                switchInCurve: seenAppearanceAnimationCurve,
+                switchOutCurve: seenAppearanceAnimationCurve,
+                transitionBuilder: (child, animation) => SizeTransition(
+                  alignment: Alignment.topCenter,
+                  sizeFactor: animation,
+                  child: FadeTransition(
+                    opacity: animation,
+                    child: SlideTransition(
+                      position: Tween<Offset>(
+                        begin: const Offset(0, 0.35),
+                        end: Offset.zero,
+                      ).animate(animation),
+                      child: child,
+                    ),
+                  ),
+                ),
+                child: showSeen
+                    ? Align(
+                        key: const ValueKey('seen'),
+                        alignment: Alignment.centerRight,
+                        child: widget.outgoingChatBubbleConfig
+                                ?.receiptsWidgetConfig?.lastSeenAgoBuilder
+                                ?.call(
+                                    widget.message,
+                                    applicationDateFormatter(
+                                        widget.message.createdAt)) ??
+                            lastSeenAgoBuilder(
+                                widget.message,
+                                applicationDateFormatter(
+                                    widget.message.createdAt)),
+                      )
+                    : const SizedBox(key: ValueKey('seen-empty')),
+              );
             },
           )
         ],