I have a TextFormField inside an Alert Dialog which is supposed to close only after the TextFormField value has been validated or show an Error Message in case no input was provided. However, as things stand, the button doesn't seem to work at all regardless of whether I have input or not. Just to add, I intend to launch the Facebook Sign In Screen as soon as Continue is pressed after providing an input. Can someone tell me what I'm doing wrong?

                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 method:

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

The Continue button doesn't seem to work as it should. Any assistance would be appreciated.

CodePudding user response：

We are using Form therefor FormState can handle the validation process.

On validator

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

And process on 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
  }
},

You can check more about validate and submit the form.