title: Problem with Navigation (Error: RangeError (index): Index out of range: index should be less than 3: 3)
body: <p>I am trying to create custom Navigation for my flutter app, the app and the navigation works fine until there are 3 screens/pages. As soon as I add the 4th Screen, I get a range error the error stack is the following:</p>
  <pre><code> ======== Exception caught by gesture ===============================================================
  The following IndexError was thrown while handling a gesture:
  RangeError (index): Index out of range: index should be less than 3: 3
  
  When the exception was thrown, this was the stack: 
  C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49  throw_
  C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/js_array.dart 581:7             _get]
  packages/test_proj/page_navigator.dart 17:35                                                                               &lt;fn&gt;
  packages/flutter/src/material/bottom_navigation_bar.dart 987:25                                                            &lt;fn&gt;
  packages/flutter/src/material/ink_well.dart 989:21                                                                         [_handleTap]
  ...
  Handler: &quot;onTap&quot;
  Recognizer: TapGestureRecognizer#86634
    debugOwner: GestureDetector
    state: ready
    won arena
    finalPosition: Offset(908.8, 678.4)
    finalLocalPosition: Offset(131.8, 5.4)
    button: 1
    sent tap down
  ====================================================================================================
  </code></pre>
  <p>As soon as I add the fourth page, I also stop getting an output of my screen on my Third page. This is the code:</p>
  <pre><code>    class App extends StatefulWidget {
    @override
    State&lt;StatefulWidget&gt; createState() =&gt; AppState();
  }
  
  class AppState extends State&lt;App&gt; {
    String _currentPage = &quot;Page1&quot;;
    List&lt;String&gt; pageKeys = [&quot;Page1&quot;, &quot;Page2&quot;, &quot;Page3, Page4&quot;];
    Map&lt;String, GlobalKey&lt;NavigatorState&gt;&gt; _navigatorKeys = {
      &quot;Page1&quot;: GlobalKey&lt;NavigatorState&gt;(),
      &quot;Page2&quot;: GlobalKey&lt;NavigatorState&gt;(),
      &quot;Page3&quot;: GlobalKey&lt;NavigatorState&gt;(),
      &quot;Page4&quot;: GlobalKey&lt;NavigatorState&gt;(),
    };
    int _selectedIndex = 0;
  
  
    void _selectTab(String tabItem, int index) {
      if(tabItem == _currentPage ){
        _navigatorKeys[tabItem]!.currentState!.popUntil((route) =&gt; route.isFirst);
      } else {
        setState(() {
          _currentPage = pageKeys[index];
          _selectedIndex = index;
        });
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return WillPopScope(
        onWillPop: () async {
          final isFirstRouteInCurrentTab =
          !await _navigatorKeys[_currentPage]!.currentState!.maybePop();
          if (isFirstRouteInCurrentTab) {
            if (_currentPage != &quot;Page1&quot;) {
              _selectTab(&quot;Page1&quot;, 1);
  
              return false;
            }
          }
          // let system handle back button if we're on the first route
          return isFirstRouteInCurrentTab;
        },
        child: Scaffold(
          body: Stack(
              children:&lt;Widget&gt;[
                _buildOffstageNavigator(&quot;Page1&quot;),
                _buildOffstageNavigator(&quot;Page2&quot;),
                _buildOffstageNavigator(&quot;Page3&quot;),
                _buildOffstageNavigator(&quot;Page4&quot;),
              ]
          ),
          bottomNavigationBar: BottomNavigationBar(
            selectedItemColor: Colors.blueAccent,
            onTap: (int index) { _selectTab(pageKeys[index], index); },
            currentIndex: _selectedIndex,
            items: [
              BottomNavigationBarItem(
                icon: new Icon(Icons.looks_one),
                label: 'Page1'
              ),
              BottomNavigationBarItem(
                icon: new Icon(Icons.looks_two),
                label: 'Page2'
              ),
              BottomNavigationBarItem(
                icon: new Icon(Icons.looks_3),
                label: 'Page3'
              ),
              BottomNavigationBarItem(
                icon: new Icon(Icons.looks_4),
                label: 'Page4'
              ),
            ],
            type: BottomNavigationBarType.fixed,
          ),
        ),
        );
  
    }
  
  
  
    Widget _buildOffstageNavigator(String tabItem) {
      return Offstage(
        offstage: _currentPage != tabItem,
        child: TabNavigator(
          navigatorKey: _navigatorKeys[tabItem]!,
          tabItem: tabItem,
        ),
      );
    }
  }
  </code></pre>
  <p>and....</p>
  <pre><code>class TabNavigatorRoutes {
    static const String root = '/';
    static const String detail = '/detail';
  }
  
  class TabNavigator extends StatelessWidget {
    TabNavigator({required this.navigatorKey, required this.tabItem});
    final GlobalKey&lt;NavigatorState&gt; navigatorKey;
    final String tabItem;
  
    @override
    Widget build(BuildContext context) {
  
      Widget child = Text(&quot;plz work&quot;);
      if(tabItem == &quot;Page1&quot;)
        child = Page1();
      else if(tabItem == &quot;Page2&quot;)
        child = Page2();
      else if(tabItem == &quot;Page3&quot;)
        child = Page3();
      else if(tabItem == &quot;Page4&quot;)
        child = Page4();
  
      return Navigator(
        key: navigatorKey,
        onGenerateRoute: (routeSettings) {
          return MaterialPageRoute(
              builder: (context) =&gt; child
          );
        },
      );
    }
  }
  </code></pre>
  <p>As for the actual content on the pages, It is just a Text widget. Please help me if possible. Thanks.</p>