如何在Flutter中处理不同的登录导航流程?

Dav*_*ett 5 flutter

与登录时(家庭,注销,很多东西)相比,我尝试设置注销(忘记密码,注册/登录)时的导航。

我完全不知道该怎么做。我看到的所有建议都退出了系统的一部分,只显示了一个登录页面,但这在这里不起作用。如果我共享导航,则应用程序其余部分中的每个页面都需要登录检查,这听起来有些烦人。有没有简单的方法可以换掉导航设置?动态添加导航可能基于用户已登录/退出状态?

我可以将导航类本身子类化,然后以这种方式进行处理吗?

在react native中,您可以通过在登录的和退出的导航器之间交换使用的导航器来执行此操作。寻找具有类似结果的东西。

Hem*_*Raj 8

React-Native 允许嵌套导航器,但 flutter 不允许。尽管毕竟没有嵌套任何导航器,但有多种方法可以做到这一点,下面显示了如何使用 flutter 完成的简单示例。

例子:

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")),
          ],
        ),
      ),
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

注意:我并不是说这是最好的方法,但该示例显示了一种简单的方法。

希望有帮助!

  • 一大堆没有解释的代码并没有多大帮助。 (6认同)