fix(ui): improve scroll to bottom and floating date divider (#2289)

Author: xsahil03x

packages/stream_chat_flutter/CHANGELOG.md

@@ -1,3 +1,12 @@
+## Upcoming
+
+🐞 Fixed
+
+- Fixed `FloatingDateDivider` not showing the correct date when the latest message was too big and
+  exceeded the viewport main axis size.
+- Fixed `ScrollToBottom` button always showing when the latest message was too big and exceeded the
+  viewport main axis size.
+
 ## 9.12.0
 
 ✅ Added

packages/stream_chat_flutter/lib/src/message_list_view/floating_date_divider.dart

@@ -16,26 +16,33 @@ class FloatingDateDivider extends StatelessWidget {
     required this.reverse,
     required this.messages,
     required this.itemCount,
+    @Deprecated('No longer used, Will be removed in future versions.')
     this.isThreadConversation = false,
     this.dateDividerBuilder,
   });
 
   /// true if this is a thread conversation
+  @Deprecated('No longer used, Will be removed in future versions.')
   final bool isThreadConversation;
 
-  // ignore: public_member_api_docs
+  /// A [ValueListenable] that provides the positions of items in the list view.
   final ValueListenable<Iterable<ItemPosition>> itemPositionListener;
 
-  // ignore: public_member_api_docs
+  /// Whether the list is reversed or not.
   final bool reverse;
 
-  // ignore: public_member_api_docs
+  /// The list of messages which are displayed in the list view.
   final List<Message> messages;
 
-  // ignore: public_member_api_docs
+  /// The total number of items in the list view, including special items like
+  /// loaders, headers, and footers.
   final int itemCount;
 
-  // ignore: public_member_api_docs
+  /// A optional builder function that creates a widget to display the date
+  /// divider.
+  ///
+  /// If provided, this function will be called with the date of the message
+  /// to create the date divider widget.
   final Widget Function(DateTime)? dateDividerBuilder;
 
   @override
@@ -47,29 +54,37 @@ class FloatingDateDivider extends StatelessWidget {
           return const Empty();
         }
 
-        var index = switch (reverse) {
+        final index = switch (reverse) {
           true => getBottomElementIndex(positions),
           false => getTopElementIndex(positions),
         };
 
-        if ((index == null) ||
-            (!isThreadConversation && index == itemCount - 2) ||
-            (isThreadConversation && index == itemCount - 1)) {
-          return const Empty();
-        }
+        if (index == null) return const Empty();
+        if (!_isValidMessageIndex(index)) return const Empty();
+
+        // Offset the index to account for two extra items
+        // (loader and footer) at the bottom of the ListView.
+        final message = messages.elementAtOrNull(index - 2);
+        if (message == null) return const Empty();
 
-        if (index <= 2 || index >= itemCount - 3) {
-          if (reverse) {
-            index = itemCount - 4;
-          } else {
-            index = 2;
-          }
+        if (dateDividerBuilder case final builder?) {
+          return builder.call(message.createdAt.toLocal());
         }
 
-        final message = messages[index - 2];
-        return dateDividerBuilder?.call(message.createdAt.toLocal()) ??
-            StreamDateDivider(dateTime: message.createdAt.toLocal());
+        return StreamDateDivider(dateTime: message.createdAt.toLocal());
       },
     );
   }
+
+  // Returns True if the item index is a valid message index and not one of the
+  // special items (like header, footer, loaders, etc.).
+  bool _isValidMessageIndex(int index) {
+    if (index == itemCount - 1) return false; // Parent Message
+    if (index == itemCount - 2) return false; // Header Builder
+    if (index == itemCount - 3) return false; // Top Loader Builder
+    if (index == 1) return false; // Bottom Loader Builder
+    if (index == 0) return false; // Footer Builder
+
+    return true;
+  }
 }

packages/stream_chat_flutter/lib/src/message_list_view/message_list_view.dart

@@ -857,7 +857,6 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
               itemPositionListener: _itemPositionListener.itemPositions,
               messages: messages,
               dateDividerBuilder: widget.dateDividerBuilder,
-              isThreadConversation: _isThreadConversation,
             ),
           ),
         if (widget.showScrollToBottom)
@@ -1452,14 +1451,20 @@ class _StreamMessageListViewState extends State<StreamMessageListView> {
     final itemPositions = _itemPositionListener.itemPositions.value.toList();
     if (itemPositions.isEmpty) return;
 
-    final isLastItemFullyVisible = isElementAtIndexVisible(
-      itemPositions,
-      fullyVisible: true,
-      // Index of the last item in the list view is 2 as 1 is the progress
-      // indicator and 0 is the footer.
-      index: 2,
+    // Index of the last item in the list view is 2 as 1 is the progress
+    // indicator and 0 is the footer.
+    const lastItemIndex = 2;
+    final lastItemPosition = itemPositions.firstWhereOrNull(
+      (position) => position.index == lastItemIndex,
     );
 
+    var isLastItemFullyVisible = false;
+    if (lastItemPosition != null) {
+      // We consider the last item fully visible if its leading edge (reversed)
+      // is greater than or equal to 0.
+      isLastItemFullyVisible = lastItemPosition.itemLeadingEdge >= 0;
+    }
+
     if (mounted) _showScrollToBottom.value = !isLastItemFullyVisible;
     if (isLastItemFullyVisible) return _handleLastItemFullyVisible();
   }

packages/stream_chat_flutter/lib/src/message_list_view/mlv_utils.dart

@@ -43,19 +43,35 @@ int getInitialIndex(
 
 /// Gets the index of the top element in the viewport.
 int? getTopElementIndex(Iterable<ItemPosition> values) {
-  final inView = values.where((position) => position.itemTrailingEdge > 0);
-  if (inView.isEmpty) return null;
+  final inView = values.where((position) {
+    if (position.itemLeadingEdge == position.itemTrailingEdge) {
+      // If the item's leading and trailing edges are the same, it means the
+      // item isn't actually rendering anything in the viewport.
+      return false;
+    }
+
+    return position.itemTrailingEdge > 0;
+  });
 
+  if (inView.isEmpty) return null;
   return inView.reduce((min, position) {
     return position.itemTrailingEdge < min.itemTrailingEdge ? position : min;
   }).index;
 }
 
 /// Gets the index of the bottom element in the viewport.
 int? getBottomElementIndex(Iterable<ItemPosition> values) {
-  final inView = values.where((position) => position.itemLeadingEdge < 1);
-  if (inView.isEmpty) return null;
+  final inView = values.where((position) {
+    if (position.itemLeadingEdge == position.itemTrailingEdge) {
+      // If the item's leading and trailing edges are the same, it means the
+      // item isn't actually rendering anything in the viewport.
+      return false;
+    }
+
+    return position.itemLeadingEdge < 1;
+  });
 
+  if (inView.isEmpty) return null;
   return inView.reduce((max, position) {
     return position.itemLeadingEdge > max.itemLeadingEdge ? position : max;
   }).index;