首页 > 解决方案 > FutureBuilder 在 GestureDetector 的 OnTap() 中不起作用

问题描述

用户注册后,我希望调用我在 Firebase 的数据库以检查电子邮件是否唯一。如果不是,我希望向用户显示某种形式的错误消息。

但是,由于某种原因,我的 FutureBuilder 的构建方法根本没有被调用,并且submit()函数中的任何小部件都没有显示:

final usersRef = Firestore.instance.collection("users");

class _CreateAccountWithEmailState extends State<CreateAccountWithEmail> {
  Future<QuerySnapshot> existingUserWithEmail;

  emailExists(String email) {
    Future<QuerySnapshot> existingUserWithEmailFromDb =
        usersRef.where("email", isEqualTo: email).getDocuments();
    setState(() {
      existingUserWithEmail = existingUserWithEmailFromDb;
    });
  }


  Widget build(BuildContext context) {
    return Scaffold(
        appBar: header(context, titleText: "Complete your profile"),
        body: ListView(children: [
          ....
          Padding(
            padding: EdgeInsets.only(top: topPadding),
            child: Center(
              child: GestureDetector(
                onTap: () =>
                    {submit(context, context.read<UserSignupForm>().email)},
                child: Container(
                    height: 50.0,
                    width: 350.0,
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(7.0)),
                    child: Center(
                        child: Text(
                      "Save",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold),
                    ))),
              ),
            ),
          )
        ]));
  }

  Widget submit(BuildContext context, String email) {
    return FutureBuilder(
        future: emailExists(email),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Center(child: Text('Please wait its loading...'));
          } else {
            if (snapshot.hasError)
              return Center(child: Text('Error: ${snapshot.error}'));
            else
              return Center(
                  child: new Text(
                      'Test: ${snapshot.data}'));
          }
        });
  }
}

通过调试,我发现调用的是FutureBuilder中的future,而不是builder。请问有什么想法吗?

标签: flutterdart

解决方案


好的,所以基本上调用返回 FutureBuilder 的提交函数实际上是没有意义的,因为它的返回类型是 Widget。我实际上并不完全知道你想在这里完成什么。但是,如果用户已经存在电子邮件,这是一种向用户显示的解决方案。

final usersRef = Firestore.instance.collection("users");

class _CreateAccountWithEmailState extends State<CreateAccountWithEmail> {
  bool? userExistsAlready;
  bool isBusy = false;

  Future<void> emailExists(String email) {
    setState(() {
      isBusy = true;
    });
    final getDocs = await usersRef.where("email", isEqualTo: email).get();
    setState(() {
      userExistsAlready = getDocs.docs.isNotEmpty;
      isBusy = false;
    });
  }


  Widget build(BuildContext context) {
    return Scaffold(
        appBar: header(context, titleText: "Complete your profile"),
        body: ListView(children: [
          ....
          Padding(
            padding: EdgeInsets.only(top: topPadding),
            child: Center(
              child: isBusy 
             ? CircularProgressIndicator() 
             : GestureDetector(
                onTap: ()
                    => emailExists(context.read<UserSignupForm>().email),
                child: Container(
                    height: 50.0,
                    width: 350.0,
                    decoration: BoxDecoration(
                        color: Colors.blue,
                        borderRadius: BorderRadius.circular(7.0)),
                    child: Center(
                        child: Text(
                      "Save",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 15.0,
                          fontWeight: FontWeight.bold),
                    ),
                  )
                ),
              ),
            ),
          ),
          userExistsAlready == null ? SizedBox.shrink() :
          Text('User Exists Already: ${userExistsAlready}')
        ],
      ),
    );
  }

推荐阅读