Flutter - Persisting BottomNavigationBar - how not to show on some pages? - flutter

Question

My implementation:
main.dart: - it builds multi scaffold (Bottom navigation bar is being created on all screens above UI tree)
runApp(MaterialApp(
debugShowCheckedModeBanner: false,
title: "WP-seven",
builder: (context, child) {
return Scaffold(
bottomNavigationBar: NavyBottomBar(navigator: (child.key as GlobalKey<NavigatorState>)),
body: child,
);
},
home: NewsList(0),
));
NavyBottomBar.dart: separated class for the navBar widget.
Here we have a Global navigator key that is used in main.dart to connect to every child's navigator(child is every screen widget.)
final GlobalKey<NavigatorState> navigator;
So there is also a logic to open pages, but the code above is enough to show the bottomNavigationBar on every screen and to be able to navigate.
The problem is that I don't need this bottom navigation on every screen, there should be a way to switch off the navigationBar on some screens.
Probably there is a different approach to achieve this result..?

Answer 1

I've found a solution and it works great, but first a few words about the above:
Hero is not an option, because it does not support all types of navigation, like pushReplacement for example and I had a bug with animation in my NavigationBar while using it, probably because hero has built-in animation, too.
Solution:
I've created a new screen called homePage (something like a hub for navigation).
There we have a thing called PageStorageBucket which is useful for storing per-page state that persists across navigations from one page to another. enter link description here
homePage.dart:
Widget newsList;
Widget favorites;
Widget profile;
Widget answers;
List<Widget> pages;
Widget currentPage;
final PageStorageBucket bucket = PageStorageBucket();
#override
void initState() {
newsList = NewsList(isFavorite: 0);
favorites = NewsList(isFavorite: 1);
profile = Profile(userID: widget.userID);
answers = Answers();
pages = [newsList, favorites, profile, answers];
currentPage = newsList;
super.initState();
}
So we've added a number of Widgets(Screens) to a PageStorage bucket and then we use it in Scaffold of homePage.. there is even a place for it.
#override
Widget build(BuildContext context) {
return Scaffold(
body: PageStorage(
child: currentPage,
bucket: bucket,
),
bottomNavigationBar: BottomNavyBar(
currentIndex: currentTab,
onItemSelected: (int index) async {
setState(() {
currentTab = index;
currentPage = pages[index];
});
},
items: [
BottomNavyBarItem(
icon: Icon(Icons.menu),
title: Text('Новости'),
activeColor: Colors.blue,
inactiveColor: Colors.black
),
BottomNavyBarItem(
icon: Icon(Icons.favorite_border),
title: Text('Избранное'),
activeColor: Colors.red,
inactiveColor: Colors.black
),
],
),
);
}
}
It works perfectly.
homePage Scaffold is persistent and does not re-render when redirecting to another page, so we can use nav bars with animations and anything else.
We can choose what pages will be included into this scope.
We can still use Navigator.push and else inside of these screens
It is possible to use multi-scaffold like when you need different appBars, just delete appBar of homePage and it will use an appBar from the opened screen.

Answer 2

The simplest answer is that you should simply be building the bottom navigation bar on each individual page. The navigation bar itself can be put into its own Stateless or StatefulWidget so that you don't have to specify it completely each time. If you want it to look like it's persisting between pages you could probably use flutter's Hero functionality to do so.
If this isn't something you're willing to do, you could use a NavigatorObserver to toggle whether the bottomNavigationBar is shown or not. That'll also mean putting the MaterialApp/Scaffold/etc within a StatelessWidget.