Flutter: Move to a new screen without providing navigate back to previous screen

80
votes

I'm implementing an authentication flow in my Flutter app.

After a sign in attempt, the CheckAuth (which checks whether a user is signed in or not and then opens home screen or sign up screen accordingly) is opened with this code: 

  void _signIn() async {
    await _auth
        .signInWithEmailAndPassword(
            email: _userEmail.trim(), password: _userPassword.trim())
        .then((task) {
      // go to home screen
      if (task.getIdToken() != null) {
        setState(() {
          Navigator.pushReplacement(
              context,
              new MaterialPageRoute(
                  builder: (BuildContext context) => new CheckAuth()));
        });
      } else {
        print("Authentication failed");
      }
    });
  }

Problem: I can successfully sign in to the app, but if I tap back button after I sign in, it goes back to the sign in screen (while I expect it to exit from the app).

Question: How to move from one screen to another in Flutter without the way back?

Do I need to somehow delete the navigator history? Or don't use navigator at all? I tried Navigator.replace method, but it didn't seem to work.

9
flutternavigationscreennavigator
Is the sign-in screen the default route in your app? – Günter Zöchbauer
Navigator.pushReplacement() is working perfectly at my end. Can you please share the full code? – Dhrumil Shah - dhuma1981
@GünterZöchbauer no, the default route is CheckAuth. The problem was that I had sign up screen where I had a button that pushed the sign in screen with Navigator.push. So when a user signed in and navigated back, he got back to the sign up screen. I replaced the Navigator.push with Navigator.pushReplacement, and now it works fine. Thanks! – Darkhan
@dhuma1981 yes, you are right, .pushReplacement() works fine. The problem was that I had sign up screen where I had a button that pushed the sign in screen with Navigator.push. So when a user signed in and navigated back, he got back to the sign up screen. I replaced the Navigator.push with Navigator.pushReplacement, and now it works fine. Thanks! – Darkhan
Navigator.pushReplacement( context, MaterialPageRoute( builder: (context) => HomeScreen(), ), ); Navigator.pushReplacement() is NOT working. HomeScreen is still showing back arrow icon after redirecting from current screen to HomeScreen. any other solution? Please share. – Kamlesh

9 Answers

141
votes

You need to use Navigator.pushReplacement when leaving the auth screen too. Not just when redirecting to login page.

73
votes

You can use the pushAndRemoveUntil method:

Push the given route onto the navigator that most tightly encloses the given context, and then remove all the previous routes until the predicate returns true. To remove all the routes below the pushed route, use a [RoutePredicate] that always returns false (e.g. (Route<dynamic> route) => false).

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => MainPage()),
  (Route<dynamic> route) => false,
);
14
votes

You need to use

Navigator
    .of(_context)
    .pushReplacement(new MaterialPageRoute(builder: (BuildContext context) => page));

Where _context is object of BuildContext And page is which page you directed to.

2
votes

Use below code whenever you want to push and remove the Back Arrow

onPressed: () {
          Navigator.pushAndRemoveUntil(
            context,
            MaterialPageRoute(builder: (context) => PathName()),
            (Route<dynamic> route) => false,
          );
},
1
votes

We can use routes for the same Like: 

routes: {

        LoginScreen.route_name: (_) => LoginScreen(),
        .....
      },

And use below code whenever you want to push and remove the backstack

Navigator.of(context).pushReplacementNamed(LoginScreen.route_name);

Note: Define static String inside widget LoginScreen

0
votes

I think you probably have already solved this. But you can set "automaticallyLeadingImplied: false" in the AppBar of the Scaffold you are navigating to.

0
votes

I have resolved this by popping from current page and showing new page:

Navigator.pop(context);
Navigator.of(context).pushReplacement(MaterialPageRoute(builder: (context) => newPage));
0
votes

if you are working with Getx state managemaent then you can try this

Get.of(()=> NewPage());
-1
votes

Just simply add the below code:

Navigator.of(context).pushNamedAndRemoveUntil('/routeName', (route) => false);