How to check if the text fields are filled then change the color of the button?-CodePudding

Need help with code. I have a registration page and I'm doing a check when there is an empty field (not filled in by the user) - the button doesn't fire. But I also want to do when there is one non-empty field, then the color of the button is gray, but when all the fields are filled, the color of the button is changed to purple. I tried to do this (use isButtonEnabled) but the button itself does not change color when all the fields are filled. Tell me how to implement this function so that it is controlled when the fields are all non-empty, the color of the button is purple, and when the fields are empty - gray?

contollers

EmailSignUpWidget(
   size: size * 0.42,
   nameEditingController: _nameEditingControllerReg,
   passwordEditingController: _passwordEditingControllerReg,
   emailEditingController: _emailEditingControllerReg,
  )

button

DefaultButtonGlow(
                                        text: isSignUp ? 'Sign Up' : 'Next',
                                        color: isButtonEnabled ? constants.Colors.purpleMain : constants.Colors.grey,
                                        onPressed: () async {
                                          if ((_nameEditingControllerReg.text
                                                      .trim() !=
                                                  "") &&
                                              (_passwordEditingControllerReg
                                                      .text
                                                      .trim() !=
                                                  "") &&
                                              (_emailEditingControllerReg.text
                                                      .trim() !=
                                                  "")) {
                                            _onTap(unauthUserCubit, tokenCubit);
                                            isButtonEnabled = true;
                                          } else {
                                            isButtonEnabled = false;
                                          }
                                        },
                                        shadowColor:
                                            constants.Colors.purpleMain,
                                        textStyle: constants
                                            .Styles.normalHeavyTextStyleWhite,
                                      ),

CodePudding user response：

If you are using TextField or TextFormField, I think you need to use onChanged property.

when it changes, check string is empty or you can put changes based on that.

TextField(
controller: textEditController,
onChanged: (content) {
 
  },
)

CodePudding user response：

You indeed should use the onChanged property. However, it takes a bit more to make sure several use cases are covered.

Use case: User removes text from the TextField. Action: button should become gray again.

Create a boolean for each TextField that is required to be filled before button becomes purple.

bool textField1Filled = false;
bool textField2Filled = false;
bool textField3Filled = false;

In each TextField widget you have the following onChanged:

onChanged: (content) {
    if (content != "") {
        textField1Filled = true;
        if (textField1Filled && textField2Filled && textField3Filled) {
            setState((){isButtonEnabled = true;});
            }
        } else {
            textField1Filled = true;
            setState((){isButtonEnabled = true;});
        }
  },
)