Question

我正在尝试弄清楚如果用户已登录或注销，如何隐藏我的登录/注册按钮。

我已经研究了“可视性”和“消失”，任何一个都可以使用。但是，我找不到与我要完成的课程匹配的任何教程。

以下是我要完成的代码片段：

根据原始帖子进行编辑：

在authentication.dart中（仅功能）：

loginUser(context) async {
  formkey.currentState.save();
  if (formkey.currentState.validate()) {
    await _auth
        .signInWithEmailAndPassword(email: _email, password: _password)
        .catchError((e) {
          home.changeState(null);
      Fluttertoast.showToast(
          msg: "Invalid email and/or password. Please try again",
          toastLength: Toast.LENGTH_LONG,
          gravity: ToastGravity.TOP,
          timeInSecForIos: 5,
          backgroundColor: Colors.red,
          textColor: Colors.white,
          fontSize: 16.0
      );
    }).then((newUser) {
      var now = new DateTime.now();
      Firestore.instance
          .collection('users')
          .document(newUser.uid)
          .collection('userInfo')
          .document('userInfo')
          .setData({
        'Last login': now,
      }).catchError((e) {
        Fluttertoast.showToast(
            msg: "Update user failed: $e",
            toastLength: Toast.LENGTH_LONG,
            gravity: ToastGravity.TOP,
            timeInSecForIos: 1,
            backgroundColor: Colors.red,
            textColor: Colors.white,
            fontSize: 16.0
        );
      });
      welcomeUser();
      Navigator.of(context).pop();
    });
  }
  final user = await getSignedInUser();
  home.changeState(user);
}

getSignedInUser() async {

  mCurrentUser = await FirebaseAuth.instance.currentUser();
  if(mCurrentUser == null || mCurrentUser.isAnonymous){
    return null;
  }
  else{
    return mCurrentUser;
  }
}

signOutUser () async{
  await _auth.signOut();
  final user = await getSignedInUser();
  home.changeState(user);
}



HomeScreen home; //create instance of homescreen class, so I could call my function

在loginScreen（用于创建登录按钮的部分）中：

Expanded(
    child: OutlineButton(
       child: Text("Login "),
       onPressed: () =>
               loginUser(context)),
               flex: 1,
         ),

homeScreen类（忽略的无关功能）：

class HomeScreen extends State<MyApp> {
  FirebaseUser currentUser; //not sure what to initialize this to upon loading app because user might still be signed in.
  final formkey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
          resizeToAvoidBottomPadding: false,
          appBar: AppBar(title: Text("HikeLocator"), backgroundColor: Colors.green[700],
          ),
          body: Container(
              margin: EdgeInsets.all(20.0),
              child: Form(
                key: formkey,
                child:
                Column(
                  children: <Widget>[
                    distanceFromUser(),
                    lengthOfTrail(),
                    numOfResults(),
                    Container(
                      margin: EdgeInsets.only(top: 25.0),
                    ),
                    submitButton(),
                   // loginButton(),
                    //signupButton(),
                    //logoutButton(),
                    //profile(),
                  ] + (currentUser == null ? [
                    loginButton(),
                    signupButton(),
                  ] : [ // logged in? show the following widgets
                  logoutButton(),
                  profile(),
                ]),
                ),
              )
          ),
      ),
    );
  }


  Widget loginButton() {
    return RaisedButton(
      color: Color.fromRGBO(58, 66, 86, 1.0),
      child: Text("Log In", style: TextStyle(color: Colors.white)),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => LogInScreen()),
        );
      },
    );
  }



  Widget logoutButton(){
      return RaisedButton(
        color: Color.fromRGBO(58, 66, 86, 1.0),
        child: Text("Log Out", style: TextStyle(color: Colors.white)),
        onPressed: () async {
          await signOutUser();
        }
      );
  }
  Widget signupButton() {
    return RaisedButton(
      color: Color.fromRGBO(58, 66, 86, 1.0),
      child: Text("Sign Up", style: TextStyle(color: Colors.white)),
      onPressed: () {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => SignUpScreen()),
        );
      },
    );
  }
  changeState(value){
    setState(() {
      this.currentUser = value;
    });
  }
}

我写了一个叫做getSignedInUser（）的函数。如果没有，则返回null。我是新来的。上面在注释中指定的内容显示了在某些情况下应该可见的按钮。感谢您的帮助。

Answer 1

我将通过添加三元条件将其集成到您现有的代码中：

children: [
  distanceFromUser(),
  lengthOfTrail(),
  numOfResults(),
  Container(margin: EdgeInsets.only(top: 25.0)),
  submitButton(),
] + (getSignedInUser() == null ? [] : [ // logged in? show the following widgets
  loginButton(),
  signupButton(),
  logoutButton(),
  profile(),
])

Answer 2

我会这样：

Widget loginButton() {
  return getSignedInUser() == null
      ? RaisedButton(
          color: Color.fromRGBO(58, 66, 86, 1.0),
          child: Text("Log In", style: TextStyle(color: Colors.white)),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => LogInScreen()),
            );
          },
        )
      : Container();
}

如果用户已登录，请返回一个空容器，否则，请返回登录按钮。您可以在其他返回小部件的函数中执行相同的操作。

您还可以将登录按钮包装在Opacity小部件中，并将opacity设置为0.0以使其隐藏，但仍会占用空间。

更新：我准备了以下示例来演示简单的登录页面。 getUser函数模拟一个用于验证用户身份并在登录成功后返回用户名（两秒钟后）的函数。

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  @override
  LoginPageState createState() {
    return new LoginPageState();
  }
}

class LoginPageState extends State<LoginPage> {
  String user;

  Future<String> getUser() {
    return Future.delayed(
      Duration(seconds: 2),
      () {
        return "john";
      },
    );
  }

  void login() async {
    final user = await getUser();
    setState(() {
      this.user = user;
    });
  }

  void logout() {
    setState(() {
      this.user = null;
    });
  }

  Widget _buildLoginButton() {
    return user == null
        ? RaisedButton(
            onPressed: login,
            child: Text("Login"),
          )
        : Container();
  }

  Widget _buildLogoutButton() {
    return (user != null)
        ? RaisedButton(
            onPressed: logout,
            child: Text("Logout"),
          )
        : Container();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Login"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _buildLoginButton(),
            _buildLogoutButton(),
          ],
        ),
      ),
    );
  }
}

Answer 3

好的，我找到了解决方法。将我的登录页面作为登录名，并带有一个以访客身份继续的按钮。当我单击登录时，它带我回到主屏幕，但我将一个值发送给构造函数，即为1。如果我单击来宾身份继续，它将发送值0。然后检查该值是否为0或1以确定是否我应该呈现小部件。我在处理Formkey和页面路由时遇到另一个问题，但是我将在此发布一个单独的问题。谢谢您的帮助

如何根据拍打中的特定条件显示/隐藏按钮？

3 个答案: