Duplicate GlobalKey detected in widget tree with nested Navigator - flutter

Question

I am working with nested navigators for multiple sections in my app and I have defined the keys for these navigators, you can see below the code where I have added Navigator keys in class so i can use it in my project by accessing class
class NavigatorKeys {
static final GlobalKey<NavigatorState> homeNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: "homeNavigatorKey");
static final GlobalKey<NavigatorState> shiftNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: "shiftNavigatorKey");
static final GlobalKey<NavigatorState> requestNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: "requestNavigatorKey");
static final GlobalKey<NavigatorState> messageNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: "messageNavigatorKey");
static final GlobalKey<NavigatorState> profileNavigatorKey =
GlobalKey<NavigatorState>(debugLabel: "ProfileNavigatorKey");
}
Below is the code for one of the sections i.e ProfileNavigator which uses key
import '/theme/styles.dart';
import '/utils/constants.dart';
import '/views/profile/balances_page.dart';
import '/views/profile/change_password_page.dart';
import '/views/profile/language_page.dart';
import '/views/profile/profile_page.dart';
import '/views/profile/test_page.dart';
import '/views/profile/wage_accounts.dart';
import '/widgets/page_route_builder.dart';
import 'package:flutter/material.dart';
class ProfileNavigator extends StatelessWidget {
const ProfileNavigator({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Navigator(
key: NavigatorKeys.profileNavigatorKey,
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/':
return pageRouteBuilder(
ProfilePage(),
);
case '/langPage':
return pageRouteBuilder(
LanguagePage(),
);
case '/changePass':
return pageRouteBuilder(
ChangePasswordPage(),
);
case '/balancePage':
return pageRouteBuilder(
BalancesPage(),
);
case '/testPage':
return pageRouteBuilder(
TestPage(),
);
case '/balancePage':
return pageRouteBuilder(
BalancesPage(),
);
case '/wageAccounts':
return pageRouteBuilder(
WageAccountsPage(),
);
}
return pageRouteBuilder(
Container(
child: Center(
child: Text(
"Hmm...Thats Weird",
style: kTextStyleLargeBlack,
),
),
),
);
},
);
}
}
here is my implementation for BottomBar
List<Widget> mobilePages = [
HomeNavigator(),
GetConfigurationProvider().getConfigurationModel.shiftEnabled? ShiftNavigator():null,
RequestNavigator(),
GetConfigurationProvider().getConfigurationModel.messagesEnabled?MessageNavigator():null,
ProfileNavigator(),
];
Widget _bottomNavigatorBar() {
return Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Theme.of(context).primaryColor,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
),
child: BottomBar(
height: Platform.isIOS ? 90 : 60,
backgroundColor: Theme.of(context).primaryColor,
duration: Duration(milliseconds: 800),
items: <BottomBarItem>[
BottomBarItem(
title: Text(pagesInfoList[0].pageName),
icon: Icon(pagesInfoList[0].pageIcon),
activeColor: Colors.white,
inactiveColor: Colors.grey[300]),
BottomBarItem(
title: Text(pagesInfoList[1].pageName),
icon: Icon(pagesInfoList[1].pageIcon),
activeColor: Colors.white,
inactiveColor: Colors.grey[300]),
BottomBarItem(
title: Text(pagesInfoList[2].pageName),
icon: Icon(pagesInfoList[2].pageIcon),
activeColor: Colors.white,
inactiveColor: Colors.grey[300]),
BottomBarItem(
title: Text(pagesInfoList[3].pageName),
icon: Icon(pagesInfoList[3].pageIcon),
activeColor: Colors.white,
inactiveColor: Colors.grey[300]),
BottomBarItem(
title: Text(pagesInfoList[4].pageName),
icon: Icon(pagesInfoList[4].pageIcon),
activeColor: Colors.white,
inactiveColor: Colors.grey[300]),
],
selectedIndex: _selectedIndex,
onTap: (int index) {
setState(() {
_selectedIndex = index;
});
}),
);
}
And below code I used for android back button to work
List<GlobalKey<NavigatorState>> _navigatorKeys = [
NavigatorKeys.homeNavigatorKey,
NavigatorKeys.shiftNavigatorKey,
NavigatorKeys.requestNavigatorKey,
NavigatorKeys.messageNavigatorKey,
NavigatorKeys.profileNavigatorKey,
];
Future<bool> _systemBackButtonPressed() {
if (_navigatorKeys[_selectedIndex].currentState.canPop()) {
_navigatorKeys[_selectedIndex]
.currentState
.pop(_navigatorKeys[_selectedIndex].currentContext);
} else {
SystemChannels.platform.invokeMethod<void>('SystemNavigator.pop');
}
}
#override
Widget build(BuildContext context) {
return WillPopScope(
onWillPop: _systemBackButtonPressed,
..........
So what happens is when I logout the user and Login again I start getting error of Duplicate Global Key detected it mostly initiates in ProfileNavigator, and then debug console keep showing the message of Duplicate Global key in infinite times
on Logout this is the code that take user to Login Page start of t
Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(
builder: (_) => LoginPage(),
),
);

Answer 1

In your Logout code, you have to use pushReplacement() instead of push(), because it will clear the stack and you will not get a duplicate key error in your widget tree.
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (_) => LoginPage(),
),
);

Answer 2

Navigator.of(context, rootNavigator: true).push(
MaterialPageRoute(
builder: (_) => LoginPage(),
),
);
Places the new Scaffold on top of the previous. You can't push a 2nd duplicate Scaffold as a third layer when you want to return to the original screen, instead use:
Navigator.of(context).pop();
That removes the 2nd screen, and you just see the original, never really left 1st screen. If you don't want to keep the original screen under the 2nd, use
Navigator.of(context).pushReplacement(
MaterialPageRoute(
builder: (_) => LoginPage(),
),
);