Multiple navigators in Flutter causes problem with pop - flutter

Question

I'm struggling in a Flutter situation with multiple navigators. Concept here is a page which triggers a modal with his own flow of multiple pages. Inside the modal everything is going swiftly (navigation pushes/pops are working), but if the modal is dismissed it removes every page of the lowest navigator. I've looked at the example of https://stackoverflow.com/a/51589338, but I'm probably missing something here.
There's a wrapper Widget inside a page which is the root of the application.
class Wrapper extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Padding(
padding: EdgeInsets.only(top: 10, bottom: 20),
child: FlatButton(
child: Padding(
padding: EdgeInsets.symmetric(vertical: 5),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
'Open modal',
),
],
),
),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
settings: RouteSettings(name: '/modal'),
builder: (context) => Modal(),
),
);
},
),
),
);
}
}
The modal initiates a Scaffold with his own navigator to handle its own flow.
class Modal extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: new Navigator(
initialRoute: FirstModalPage.route().toString(),
onGenerateRoute: (routeSettings) {
final path = routeSettings.name;
if (path == '/secondmodalpage') {
return MaterialPageRoute(
settings: routeSettings,
builder: (_) => SecondModalPage(),
);
}
return new MaterialPageRoute(
settings: routeSettings,
builder: (_) => FirstModalPage(),
);
},
),
);
}
}
The pages inside the modal are below with a close button which should remove the modal from the root navigator. But for some reason if I call pop() it removes all pages from the widget tree. And popUntil((route) => route.isFirst) doesn't do anything at all. If I'm looking at the widget via the Widget Inspector it does say that the Wrapper and Modal are on the same level.
class FirstModalPage extends StatelessWidget {
static Route route() {
return MaterialPageRoute<void>(builder: (_) => FirstModalPage());
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Padding(
padding: EdgeInsets.only(
top: 30,
right: 20,
bottom: 10,
left: 20,
),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
if (Navigator.of(context).canPop()) {
Navigator.of(context).pop();
}
},
child: Text('Back'),
),
Text(
'First modal page title'
),
GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
Navigator.of(context, rootNavigator: true).popUntil(
(route) => route.isFirst,
);
},
child: Text('Close'),
),
],
),
),
FlatButton(
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(builder: (context) => SecondModalPage()),
);
},
child: Text(
'Second modal page'
),
),
],
),
);
}
}

Answer 1

You'd need to use a Navigator key to keep tab on which Navigator you need to do an action with.
final _mainNavigatorKey = GlobalKey<NavigatorState>();
Navigator(
key: _mainNavigatorKey,
...
),
To use the Navigator Key, you can call _mainNavigatorKey.currentState.pop();