use as bottom navigation bar of multiple pages

zulip · Mar 22, 2024 · da590f6 · da590f6
1 parent a1f5c8a
commit da590f6
Show file tree

Hide file tree

Showing 6 changed files with 79 additions and 46 deletions.
diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart
@@ -11,6 +11,7 @@ import 'about_zulip.dart';
 import 'inbox.dart';
 import 'login.dart';
 import 'message_list.dart';
+import 'navigation_bar.dart';
 import 'page.dart';
 import 'recent_dm_conversations.dart';
 import 'store.dart';
@@ -255,52 +256,7 @@ class HomePage extends StatelessWidget {
 
     return Scaffold(
       appBar: AppBar(title: const Text("Home")),
-      bottomNavigationBar: NavigationBar(
-        selectedIndex: 0,
-        destinations: [
-          const NavigationDestination(
-            selectedIcon: Icon(Icons.inbox),
-            icon: Icon(Icons.inbox_outlined),
-            label: 'Inbox'),
-          const NavigationDestination(
-            selectedIcon: Icon(Icons.tag),
-            icon: Icon(Icons.tag_outlined),
-            label: 'Streams'),
-          const NavigationDestination(
-            selectedIcon: Icon(Icons.group_outlined),
-            icon: Icon(Icons.group),
-            label: 'Direct Messages'),
-          // TODO enable this when it's available
-          // NavigationDestination(
-          //   selectedIcon: Icon(Icons.account_circle),
-          //   icon: Icon(Icons.account_circle_outlined),
-          //   label: 'Profile'),
-          if (testStreamId != null) ...[
-            const NavigationDestination(
-              selectedIcon: Icon(Icons.bug_report),
-              icon: Icon(Icons.bug_report_outlined),
-              label: 'Test Stream'),
-          ],
-        ],
-        onDestinationSelected: (int index) {
-          switch (index) {
-            case 0:
-              Navigator.push(context, InboxPage.buildRoute(context: context));
-              break;
-            case 1:
-              Navigator.push(context, SubscriptionListPage.buildRoute(context: context));
-              break;
-            case 2:
-              Navigator.push(context, RecentDmConversationsPage.buildRoute(context: context));
-              break;
-            case 3:
-              Navigator.push(context,
-                MessageListPage.buildRoute(context: context,
-                  narrow: StreamNarrow(testStreamId!)));
-              break;
-          }
-        },
-      ),
+      bottomNavigationBar: ZulipNavigationBar(selectedPage: HomePage,),
       body: Center(
         child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
           DefaultTextStyle.merge(

diff --git a/lib/widgets/inbox.dart b/lib/widgets/inbox.dart
@@ -6,6 +6,7 @@ import '../model/recent_dm_conversations.dart';
 import '../model/unreads.dart';
 import 'icons.dart';
 import 'message_list.dart';
+import 'navigation_bar.dart';
 import 'page.dart';
 import 'sticky_header.dart';
 import 'store.dart';
@@ -160,6 +161,7 @@ class _InboxPageState extends State<InboxPage> with PerAccountStoreAwareStateMix
 
     return Scaffold(
       appBar: AppBar(title: const Text('Inbox')),
+      bottomNavigationBar: ZulipNavigationBar(selectedPage: InboxPage),
       body: SafeArea(
         // Don't pad the bottom here; we want the list content to do that.
         bottom: false,

diff --git a/lib/widgets/message_list.dart b/lib/widgets/message_list.dart
@@ -17,6 +17,7 @@ import 'content.dart';
 import 'dialog.dart';
 import 'emoji_reaction.dart';
 import 'icons.dart';
+import 'navigation_bar.dart';
 import 'page.dart';
 import 'profile.dart';
 import 'sticky_header.dart';
@@ -86,6 +87,7 @@ class _MessageListPageState extends State<MessageListPage> {
           ? const Border()
           : null, // i.e., inherit
       ),
+      bottomNavigationBar: ZulipNavigationBar(selectedPage: MessageList),
       // TODO question for Vlad: for a stream view, should we set
       //   [backgroundColor] based on stream color, as in this frame:
       //     https://www.figma.com/file/1JTNtYo9memgW7vV6d0ygq/Zulip-Mobile?node-id=132%3A9684&mode=dev

diff --git a/lib/widgets/navigation_bar.dart b/lib/widgets/navigation_bar.dart
@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+
+import '../model/narrow.dart';
+import 'inbox.dart';
+import 'message_list.dart';
+import 'recent_dm_conversations.dart';
+import 'subscription_list.dart';
+
+class ZulipNavigationBar extends StatelessWidget {
+  final int testStreamId = 7;
+  final Type selectedPage;
+  final Map<Type, int> pageToIndex = {
+    InboxPage: 0,
+    SubscriptionListPage: 1,
+    RecentDmConversationsPage: 2,
+  };
+
+  ZulipNavigationBar({super.key, required this.selectedPage});
+
+  @override
+  Widget build(BuildContext context) {
+    return NavigationBar(
+        selectedIndex: pageToIndex[selectedPage] ?? 0,
+        destinations: [
+          const NavigationDestination(
+            selectedIcon: Icon(Icons.inbox),
+            icon: Icon(Icons.inbox_outlined),
+            label: 'Inbox'),
+          const NavigationDestination(
+            selectedIcon: Icon(Icons.tag),
+            icon: Icon(Icons.tag_outlined),
+            label: 'Streams'),
+          const NavigationDestination(
+            selectedIcon: Icon(Icons.group_outlined),
+            icon: Icon(Icons.group),
+            label: 'Direct Messages'),
+          // TODO enable this when it's available
+          // NavigationDestination(
+          //   selectedIcon: Icon(Icons.account_circle),
+          //   icon: Icon(Icons.account_circle_outlined),
+          //   label: 'Profile'),
+          if (testStreamId != null) ...[
+            const NavigationDestination(
+              selectedIcon: Icon(Icons.bug_report),
+              icon: Icon(Icons.bug_report_outlined),
+              label: 'Test Stream'),
+          ],
+        ],
+        onDestinationSelected: (int index) {
+          switch (index) {
+            case 0:
+              Navigator.pushReplacement(context, InboxPage.buildRoute(context: context));
+              break;
+            case 1:
+              Navigator.pushReplacement(context, SubscriptionListPage.buildRoute(context: context));
+              break;
+            case 2:
+              Navigator.pushReplacement(context, RecentDmConversationsPage.buildRoute(context: context));
+              break;
+            case 3:
+              Navigator.pushReplacement(context,
+                MessageListPage.buildRoute(context: context,
+                  narrow: StreamNarrow(testStreamId!)));
+              break;
+          }
+        },
+      );
+  }
+}
diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart
@@ -7,6 +7,7 @@ import '../model/unreads.dart';
 import 'content.dart';
 import 'icons.dart';
 import 'message_list.dart';
+import 'navigation_bar.dart';
 import 'page.dart';
 import 'store.dart';
 import 'unread_count_badge.dart';
@@ -58,6 +59,7 @@ class _RecentDmConversationsPageState extends State<RecentDmConversationsPage> w
     final sorted = model!.sorted;
     return Scaffold(
       appBar: AppBar(title: Text(zulipLocalizations.recentDmConversationsPageTitle)),
+      bottomNavigationBar: ZulipNavigationBar(selectedPage: RecentDmConversationsPage),
       body: SafeArea(
         // Don't pad the bottom here; we want the list content to do that.
         bottom: false,

diff --git a/lib/widgets/subscription_list.dart b/lib/widgets/subscription_list.dart
@@ -6,6 +6,7 @@ import '../model/narrow.dart';
 import '../model/unreads.dart';
 import 'icons.dart';
 import 'message_list.dart';
+import 'navigation_bar.dart';
 import 'page.dart';
 import 'store.dart';
 import 'text.dart';
@@ -82,6 +83,7 @@ class _SubscriptionListPageState extends State<SubscriptionListPage> with PerAcc
 
     return Scaffold(
       appBar: AppBar(title: const Text("Streams")),
+      bottomNavigationBar: ZulipNavigationBar(selectedPage: SubscriptionListPage),
       body: SafeArea(
         // Don't pad the bottom here; we want the list content to do that.
         bottom: false,