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 which will display the button based on the opacity level and will disable the region the button holds once the button is pressed, thus won't cause the message list to shift down.

Fixes: #562

Author: abelaba

lib/widgets/message_list.dart

@@ -461,34 +461,36 @@ class MarkAsReadWidget extends StatelessWidget {
     final zulipLocalizations = ZulipLocalizations.of(context);
     final store = PerAccountStoreWidget.of(context);
     final unreadCount = store.unreads.countInNarrow(narrow);
-    return AnimatedCrossFade(
-      duration: const Duration(milliseconds: 300),
-      crossFadeState: (unreadCount > 0) ? CrossFadeState.showSecond : CrossFadeState.showFirst,
-      firstChild: const SizedBox.shrink(),
-      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
-        child: Padding(
-          // vertical padding adjusted for tap target height (48px) of button
-          padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10 - ((48 - 38) / 2)),
-          child: FilledButton.icon(
-            style: FilledButton.styleFrom(
-              backgroundColor: _UnreadMarker.color,
-              minimumSize: const Size.fromHeight(38),
-              textStyle:
-                // Restate [FilledButton]'s default, which inherits from
-                // [zulipTypography]…
-                Theme.of(context).textTheme.labelLarge!
-                // …then clobber some attributes to follow Figma:
-                .merge(const TextStyle(
-                  fontSize: 18,
-                  height: (23 / 18))
-                .merge(weightVariableTextStyle(context, wght: 400))),
-              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
-            ),
-            onPressed: () => _handlePress(context),
-            icon: const Icon(Icons.playlist_add_check),
-            label: Text(zulipLocalizations.markAllAsReadLabel)))));
+    return IgnorePointer(
+      ignoring: unreadCount == 0,
+      child: AnimatedOpacity(
+        opacity: (unreadCount > 0) ? 1 : 0,
+        duration: const Duration(milliseconds: 300),
+        child: 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
+          child: Padding(
+            // vertical padding adjusted for tap target height (48px) of button
+            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 10 - ((48 - 38) / 2)),
+            child: FilledButton.icon(
+              style: FilledButton.styleFrom(
+                backgroundColor: _UnreadMarker.color,
+                minimumSize: const Size.fromHeight(38),
+                textStyle:
+                  // Restate [FilledButton]'s default, which inherits from
+                  // [zulipTypography]…
+                  Theme.of(context).textTheme.labelLarge!
+                  // …then clobber some attributes to follow Figma:
+                  .merge(const TextStyle(
+                    fontSize: 18,
+                    height: (23 / 18))
+                  .merge(weightVariableTextStyle(context, wght: 400))),
+                shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(7)),
+              ),
+              onPressed: () => _handlePress(context),
+              icon: const Icon(Icons.playlist_add_check),
+              label: Text(zulipLocalizations.markAllAsReadLabel))))),
+    );
   }
 }
 

test/widgets/message_list_test.dart

@@ -610,13 +610,28 @@ 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;
+      // Locate the [MarkAsReadWidget] and check its state
+      // to determine if it is visible.
+      var markAsReadWidget = find.byType(MarkAsReadWidget);
+
+      // The [MarkAsReadWidget] is a [IgnorePointer] wrapped in a [AnimatedOpacity].
+      // We need to check the state of both to determine if the widget is visible.
+      // The [IgnorePointer] is visible when `ignoring` is false and the [AnimatedOpacity]
+      // is visible when `opacity` is 1.0.
+      final ignorePointerFinder = find.descendant(
+        of: markAsReadWidget,
+        matching: find.byType(IgnorePointer),
+      );
+
+      final animatedOpacityFinder = find.descendant(
+        of: markAsReadWidget,
+        matching: find.byType(AnimatedOpacity),
+      );
+
+      final IgnorePointer ignorePointer = tester.widget(ignorePointerFinder);
+      final AnimatedOpacity animatedOpacity = tester.widget(animatedOpacityFinder);
+
+      return !ignorePointer.ignoring && animatedOpacity.opacity == 1.0;
     }
 
     testWidgets('from read to unread', (WidgetTester tester) async {