firebase - 如何根据特定条件显示/隐藏按钮？

Question

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

我已经研究了 VISIBILITY 和 GONE，两者都可以。但是，我找不到任何与我要完成的目标相匹配的教程。

以下是我要完成的一些代码片段:

从原始帖子编辑:

在 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

我会选择这个:

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(),
          ],
        ),
      ),
    );
  }
}