CODEWITHSUNDEEP
flutter
Daibaku
Daibaku

Reputation: 12566

Flutter how to remove bottom navigation with navigation

I want to remove all stacked routes and go back to the Auth page. My home page is like this.

class _HomeScreenState extends State<HomeScreen> {
      final List<StatelessWidget> pages = [
        new Page1(),
        new Page2(),
        new Page3(),
        new Page3(),
      ];        

      @override
      Widget build(BuildContext context) {
        return new WillPopScope(
          onWillPop: () async {
            await Future<bool>.value(true);
          },
          child: new CupertinoTabScaffold(
            tabBar: new CupertinoTabBar(
              activeColor: Colors.blue,
              inactiveColor: Colors.grey,
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_one),
                  title: Text('Page1'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_two),
                  title: Text('Page2'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_3),
                  title: Text('Page3'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.looks_4),
                  title: Text('Page4'),
                ),
              ],
            ),
            tabBuilder: (BuildContext context, int index) {
              return new DefaultTextStyle(
                style: const TextStyle(
                  fontFamily: '.SF UI Text',
                  fontSize: 17.0,
                  color: CupertinoColors.black,
                ),
                child: new CupertinoTabView(
                  builder: (BuildContext context) {
                    return pages[index];
                  },
                ),
              );
            },
          ),
        );
      }
    }

And I want to remove CupertinoTabBar when user logout. I tried like this.

Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => new AtuhScreen()));

It went to the screen correctly but bottom navigation is still visible.
How can I remove bottom navigation correctly?

Upvotes: 4

Views: 9462

Answers (3)

Saurabh Kumar
Saurabh Kumar

Reputation: 2763

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 navigator.

Upvotes: 1

Frank Vu
Frank Vu

Reputation: 1363

The code 

Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => new AtuhScreen()));

will be fixed by:

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

The rootNavigator: true will get the highest root widget Scaffold or MaterialApp and avoid displaying the BottomNavigationBar.

Upvotes: 23

anmol.majhail
anmol.majhail

Reputation: 51176

As You are using FireBase_auth: Then you can Use StreamBuilder to handle the Sign & Sign out Process. E.g:

final FirebaseAuth _auth = FirebaseAuth.instance;
void main() {
  runApp(MaterialApp(
    //home: MyLoginPage(),
    home: StreamBuilder(
        stream: _auth.onAuthStateChanged,
        builder: (context, snap) {
          if (snap.connectionState == ConnectionState.waiting) {
            return SplashScreen();
          } else {
            if (snap.hasData) {
              return HomeScreen(
                user: snap.data,
                signOut: signOut,
              );
            }
            return MyLoginPage();
          }
        }),
    theme: ThemeData(
        primarySwatch: Colors.blue,
        accentColor: Colors.blue),
  ));
}

void signOut() async {
  await _auth.signOut();
}

Then you can simply Call SignOut() from any of Page Screen & you Will get a new Screen As here in example is MyLoginPage(). Like:

class Page3 extends StatelessWidget {
  final Function signOut;

  Page3(this.signOut);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third'),
      ),
      body: Center(child: RaisedButton(onPressed: ()=> signOut,child: Text("Sign-Out"),),),
    );
  }
}

Upvotes: 1

Related Questions