Want to handle a different login navigation flow in flutter? 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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 |
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")), ], ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.