I have a scenario where I need to use a BottomNavigationBar while ensuring the following:
- When changing tabs, where a tab is a particular screen, screens should not refresh, but the state of each screen should be maintained
- It must be possible to change tab using both the BottomNavigationBar or Navigator
I am trying to build a proof of concept (on GitHub) considering the above but it is not working as it should be.
In the proof of concept, I have 3 screens:
- MainScreen,
- Settings
- ProfileSettings.
, and only 2 items on the BottomNavigationBar:
- MainScreen
- Settings
On MainScreen, there is a button that allow navigation to Settings. On Settings, there are two buttons, to Navigate to Settings and ProfileSettings respectively. So ProfileSettings can only be reached from the button on the Settings tab.
If I am on ProfileSettings, I tap on MainScreen on the bottomNavigationBar, once on MainScreen, I tap on Settings, I should see ProfileSettings, this is what I mean by preserving the state.
Below is probably the most important part of the proof of concept. It is part of a page called "PageWithBottomBar.dart" that loads the MainScreen,Settings and ProfileSettings page.
@override
Widget build(BuildContext context) {
....
Scaffold(
appBar: AppBar(title: Text("Trying bottom bar")),
bottomNavigationBar: bottomNavBar,
body: Navigator(
key: _navigatorKey,
onGenerateRoute: (settings){
Widget widget =MainScreen();
if (settings.name == "/main"){
widget = MainScreen();
} else if (settings.name == "/settings"){
widget = Settings();
}
else if (settings.name == "/settings/profile"){
widget = ProfileSettings();
}
return MaterialPageRoute(builder: (context)=> widget,settings: settings);
},
initialRoute: "/main",
),
);
}
Currently, in the proof of concept, I am getting the following problems:
- State is not being preserved
- When I use Navigator, I can switch to a different tab, but I cannot make a NavigationBarItem active when using Navigator