Flutter how to remove open routes when changing page inside IndexedStack - flutter

Question

In my app I have a NavigationRail on the left and the main body on the right. I'm using nested Navigators so that when a widget inside the IndexedStack pushes a new route the NavigationRail stays on the screen. But this generates a problem when there is a new Navigator Route on the screen and I try to change the page with NavigationRail it changes the selected icon, but the Navigator route stays on the screen.
Row(
children: [
// GestureDetector uses onHorizontalDragStart to make the Navigation
// Rail extend or shrink
GestureDetector(
onHorizontalDragStart: (details) {
setState(() {
_navRailExtended = !_navRailExtended;
});
},
child: NavigationRail(
// The width of the navigation rail
minExtendedWidth: 180,
// Text and icon themes for selected destinations
selectedIconTheme:
IconThemeData(color: Colors.purple[600]),
selectedLabelTextStyle: TextStyle(
color: Colors.purple[600],
fontWeight: FontWeight.bold,
fontSize: 16),
// Text and icon themes for unselected destinations
unselectedIconTheme:
IconThemeData(color: Colors.grey[200]),
unselectedLabelTextStyle: TextStyle(
color: Colors.grey[400],
fontWeight: FontWeight.bold,
fontSize: 15),
// Background color of the navigation rail, typical
// color for the dark theme in Flutter
backgroundColor: const Color.fromARGB(255, 47, 47, 47),
// extended makes the navigation rail wider
extended: _navRailExtended,
selectedIndex: _pageIndex,
onDestinationSelected: (int index) {
setState(() {
_pageIndex = index;
});
},
destinations: const <NavigationRailDestination>[
NavigationRailDestination(
icon: Icon(Icons.explore_rounded, size: 35),
label: Text('Discover'),
),
NavigationRailDestination(
icon: Icon(Icons.home_filled, size: 35),
label: Text('Notebook'),
),
NavigationRailDestination(
icon: Icon(Icons.games_sharp, size: 35),
label: Text('Games'),
),
NavigationRailDestination(
icon: Icon(Icons.analytics_outlined, size: 35),
label: Text('Analytics'),
),
],
),
),
// A vertical divider between the navigation rail and the body
const VerticalDivider(thickness: 1.5, width: 1),
// Expanded makes the body of the windows app centered
// (without it the row widget would screw up the sizing of the app)
Expanded(
// Navigator makes all new routes inside the main pages
// opened with 'Navigator.pop()' ignore the navigation rail,
// i.e. the navigation rail will always stay opened
child: Navigator(
onGenerateRoute: (settings) {
return MaterialPageRoute(builder: ((context) {
// Indexed Stack keeps the state of each page unchanged
return IndexedStack(
index: _pageIndex,
children: const [Discover(), NoteBook(), Games(), Analytics()],
);
}));
},
),
)
],
)
App on the start:
When there is a new Navigator route on the screen:
I try to change the page:
What it should do: