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.

Fixes: #562

Author: abelaba

lib/widgets/message_list.dart

@@ -464,7 +464,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 {