Flutter How To Properly Handle Logout

Question

I have two problems with logout. First one is when I logout and click back btn from login screen, it goes back to home screen again. I am using Navigator.of(context).pushAndRemoveUntil() but still this issue. Second problem is that the bottom navigation bar stays attached on login screen even after I logout.

I didn't have these issues until I made changes to bottom navigation. I made changes so that bottom nav should stay attached if I open another screen in home screen, profile screen.

This is my bottom nav bar logic:

String _currentPage = "Page1";
  List<String> pageKeys = ["Page1", "Page2", "Page3"];
  Map<String, GlobalKey<NavigatorState>> _navigatorKeys = {
    "Page1": GlobalKey<NavigatorState>(),
    "Page2": GlobalKey<NavigatorState>(),
    "Page3": GlobalKey<NavigatorState>(),
  };

  int _selectedIndex = 0;

  void _selectTab(String tabItem, int index) {
    if (tabItem == _currentPage) {
      _navigatorKeys[tabItem].currentState.popUntil((route) => route.isFirst);
    } else {
      setState(() {
        _currentPage = pageKeys[index];
        _selectedIndex = index;
      });
    }
  }

@override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    final kConstant = 0.099;

    final String currentUserId = Provider.of<UserData>(context).currentUserId;

    return WillPopScope(
      onWillPop: () async {
        final isFirstRouteInCurrentTab =
            !await _navigatorKeys[_currentPage].currentState.maybePop();
        if (isFirstRouteInCurrentTab) {
          if (_currentPage != "Page1") {
            setState(() {
              _currentPage = pageKeys[0];
              _selectedIndex = 0;
            });
            return false;
          }
        }
        return isFirstRouteInCurrentTab;
      },
      child: Scaffold(
          body: Stack(
            children: <Widget>[
              _buildOffstageNavigator("Page1"),
              _buildOffstageNavigator("Page2"),
              _buildOffstageNavigator("Page3"),
            ],
          ),
          bottomNavigationBar: SizedBox(
            height: size.height * kConstant,
            child: BottomNavigationBar(
              onTap: (int index) {
                _selectTab(pageKeys[index], index);
              },
              elevation: 4,
              type: BottomNavigationBarType.fixed,
              currentIndex: _selectedIndex,
              showUnselectedLabels: true,
              items: [
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  label: 'Home',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.add),
                  label: 'Add',
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.perm_identity),
                  label: 'Profile',
                ),
              ],
            ),
          )),
    );
  }

  Widget _buildOffstageNavigator(String tabItem) {
    return Offstage(
      offstage: _currentPage != tabItem,
      child: TabNavigator(
        navigatorKey: _navigatorKeys[tabItem],
        tabItem: tabItem,
      ),
    );
  }
}

Kindly help me solve me this issues please.

Answer 1

The issue pertains to Navigator. If you have nested navigators then pushAndRemoveUntil won't do the job as it won't push the logout screen on the route or topmost navigator but on the child navigator, a screen for example. Hence you will have to explicitly pass down the route navigator while navigating to the logout screen like

Navigator.of(context, rootNavigator: true).pushReplacement(                          
MaterialPageRoute(builder: (context) => LogoutPage()));

This will pop any child navigator and will go to top screen.

Answer 2

Would you try to do again with below code?

Navigator.of(context).popUntil((route) => route.isFirst);