title: How to handle back navigation in Bottom Navigation in Flutter
body: <p>I am making a flutter application in which flow is something like this: Splash screen where it will be checked whether user is login or not. If not login then go to Login screen else go to Main screen. Main screen has bottom navigation with three tabs and each tab his own navigators and in each navigator it may be possible that some screen may not be showing bottom bar. So I coded this till now.</p>
  <pre><code>class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter',
        home: Splash(),
        routes: &lt;String, WidgetBuilder&gt;{
          '/main_tab':  (context) =&gt; new MainScreen(),
           '/login':  (context) =&gt; new Login(),
        },
      );
    }
  }
  
  </code></pre>
  <p>Now the MainScreen which has bottom tabs is like this.</p>
  <pre><code>class MainScreen extends StatefulWidget {
    @override
    _MainScreenState createState() =&gt; new _MainScreenState();
  }
  
  class _MainScreenState extends State&lt;MainScreen&gt;{
    final _navigatorKey = GlobalKey&lt;NavigatorState&gt;();
    int _selectedIndex = 0;
    int _lastIndex = 0;
  
    void _onItemTapped(int index) {
       if(index == 0) _navigatorKey.currentState.pushNamed('/');
       else if(index == 1) _navigatorKey.currentState.pushNamed('/page1');
       else if(index == 2) _navigatorKey.currentState.pushNamed('/page2');
      setState(() {
        _lastIndex = _selectedIndex;
        _selectedIndex = index;
      });
    }
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: WillPopScope(
          onWillPop: () async {
            if(_selectedIndex == 0) SystemNavigator.pop();
            else if (_navigatorKey.currentState.canPop()) {
               _navigatorKey.currentState.pop();
               setState(() {
                 _selectedIndex = _lastIndex;
                // _lastIndex = _selectedIndex;
               });
                return false;
             }
            return true;
          },
          child: Navigator(
            key: _navigatorKey,
            initialRoute: '/',
              onGenerateRoute: (RouteSettings settings) {
                WidgetBuilder builder;
                // Manage your route names here
                switch (settings.name) {
                  case '/':
                    builder = (BuildContext context) =&gt; Page1();
                    break;
                  case '/page1':
                    builder = (BuildContext context) =&gt; Page2();
                    break;
                  case '/page2':
                    builder = (BuildContext context) =&gt; Page3();
                    break;
                  default:
                    throw Exception('Invalid route: ${settings.name}');
                }
                return MaterialPageRoute(
                  builder: builder,
                  settings: settings,
                );
              }
          ),
        ),
        bottomNavigationBar:BottomNavigationBar(
          items: const &lt;BottomNavigationBarItem&gt;[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text('Home'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.business),
              title: Text('Business'),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.school),
              title: Text('School'),
            ),
          ],
          currentIndex: _selectedIndex,
          selectedItemColor: Colors.amber[800],
          onTap: _onItemTapped,
          type: BottomNavigationBarType.fixed,
        ),
      );
    }
  }
  </code></pre>
  <p>Everything is working fine according to my requirements. To navigate to screen without bottom bar I was having some issue but I managed it by using <code>rootnavigator:true</code> and declaring that route in <code>MainApp()</code>.
  Now, concern is that when I press back button then screen pop up was working fine but it didn't changes the bottom bar selected index. So I put logic in willPop but thats not working fine.
  So please tell me how can I handle back press in bottom bar and also it should change the selected tab of the bottom bar.</p>