msglist: Leave blank space for "mark as read" button so using it doesn't cause messages to shift

This commit addresses the issue of the message list shifting downwards when the "mark as read" button is pressed. The previous implementation would return an empty widget when the button was pressed and cause the message list to shift down. Now it takes a widget with a definite height, which is equal to the size of the button and won't cause the message list to shift down.

Previously there used to be an empty widget below the "mark as read" button, but that has also been removed.

Fixes: zulip#562

Author: abelaba

lib/widgets/message_list.dart

@@ -342,17 +342,13 @@ class _MessageListState extends State<MessageList> with PerAccountStoreAwareStat
               final valueKey = key as ValueKey;
               final index = model!.findItemWithMessageId(valueKey.value);
               if (index == -1) return null;
-              return length - 1 - (index - 2);
+              return length - 1 - (index - 1);
             },
-            childCount: length + 2,
+            childCount: length + 1,
             (context, i) {
-              // To reinforce that the end of the feed has been reached:
-              //   https://chat.zulip.org/#narrow/stream/243-mobile-team/topic/flutter.3A.20Mark-as-read/near/1680603
-              if (i == 0) return const SizedBox(height: 36);
+              if (i == 0) return MarkAsReadWidget(narrow: widget.narrow);
 
-              if (i == 1) return MarkAsReadWidget(narrow: widget.narrow);
-
-              final data = model!.items[length - 1 - (i - 2)];
+              final data = model!.items[length - 1 - (i - 1)];
               return _buildItem(data, i);
             })),
 
@@ -464,7 +460,8 @@ class MarkAsReadWidget extends StatelessWidget {
     return AnimatedCrossFade(
       duration: const Duration(milliseconds: 300),
       crossFadeState: (unreadCount > 0) ? CrossFadeState.showSecond : CrossFadeState.showFirst,
-      firstChild: const SizedBox.shrink(),
+      // The height of the firstChild is the vertical padding of the secondChild in both directions + the minimumSize height of the secondChild
+      firstChild: const SizedBox(height: 58),
       secondChild: SizedBox(width: double.infinity,
         // Design referenced from:
         //   https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?type=design&node-id=132-9684&mode=design&t=jJwHzloKJ0TMOG4M-0

test/widgets/message_list_test.dart

@@ -610,13 +610,11 @@ void main() {
 
   group('MarkAsReadWidget', () {
     bool isMarkAsReadButtonVisible(WidgetTester tester) {
-      // Zero height elements on the edge of a scrolling viewport
-      // are treated as invisible for hit-testing, see
-      // [SliverMultiBoxAdaptorElement.debugVisitOnstageChildren].
-      // Set `skipOffstage: false` here to safely target the
-      // [MarkAsReadWidget] even when it is inactive.
-      return tester.getSize(
-        find.byType(MarkAsReadWidget, skipOffstage: false)).height > 0;
+      // The [MarkAsReadWidget] widget is an [AnimatedCrossFade] widget where
+      // the [CrossFadeState.showSecond] state is when the "mark as read" button is visible
+      // and the [CrossFadeState.showFirst] state is when the "mark as read" button is not visible.
+      var animatedCrossFade = tester.widget<AnimatedCrossFade>(find.byType(AnimatedCrossFade));
+      return animatedCrossFade.crossFadeState == CrossFadeState.showSecond;
     }
 
     testWidgets('from read to unread', (WidgetTester tester) async {