Как показать / скрыть кнопки на основе определенных условий в флаттере?

Question

Я пытаюсь выяснить, как скрыть кнопки входа в систему / регистрации, если пользователь вошел в систему или вышел из нее.

Я смотрел в VISIBILITY и GONE, любой из них будет работать. Тем не менее, я не могу найти учебники, которые соответствуют тому, что я пытаюсь выполнить.

Вот некоторые фрагменты кода для того, что я пытаюсь выполнить:

Редактировать из оригинального сообщения:

В authentic.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 (). Если его нет, возвращается ноль. Я новичок, чтобы трепетать. Указанные выше в комментариях показывают кнопки, которые должны быть видны в определенных случаях. Спасибо за любую помощь.

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

Answer 2

Хорошо, я нашел обходной путь.Получите мою целевую страницу в качестве логина с кнопкой «Продолжить как гость».Когда я нажимаю кнопку входа, он возвращает меня на домашний экран, но я отправляю значение в конструктор как 1. Если я нажимаю продолжить как гость, он отправляет значение 0. Затем я проверяю, является ли это значение 0 или 1, чтобы определить, если ядолжен сделать виджеты.У меня есть еще одна проблема, касающаяся форм-ключей и маршрутов страниц, но я опубликую отдельный вопрос по этому вопросу.Спасибо за вашу помощь, ребята

Answer 3

Я бы просто интегрировал его в существующий код, добавив троичное условие:

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