Flutter : How to Pop with two nested Navigators? - flutter

Question

I have a MaterialApp(navigatorKey: rootNavigatorKey ) , which has two routes
'/datoPhotoViewer' without a drawer
'/' which has a Drawer, this drawer has listItems that pushes the widgets on his child : Navigator(navigatorKey: navigatorKey ),
The problem is when i press the back button, whole app closes, My idea was then, catch Back-Button-pressed , and calling the navigatorKey.currentState.pop() from the adequate navigatorKey
So to do it, i need WillPopScope .. when I set a WillPopScope on each route, i find that when i press Back button, the app was still closing
So i've decided to delete all the WillPopScope i had, and put only one WillPopScope(onWillPop: onPop) on main.dart where by trying, i find that it catches every 'back button pressed', and changing that static function onPop when i open a route with :
setOnPopFunction(Function func){
onPop = func;
}
But when i call this function, onPop function isn't changed ,
Another thing i saw happening : I'm getting logged those weird results when accessing the navigatorKeys
final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey();
final GlobalKey<NavigatorState> navigatorKey = GlobalKey();
Function onPop ;
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
onPop = (){
log("___Navigator1 context "+ ModalRoute.of(rootNavigatorKey.currentContext).toString());
//this prints '___Navigator1 context null' , even though i can push /datoPhotoViewer to Navigator 1
log("___Navigator2 routeName "+ ModalRoute.of(navigatorKey.currentContext).settings.name.toString());
//always printing '___Navigator2 routeName /' ,even when this navigatorKey has been pushed to another route
return Future.value(false);
};
return MaterialApp(
navigatorKey: rootNavigatorKey, //Navigator 1 key
routes: {
'/': (context) { //Navigator 1 route
return WillPopScope(
onWillPop: onPop //this is the only onWillPop function i can get called when pressing back button , Which i'll change with setOnPopFunction()
child: MyMainStructure( //MyMainStructure is a Scaffold with the drawer
child: Navigator(
key: navigatorKey, //Navigator 2 key
onGenerateRoute: (RouteSettings settings) {
switch (settings.name) {
case '/': //Navigator 2 route
return MaterialPageRoute(
builder: (_) => TodosLosItemsPage());
case '/categoria': //Navigator 2 route
return MaterialPageRoute(
builder: (_) =>
CategoriaConceptosPage(settings.arguments),
);
}
},
initialRoute: '/', //Navigator 2 initial
)),
);
},
'/datoPhotoViewer': (context) => //Navigator 1 route
datoPhotoViewer(ModalRoute.of(context).settings.arguments),
},
initialRoute: '/', //Navigator 1 initial
),
);
}
}
setOnPopFunction(Function func){
onPop = func;
}
thanks in advance

Answer 1

To solve this i ended up using an external package
https://pub.dev/packages/back_button_interceptor
I've disabled the back button for all the app with a
WillPopScope(
onWillPop: () async => false,
child: ....
And making a BackButtonManager class to override the Back Button
List<Function> _listeners = List<Function>();
class BackButtonManager {
static void addCustomFunction(Function func){
_listeners.add(func);
BackButtonInterceptor.add(func);
}
static void resetListeners(){
_listeners.forEach((element) {
BackButtonInterceptor.remove(element);
});
_listeners.clear();
}
This is the structure of what i do when a new route is opened, on initState i call:
BackButtonManager.resetListeners();
BackButtonManager.addCustomFunction ((bool asd){
//handle it
//for example: navigatorKey.CurrentState.pop();
// then check which widget is going to be onscreen now ,
// and when this BackButton is pressed , add to BackButtonManager it's
// BackButtonFunction
BackButtonManager.resetListeners();
BackButtonManager.addCustomFunction ((bool asd){
//handle the incoming OnScreenWidget
return false;
});
return false;
});
I'd recommend to make a list that represents your stacks of routes, there might be another way , but this works