Flutter simulate an action on the navigation bar with provider - flutter

Question

I work with provider and I am a little confused with a problem. I want to simulate an action on the navigation bar when I click a button on the page.
Example:
My navigation bar consists of 3 items (menu 1, menu 2, menu 3). By clicking on the "Go to menu 2" button on my page, I want to make it look like I was clicking on the navigation bar. So the page changes and the navigation bar is updated.
In my example I will work with 3 pages to make it easier to understand. InitialElementScreen, InitialElementResultScreen, CorrectionsScreen.
The InitialElementResultScreen has no navigation bar.
My problem:
For that I use provider. I manage to do my system when I am on a menu page. Example if I put my button on the InitialElementScreen page then my system will work and take me to CorrectionsScreen.
It no longer works if my button is on the InitialElementResultScreen page which is a page opened with navigator.push from InitialElementScreen.
Here is my tree structure when I am on InitialElementScreen:
My AppScreen:
class AppScreen extends StatelessWidget {
const AppScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<LicenseNotifier>(
create: (_) => LicenseNotifier(),
child: MaterialApp(
title: AppConfig.APPLICATION_NAME,
debugShowCheckedModeBanner: false,
theme: AppTheme().data,
initialRoute: AppRoutes.HOME,
onGenerateRoute: RoutesClass.generate,
),
);
}
}
My RouteClass :
abstract class RoutesClass{
static Route<dynamic> generate(RouteSettings settings){
final args = settings.arguments;
switch(settings.name){
case AppRoutes.HOME :
return MaterialPageRoute(
builder: (context) => Consumer(
builder: (context, LicenseNotifier license, _) {
return license.selectHomeScreen();
},
),
);
break;
}
My Widget selectHomeScreen in my LicenseNotifier:
Widget selectHomeScreen()
{
switch (appState) {
case AppState.Uninitialized:
return SplashedScreen();
break;
case AppState.Authenticating:
case AppState.Unauthenticated:
return LicenseHomeScreen(title: "Activate the license");
break;
case AppState.Authenticated:
return ChangeNotifierProvider<BottomNavigationBarNotifier>(
create: (BuildContext context) => BottomNavigationBarNotifier(),
child: NavigationBarScreen(),
);
break;
}
return null;
}
My NavigationBarScreen :
class NavigationBarScreen extends StatelessWidget
{
NavigationBarScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
var navigationProvider = Provider.of<BottomNavigationBarNotifier>(context);
return SafeArea(
child: Scaffold(
body: navigationProvider.loadScreenWithNavigation(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: navigationProvider.currentIndex,
onTap: (index) {
navigationProvider.navigationScreenIndex = index;
},
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Menu 1',
),
BottomNavigationBarItem(
icon: Icon(Icons.calculate),
label: 'Menu 2',
),
BottomNavigationBarItem(
icon: Icon(Icons.library_books_sharp),
label: 'Menu 3',
),
],
),
),
);
}
}
My BottomNavigationBarNotifier:
class BottomNavigationBarNotifier with ChangeNotifier {
int currentIndex = AppConfig.NAVIGATION_DEFAULT_INDEX;
BottomNavigationBarNotifier();
set navigationScreenIndex(int index) {
currentIndex = index;
notifyListeners();
}
Widget loadScreenWithNavigation()
{
switch (currentIndex)
{
case 0:
return MultiProvider(
providers: [
... some providers
],
child: InitialElementScreen(title : 'Menu 1'),
);
break;
case 1:
return CorrectionsScreen(title: 'Menu 2')
break;
case 2:
return TableHomeScreen(title: 'Menu 3');
break;
default:
return InitialElementScreen(title : 'Menu 1');
break;
}
}
}
So if the button "Go to Menu 2" is in my InitialElementScreen, it's works. The code of the button:
var _formProvider = Provider.of<BottomNavigationBarNotifier>(context, listen: false);
_formProvider.navigationScreenIndex = 1;
notifyListeners();
Now I want my "Go to Menu 2" button to be in a sub page of menu 1, so I'm going to have a button in my InitialElementScreen to open my InitialElementResultScreen page:
await Navigator.pushNamed(context, AppRoutes.RESULT, arguments: jsonEncode(data.toMap()));
Now still in my RouteClass file, I add this code to load my InitialElementResultScreen page:
case AppRoutes.RESULT:
var data = settings.arguments as String;
return MaterialPageRoute(
builder: (context) => Consumer(
builder: (context, LicenseNotifier license, _) {
return ChangeNotifierProvider<BottomNavigationBarNotifier>(
create: (BuildContext context) => BottomNavigationBarNotifier(),
child: ChangeNotifierProvider<InitialCalculatorResultNotifier>(
create: (BuildContext context) => InitialCalculatorResultNotifier(),
child: InitialElementResultScreen(title: "Sub Menu 1", data: data),
),
);
},
),
);
break;
Here is now my tree structure when I am on my sub page of menu 1, InitialElementResultScreen:
If I put my "Go to Menu 2" button back in the InitialElementResultScreen page, it doesn't work anymore ... I come back to the Menu 1 page, InitialElementScreen, why ?
Code of my button "Go to Menu 2"
which is the same as shown above with a Navigator.pop:
var _formProvider = Provider.of<BottomNavigationBarNotifier>(context, listen: false);
_formProvider.navigationScreenIndex = 1;
notifyListeners();
Navigator.pop(context);
EDIT: I resolve my problem !
From what I understand the secondary page opened with navigator.push opens under the MaterialApp Widget. So I moved my BottomNavigationBarNotifier above.
class AppScreen extends StatelessWidget {
const AppScreen({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return ChangeNotifierProvider<LicenseNotifier>(
create: (_) => LicenseNotifier(),
child: ChangeNotifierProvider<BottomNavigationBarNotifier>(
create: (BuildContext context) => BottomNavigationBarNotifier(),
child: MaterialApp(
title: AppConfig.APPLICATION_NAME,
debugShowCheckedModeBanner: false,
theme: AppTheme().data,
initialRoute: AppRoutes.HOME,
onGenerateRoute: RoutesClass.generate,
),
)
);
}
}