Issue
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(),
),
);
Solution
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(),
),
);
Answered By - Ahsan Zahid
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.