From da590f6e54d95579622fa5736a2bee718df9c969 Mon Sep 17 00:00:00 2001 From: Chris Chua Date: Fri, 22 Mar 2024 20:30:52 +0800 Subject: [PATCH] use as bottom navigation bar of multiple pages --- lib/widgets/app.dart | 48 +---------------- lib/widgets/inbox.dart | 2 + lib/widgets/message_list.dart | 2 + lib/widgets/navigation_bar.dart | 69 ++++++++++++++++++++++++ lib/widgets/recent_dm_conversations.dart | 2 + lib/widgets/subscription_list.dart | 2 + 6 files changed, 79 insertions(+), 46 deletions(-) create mode 100644 lib/widgets/navigation_bar.dart diff --git a/lib/widgets/app.dart b/lib/widgets/app.dart index f5b4f5bd84..5c959f05c3 100644 --- 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 index 8aa5172efc..68aec486a1 100644 --- 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 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 index d80f31bea4..7bb2316af0 100644 --- 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 { ? 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 new file mode 100644 index 0000000000..6c18e7a03e --- /dev/null +++ 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 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; + } + }, + ); + } +} \ No newline at end of file diff --git a/lib/widgets/recent_dm_conversations.dart b/lib/widgets/recent_dm_conversations.dart index 27bf2a7560..3a5e164dcf 100644 --- 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 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 index 9769311543..899f942f23 100644 --- 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 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,