How to handle a different login navigation flow in flutter?

Question

I am trying to setup a navigation when logged out (forgot password, signup/login) compared to when logged in (home, signout, lots of stuff).

I am at a complete loss as to how to do this. All the suggestions I see drop out one part of the system, a single page to show a login, but that doesn't work here. If I make the navigation shared then every page in the rest of the app would need a logged in check, which sounds a bit irritating. Is there an easy way to swap out the navigation setups? Add in navigation dynamically maybe based on the user logged in/out status?

Could I just subclass the navigation class itself and handle it that way maybe?

In react native you can do this by swapping out the navigator you are using between a logged in one and a logged out one. Looking for somerthing that has a similar outcome to that.

Answer 1

React-Native allows nesting navigators, but flutter doesn't. There are multiple ways of doing it though without nesting any navigators after all, a simple example of how it can be done with flutter is shown below.

Example:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

// Main Application
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Example',
      // Routes
      routes: <String, WidgetBuilder>{
        '/': (_) => new Login(), // Login Page
        '/home': (_) => new Home(), // Home Page
        '/signUp': (_) => new SignUp(), // The SignUp page
        '/forgotPassword': (_) => new ForgotPwd(), // Forgot Password Page
        '/screen1':(_) => new Screen1(), // Any View to be navigated from home
      },
    );
  }
}


// The login page 
class Login extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("Login Page"),

            // The button on pressed, logs-in the user to and shows Home Page
            new FlatButton(
                onPressed: () =>
                    Navigator.of(context).pushReplacementNamed("/home"),
                child: new Text("Login")),

            // Takes user to sign up page
            new FlatButton(
                onPressed: () => Navigator.of(context).pushNamed("/signUp"),
                child: new Text("SignUp")),

            // Takes user to forgot password page
            new FlatButton(
                onPressed: () =>
                    Navigator.of(context).pushNamed("/forgotPassword"),
                child: new Text("Forgot Password")),
          ],
        ),
      ),
    );
  }
}

// Home page
class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("Home Page"),

            // Logs out user instantly from home
            new FlatButton(
                onPressed: () => Navigator.of(context).pushReplacementNamed("/"),
                child: new Text("Logout")),

            // Takes user to Screen1
            new FlatButton(
                onPressed: () => Navigator.of(context).pushNamed("/screen1"),
                child: new Text("Screen 1")),
          ],
        ),
      ),
    );
  }
}

// Sign Up Page
class SignUp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("Sign Up Page"),

            // To make an api call with SignUp data and take back user to Login Page
            new FlatButton(
                onPressed: () {
                  //api call to sign up the user or whatever
                  Navigator.of(context).pop();
                },
                child: new Text("SignUp")),
          ],
        ),
      ),
    );
  }
}


// Forgot Password page
class ForgotPwd extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("Sign Up"),

            // Make api call to resend password and take user back to Login Page
            new FlatButton(
                onPressed: () {
                  //api call to reset password or whatever
                  Navigator.of(context).pop();
                },
                child: new Text("Resend Passcode")),
          ],
        ),
      ),
    );
  }
}


// Any Screen     
class Screen1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text("Screen 1"),

            // Takes the user to the view from which the user had navigated to this view
            new FlatButton(
                onPressed: () => Navigator.of(context).pop(),
                child: new Text("Back")),

            // Takes back the user to Home page and Logs out the user
            new FlatButton(
                onPressed: () async {
                  Navigator.of(context).popUntil(ModalRoute.withName("/home")); // Use popUntill if you want to reset all routes untill now and completely logout user
                  Navigator.of(context).pushReplacementNamed("/");
                  // Just to show login page and resume back after login
                  // Navigator.of(context).pushNamed('/Login');
                  // On login page after successful login Navigator.of(context).pop();
                  // the app will resume with its last route.
                },
                child: new Text("Logout")),
          ],
        ),
      ),
    );
  }
}

Note: I'm not saying this is the best approach, but the example shows one of the simple ways of doing it.

Hope that helps!

Answer 2

You can do this

import 'package:app/pages/home.page.dart';
import 'package:app/pages/login.page.dart';
import 'package:app/services/auth.service.dart';
import 'package:flutter/material.dart';

AuthService appAuth = new AuthService();

void main() async {

  // add this, and it should be the first line in main method
  WidgetsFlutterBinding.ensureInitialized();

  // Set default home.
  Widget _defaultHome = new LoginPage();

  // Get result of the login function.
  bool _result = await appAuth.login();
  if (_result) {
    _defaultHome = new HomePage();
  }

  // Run app!
  runApp(new MaterialApp(
    title: 'App',
    home: _defaultHome,
    routes: <String, WidgetBuilder>{
      // Set routes for using the Navigator.
      '/home': (BuildContext context) => new HomePage(),
      '/login': (BuildContext context) => new LoginPage()
    },
  ));
}

Detail Explanation here https://medium.com/@anilcan/how-to-use-dynamic-home-page-in-flutter-83080da07012