AlertDialog 按钮在 Flutter 中不起作用

Question

我在警报对话框中有一个 TextFormField，该对话框应该仅在验证 TextFormField 值后关闭，或者在未提供输入的情况下显示错误消息。但是，就目前情况而言，无论我是否有输入，该按钮似乎都不起作用。补充一下，我打算在提供输入后按下“继续”后立即启动 Facebook 登录屏幕。有人可以告诉我我做错了什么吗？

                InkWell(
                    onTap: facebookSignIn,    //This is the method that facilitates Facebook Sign In
                    child: Container(
                      height: height * 0.06,
                      width: double.infinity,
                      margin: EdgeInsets.only(
                          top: height * 0.015, bottom: height * 0.025),
                      decoration: BoxDecoration(
                          color: Color.fromRGBO(66, 103, 178, 0.8),
                          borderRadius: BorderRadius.circular(28),
                          boxShadow: const [
                            BoxShadow(
                                color: Colors.black,
                                blurRadius: 20,
                                spreadRadius: 10,
                                offset: Offset(2, 1))
                          ]),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Image.asset('assets/images/facebook-letter-logo.png',
                              width: width * 0.03, height: height * 0.03),
                          SizedBox(width: width * 0.05),
                          Text('Login with Facebook',
                              textScaleFactor:
                                  MediaQuery.of(context).textScaleFactor * 1,
                              style: TextStyle(
                                  color: Colors.white,
                                  fontWeight: FontWeight.bold))
                        ],
                      ),
                    ),
                  ),

facebookSignIn 方法：

void facebookSignIn() async {
    showDialog(
        context: context,
        builder: (context) => AlertDialog(
              title: Text(
                'Please Enter Phone Number to Sign Up',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              content: Form(
                key: _fbKey,
                child: TextFormField(
                  decoration: InputDecoration(
                      label: Text('Phone Number'),
                      focusedBorder: InputBorder.none),
                  keyboardType: TextInputType.number,
                  validator: (phone) {
                    if (phone!.isEmpty) {
                      setState(() {
                        isValidated = true;
                      });
                      return 'Phone Number Required';
                    } else {
                      phoneNumber = phone;
                      return null;
                    }
                  },
                ),
              ),
              actions: [               //This the where the button triggers stuff
                TextButton(
                    onPressed: () async {
                      // !isValidated ? null : Navigator.of(context).pop();
                      if (!isValidated) {
                        return;
                      } else {
                        final result = await FacebookAuth.i
                            .login(permissions: ['public_profile', 'email']);
                        if (result.status == LoginStatus.success) {
                          final userData = await FacebookAuth.i.getUserData();
                          print(userData);
                        }
                      }
                    },
                    child: Text(
                      'Continue',
                      style: TextStyle(
                          color: Colors.red, fontWeight: FontWeight.bold),
                    ))
              ],
            ));
  }

Continue 按钮似乎没有正常工作。如有任何帮助，我们将不胜感激。

Answer 1

我们正在使用 Form 因此 FormState 可以处理验证过程。

在 validator

validator: (phone) {
  if (phone == null || phone.isEmpty) {
    return 'Phone Number Required';
  } else {
    return null;
  }
},

并在 TextButton、

上处理

onPressed: () async {
  final state = _fbKey.currentState;
  if (state == null) {
    debugPrint("You may have forgotten to add form key");
    return;
  }
  if (state.validate()) {
    //do validate stuff
  } else {
    /// else
  }
},

您可以查看有关 validate and submit the form 的更多信息。

AlertDialog 按钮在 Flutter 中不起作用

AlertDialog button doesn't function in Flutter

forms

validation

flutter

flutter-layout

flutter-alertdialog