msglist [nfc]: Make a widget-like class for the app bar

Conceptually this should be a widget, but can't quite be, for the
reasons explained in the comment.  Still we can organize the code
in nearly the same way as if it were a widget.

Co-authored-by: Greg Price <[email protected]>

Author: chrisbobbe

lib/widgets/message_list.dart

@@ -283,53 +283,6 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
 
   @override
   Widget build(BuildContext context) {
-    final store = PerAccountStoreWidget.of(context);
-    final messageListTheme = MessageListTheme.of(context);
-    final zulipLocalizations = ZulipLocalizations.of(context);
-
-    final Color? appBarBackgroundColor;
-    bool removeAppBarBottomBorder = false;
-    switch(narrow) {
-      case CombinedFeedNarrow():
-      case MentionsNarrow():
-      case StarredMessagesNarrow():
-        appBarBackgroundColor = null; // i.e., inherit
-
-      case ChannelNarrow(:final streamId):
-      case TopicNarrow(:final streamId):
-        final subscription = store.subscriptions[streamId];
-        appBarBackgroundColor =
-          colorSwatchFor(context, subscription).barBackground;
-        // All recipient headers will match this color; remove distracting line
-        // (but are recipient headers even needed for topic narrows?)
-        removeAppBarBottomBorder = true;
-
-      case DmNarrow():
-        appBarBackgroundColor = messageListTheme.dmRecipientHeaderBg;
-        // All recipient headers will match this color; remove distracting line
-        // (but are recipient headers even needed?)
-        removeAppBarBottomBorder = true;
-    }
-
-    List<Widget> actions = [];
-    switch (narrow) {
-      case CombinedFeedNarrow():
-      case MentionsNarrow():
-      case StarredMessagesNarrow():
-      case DmNarrow():
-        break;
-      case ChannelNarrow(:final streamId):
-        actions.add(_TopicListButton(streamId: streamId));
-      case TopicNarrow(:final streamId):
-        actions.add(IconButton(
-          icon: const Icon(ZulipIcons.message_feed),
-          tooltip: zulipLocalizations.channelFeedButtonTooltip,
-          onPressed: () => Navigator.push(context,
-            MessageListPage.buildRoute(context: context,
-              narrow: ChannelNarrow(streamId)))));
-        actions.add(_TopicListButton(streamId: streamId));
-    }
-
     final Anchor initAnchor;
     if (widget.initAnchorMessageId != null) {
       initAnchor = NumericAnchor(widget.initAnchorMessageId!);
@@ -340,15 +293,7 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
     }
 
     Widget result = Scaffold(
-      appBar: ZulipAppBar(
-        buildTitle: (willCenterTitle) =>
-          MessageListAppBarTitle(narrow: narrow, willCenterTitle: willCenterTitle),
-        actions: actions,
-        backgroundColor: appBarBackgroundColor,
-        shape: removeAppBarBottomBorder
-          ? const Border()
-          : null, // i.e., inherit
-      ),
+      appBar: _MessageListAppBar.build(context, narrow: narrow),
       // TODO question for Vlad: for a stream view, should we set the Scaffold's
       //   [backgroundColor] based on stream color, as in this frame:
       //     https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132%3A9684&mode=dev
@@ -397,6 +342,77 @@ class _MessageListPageState extends State<MessageListPage> implements MessageLis
   }
 }
 
+// Conceptually this should be a widget class.  But it needs to be a
+// PreferredSizeWidget, with the `preferredSize` that the underlying AppBar
+// will have... and there's currently no good way to get that value short of
+// constructing the whole AppBar widget with all its properties.
+// So this has to be built eagerly by its parent's build method,
+// making it a build function rather than a widget.  Discussion:
+//   https://github.com/zulip/zulip-flutter/pull/1662#discussion_r2183471883
+// Still we can organize it on a class, with the name the widget would have.
+// TODO(upstream): AppBar should expose a bit more API so that it's possible
+//   to customize by composition in a reasonable way.
+abstract class _MessageListAppBar {
+  static AppBar build(BuildContext context, {required Narrow narrow}) {
+    final store = PerAccountStoreWidget.of(context);
+    final messageListTheme = MessageListTheme.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
+
+    final Color? appBarBackgroundColor;
+    bool removeAppBarBottomBorder = false;
+    switch(narrow) {
+      case CombinedFeedNarrow():
+      case MentionsNarrow():
+      case StarredMessagesNarrow():
+        appBarBackgroundColor = null; // i.e., inherit
+
+      case ChannelNarrow(:final streamId):
+      case TopicNarrow(:final streamId):
+        final subscription = store.subscriptions[streamId];
+        appBarBackgroundColor =
+          colorSwatchFor(context, subscription).barBackground;
+        // All recipient headers will match this color; remove distracting line
+        // (but are recipient headers even needed for topic narrows?)
+        removeAppBarBottomBorder = true;
+
+      case DmNarrow():
+        appBarBackgroundColor = messageListTheme.dmRecipientHeaderBg;
+        // All recipient headers will match this color; remove distracting line
+        // (but are recipient headers even needed?)
+        removeAppBarBottomBorder = true;
+    }
+
+    List<Widget> actions = [];
+    switch (narrow) {
+      case CombinedFeedNarrow():
+      case MentionsNarrow():
+      case StarredMessagesNarrow():
+      case DmNarrow():
+        break;
+      case ChannelNarrow(:final streamId):
+        actions.add(_TopicListButton(streamId: streamId));
+      case TopicNarrow(:final streamId):
+        actions.add(IconButton(
+          icon: const Icon(ZulipIcons.message_feed),
+          tooltip: zulipLocalizations.channelFeedButtonTooltip,
+          onPressed: () => Navigator.push(context,
+            MessageListPage.buildRoute(context: context,
+              narrow: ChannelNarrow(streamId)))));
+        actions.add(_TopicListButton(streamId: streamId));
+    }
+
+    return ZulipAppBar(
+      buildTitle: (willCenterTitle) =>
+        MessageListAppBarTitle(narrow: narrow, willCenterTitle: willCenterTitle),
+      actions: actions,
+      backgroundColor: appBarBackgroundColor,
+      shape: removeAppBarBottomBorder
+        ? const Border()
+        : null, // i.e., inherit
+    );
+  }
+}
+
 class RevealedMutedMessagesState extends ChangeNotifier {
   final Set<int> _revealedMessages = {};