I am using this library to display the bottom navbar when navigating to sub screens inside the parent screen. To gain a better view on this, one of the parent screens look like this,
I am currently navigating back to the parent screens using the back buttons I have added to sub screens .Because I couldn't find a way to navigate back to parent screen on clicking the navbar item.
I looked into a few similar questions on stackoverflow but I couldn't find an intuitive answer so far.
Following is how I have implemented my persistent bottom navbar with routes to each sub page from the parent page:
class _HomeState extends State<Home> {
late PersistentTabController _controller;
late BuildContext testContext;
final screens = [
() => HomeScreen(),
() => TripsScreen(),
() => HelpCenterScreen(),
() => ProfileScreen(),
];
@override
void initState() {
super.initState();
_controller = PersistentTabController(initialIndex: 0);
}
@override
void dispose() {
// TODO: implement dispose
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
List<PersistentBottomNavBarItem> _navBarsItems() => [
PersistentBottomNavBarItem(
icon: const ImageIcon(
AssetImage("assets/bottom_navbar/home.png"),
),
title: "Home",
activeColorPrimary: Color(0xff2CC826),
inactiveColorPrimary: Color(0xffFFFFFF),
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: "/",
routes: {
"/Settings": (final context) => const SettingsScreen(),
"/store": (BuildContext context) =>
const StoreScreen(),
"/Highlights": (BuildContext context) =>
const HighlightsScreen(),
"/Cameras": (BuildContext context) => const CamerasScreen(),
"/NewService": (BuildContext context) =>
const NewServiceScreen(),
"/Notifications": (BuildContext context) =>
const NotificationsScreen(),
"/Languages" : (BuildContext context) => const LanguageSelection()
},
),
),
PersistentBottomNavBarItem(
icon: const ImageIcon(
AssetImage("assets/bottom_navbar/trips.png"),
),
title: "Trips",
activeColorPrimary: Color(0xff2CC826),
inactiveColorPrimary: Color(0xffFFFFFF),
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: "/",
routes: {
"/From": (final context) => const FromSearchScreen(),
"/To": (final context) => const ToSearchScreen(),
"/Waypoint" : (final context) => const WaypointSearchScreen(),
},
),
),
PersistentBottomNavBarItem(
icon: const ImageIcon(
AssetImage("assets/bottom_navbar/help.png"),
),
title: "Help",
activeColorPrimary: Color(0xff2CC826),
inactiveColorPrimary: Color(0xffFFFFFF),
routeAndNavigatorSettings: RouteAndNavigatorSettings(
initialRoute: "/",
routes: {
"/unit_manual": (final context) => const UnitManualScreen(),
"/Report": (final context) => const ReportProblemsScreen(),
"/Tutorials": (final context) => const TutorialsScreen(),
"/FAQ": (final context) => const FAQScreen(),
},
),
),
PersistentBottomNavBarItem(
icon: const ImageIcon(
AssetImage("assets/bottom_navbar/profile.png"),
),
title: "Profile",
activeColorPrimary: Color(0xff2CC826),
inactiveColorPrimary: Color(0xffFFFFFF),
),
];
return PersistentTabView(
context,
controller: _controller,
screens: screens.map((screen) => screen()).toList(),
items: _navBarsItems(),
resizeToAvoidBottomInset: true,
navBarHeight: MediaQuery.of(context).viewInsets.bottom > 0 ? 0.0 : 61,
bottomScreenMargin: MediaQuery.of(context).viewInsets.bottom > 0 ? 0.0 : 61,
onWillPop: (final context) async {
return false;
},
margin: EdgeInsets.only(top: 5),
selectedTabScreenContext: (final context) {
testContext = context!;
},
backgroundColor: Color(0xFF565656),
//hideNavigationBar: _hideNavBar,
decoration: const NavBarDecoration(colorBehindNavBar:Colors.white),
screenTransitionAnimation: const ScreenTransitionAnimation(
animateTabTransition: true,
),
navBarStyle:
NavBarStyle.style6,
);
}
What I want to achieve is, whenever I press on a bottom nav bar Item, regardless of whichever sub screen I'm currently on, I want to navigate back to the desired Parent screen according to the nav bar item clicked. (Like on Instagram).I Highly appreciate if you can provide me a solution to this.
Hope you understand my question.Thank You!.
