如何检查文本字段是否已填充然后更改按钮的颜色？

Question

需要代码方面的帮助。我有一个注册页面，当有一个空白字段（用户未填写）时我正在检查 - 按钮没有触发。但是我也想做当有一个非空字段时，按钮的颜色是灰色的，但是当所有字段都被填充时，按钮的颜色变成紫色。我尝试这样做（使用 isButtonEnabled）但是当所有字段都被填充时按钮本身不会改变颜色。说说这个功能如何实现，当字段全部非空时，按钮颜色为紫色，字段为空时-灰色？

控制器

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

按钮

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,
                                      ),

Answer 1

如果您使用的是 TextField 或 TextFormField，我认为您需要使用 onChanged 属性.

当它改变时，检查字符串是否为空，或者您可以根据它进行更改。

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

Answer 2

您确实应该使用 onChanged 属性。但是，要确保涵盖多个用例还需要更多时间。

用例：用户从 TextField 中删除文本。操作：按钮应再次变为灰色。

为每个需要在按钮变为紫色之前填充的 TextField 创建一个布尔值。

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

在每个 TextField 小部件中，您都有以下 onChanged：

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

如何检查文本字段是否已填充然后更改按钮的颜色？

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

flutter

dart