How to get rid of tabs in a tabbed application on user logout?

Question

I have built a tabbed application with two tabs. The second tab has "Logout" option. On click of log out, the user must be taken to the login page. I am getting the login page here, but the problem is that I am also getting the two tabs at the bottom. Kindly help as I am new to flutter app development.

Below is the way I have built the tabs,

List<Widget> _children = [
    Test1(), //this is the first tab 
    Test2(), //this is the second tab that has logout option
  ];

    home: DefaultTabController(
            length: 2,
            child: Scaffold(
              bottomNavigationBar: BottomNavigationBar(
                onTap: onTabTapped, 
                currentIndex: _currentIndex, 
                items: [
                  BottomNavigationBarItem(
                    icon: new Icon(CustomIcons.home),
                    title: new Text(''),
                  ),
                  BottomNavigationBarItem(
                    icon: new Icon(CustomIcons.profile),
                    title: new Text(''),
                  ),
                ],
              ),
              body: _children[_currentIndex],
            ),
          ),

Below is the code called on logout,

Navigator.of(context).pushNamedAndRemoveUntil('/login', (Route<dynamic> route) => false);

On log out, I am getting the login page but the tabs are also visible. Even the Navigator.pop(context) is giving me the same result. How do I pop the tabs? Please let me know...

depends of the rest of your code, but if you `pop` the page with the tabs, this should bring you bring you back to the initial login screen which has to tabs, if I understand correctly. All consecutive pages are stacked on top of one another. `pop` removes the top one and leaves the one below — w461, Jan 11 '21 at 13:24
No the login screen does not have tabs. It just has two textfields(username & password). On successful login user is taken to the home screen(this has two tabs). In one of the tab there is logout option.. On click of logout user is taken to login screen but the issue here is the tabs at the bottom is also appearing in the login screen which I do not want. — Guest, Jan 12 '21 at 06:29
this is want I meant. I would try to pop the pages with tabs. - Just seeing I had a type "back to the initial login screen which has to tabs, " should be "back to the initial login screen which has no tabs, " — w461, Jan 12 '21 at 07:16

score 0 · Answer 1 · answered Jan 13 '21 at 17:29

Try like this,update the body as your requirement

return MaterialApp(
    home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            iconTheme: IconThemeData(color: kTextColor,size: 10),
            title: Text('Client Information',style: TextStyle(fontFamily: 'Poppins-regular',color: kTextColor),),
            backgroundColor: kPrimaryLightColor,
            bottom: TabBar(
              labelColor: kTextColor,
                tabs: [
                  Tab(text: 'Job Details',),
                  Tab(text: 'Client Information',)
                ]),
          ),
          drawer: FreelancerAppDrawer(),
          body: TabBarView(children: [
            JobDetails(),
            ClientInfo()
          ]),
        ))
);

I used this code. But getting the same issue.. On logout the tabs are not disappearing. — Guest, Jan 18 '21 at 05:45

How to get rid of tabs in a tabbed application on user logout?

1 Answers1