home [nfc]: Factor bottom nav into its own widget

Co-authored-by: MritunjayTiwari14 <[email protected]>

Author: chrisbobbe

lib/widgets/home.dart

@@ -87,71 +87,82 @@ class _HomePageState extends State<HomePage> {
 
   @override
   Widget build(BuildContext context) {
-    final zulipLocalizations = ZulipLocalizations.of(context);
-
     const pageBodies = [
       (_HomePageTab.inbox,          InboxPageBody()),
       (_HomePageTab.channels,       SubscriptionListPageBody()),
       // TODO(#1094): Users
       (_HomePageTab.directMessages, RecentDmConversationsPageBody()),
     ];
 
-    _NavigationBarButton button(_HomePageTab tab, IconData icon, String label) {
-      return _NavigationBarButton(icon: icon,
-        selected: _tab.value == tab,
-        onPressed: () {
-          _tab.value = tab;
-        },
-        label: label);
-    }
+    return Scaffold(
+      appBar: ZulipAppBar(titleSpacing: 16,
+        title: Text(_currentTabTitle)),
+      body: Stack(
+        children: [
+          for (final (tab, body) in pageBodies)
+            // TODO(#535): Decide if we find it helpful to use something like
+            //   [SemanticsProperties.namesRoute] to structure this UI better
+            //   for screen-reader software.
+            Offstage(offstage: tab != _tab.value, child: body),
+        ]),
+      bottomNavigationBar: _BottomNavBar(tabNotifier: _tab));
+  }
+}
+
+class _BottomNavBar extends StatelessWidget {
+  const _BottomNavBar({required this.tabNotifier});
+
+  final ValueNotifier<_HomePageTab> tabNotifier;
+
+  _NavigationBarButton _button(_HomePageTab tab, IconData icon, String label) {
+    return _NavigationBarButton(icon: icon,
+      selected: tabNotifier.value == tab,
+      onPressed: () {
+        tabNotifier.value = tab;
+      },
+      label: label);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final designVariables = DesignVariables.of(context);
+    final zulipLocalizations = ZulipLocalizations.of(context);
 
     // TODO(a11y): add tooltips for these buttons
     final navigationBarButtons = [
-      button(_HomePageTab.inbox,          ZulipIcons.inbox,
+      _button(_HomePageTab.inbox,          ZulipIcons.inbox,
         zulipLocalizations.inboxPageTitle),
       _NavigationBarButton(         icon: ZulipIcons.message_feed,
         selected: false,
         onPressed: () => Navigator.push(context,
           MessageListPage.buildRoute(context: context,
             narrow: const CombinedFeedNarrow())),
         label: zulipLocalizations.combinedFeedPageTitle),
-      button(_HomePageTab.channels,       ZulipIcons.hash_italic,
+      _button(_HomePageTab.channels,       ZulipIcons.hash_italic,
         zulipLocalizations.channelsPageTitle),
       // TODO(#1094): Users
-      button(_HomePageTab.directMessages, ZulipIcons.two_person,
+      _button(_HomePageTab.directMessages, ZulipIcons.two_person,
         zulipLocalizations.recentDmConversationsPageTitle),
       _NavigationBarButton(         icon: ZulipIcons.menu,
         selected: false,
-        onPressed: () => _showMainMenu(context, tabNotifier: _tab),
+        onPressed: () => _showMainMenu(context, tabNotifier: tabNotifier),
         label: zulipLocalizations.navBarMenuLabel),
     ];
 
-    final designVariables = DesignVariables.of(context);
-    return Scaffold(
-      appBar: ZulipAppBar(titleSpacing: 16,
-        title: Text(_currentTabTitle)),
-      body: Stack(
-        children: [
-          for (final (tab, body) in pageBodies)
-            // TODO(#535): Decide if we find it helpful to use something like
-            //   [SemanticsProperties.namesRoute] to structure this UI better
-            //   for screen-reader software.
-            Offstage(offstage: tab != _tab.value, child: body),
-        ]),
-      bottomNavigationBar: DecoratedBox(
-        decoration: BoxDecoration(
-          border: Border(top: BorderSide(color: designVariables.borderBar)),
-          color: designVariables.bgBotBar),
-        child: SafeArea(
-          child: ConstrainedBox(
-            // TODO(design): determine a suitable max width for bottom nav bar
-            constraints: const BoxConstraints(maxWidth: 600, minHeight: 48),
-            child: Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                for (final navigationBarButton in navigationBarButtons)
-                  Expanded(child: navigationBarButton),
-              ])))));
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        border: Border(top: BorderSide(color: designVariables.borderBar)),
+        color: designVariables.bgBotBar),
+      child: SafeArea(
+        child: ConstrainedBox(
+          // TODO(design): determine a suitable max width for bottom nav bar
+          constraints: const BoxConstraints(maxWidth: 600, minHeight: 48),
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              for (final navigationBarButton in navigationBarButtons)
+                Expanded(child: navigationBarButton),
+            ]))));
   }
 }