如何在颤动中正确填写必填字段之前使按钮处于非活动状态

Question

我想让一个特定的按钮处于非活动状态并使用不同的颜色，直到所有必填字段都正确填写为止，我还希望在文本字段下有一条消息，告诉用户如果没有正确填写该字段。这就是我现在所拥有的：[![这就是我现在所拥有的][1]][1]

但我想要这样的东西：

这是我的文本字段代码：

TextField(
                  // controller:
                  obscureText: false,
                  maxLines: null,
                  keyboardType: TextInputType.emailAddress,
                  decoration: InputDecoration(
                    border: const OutlineInputBorder(),
                    labelText: "Email Address",
                    labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
                    floatingLabelStyle:
                        TextStyle(color: Colors.black, fontSize: 20),
                    hintText: 'Email Address',
                    hintStyle: TextStyle(fontSize: 0.5),
                    isDense: true,
                    enabledBorder: OutlineInputBorder(
                      borderSide:
                          const BorderSide(width: 2.0, color: Colors.grey),
                      borderRadius: BorderRadius.circular(7),
                    ),
                    focusedBorder: OutlineInputBorder(
                        borderSide:
                            const BorderSide(color: Colors.green, width: 2.0),
                        borderRadius: BorderRadius.circular(7)),
                  ),
                  onChanged: (value) {
                    setState(() {
                      _email = value.trim();
                    });
                  },
                ),

这是我的按钮代码：

GestureDetector(
                  onTap: (() {}),
                  child: Container(
                    child: Center(
                      child: Padding(
                        padding: const EdgeInsets.all(20),
                        child: Text(
                          "Continue",
                          style: TextStyle(fontSize: 19, color: Colors.white),
                        ),
                      ),
                    ),
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(50),
                        color: Colors.green),
                  ),
                ),

Answer 1

创建状态 bool 来控制 onPressed 活动模式，并监听 Text Field 的变化并更新 bool。

late final TextEditingController controller = TextEditingController()
    ..addListener(() {
      // your logic
      if (controller.text == "asd") {
        isValid = true;
      } else {
        isValid = false;
      }

      setState(() {});
    });

  bool isValid = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          TextFormField(
            controller: controller,
          ),
          ElevatedButton(
              onPressed: isValid
                  ? () {
//your operation
                    }
                  : null,
              child: Text("login")),
        ],
      ),
    );
  }
}

Answer 2

添加一个bool类型变量...并检查textfield值是否有效，如示例bool值为真，buttoncolors是可更改和可点击的

TextField(
  // controller:
  obscureText: false,
  maxLines: null,
  keyboardType: TextInputType.emailAddress,
  decoration: InputDecoration(
    border: const OutlineInputBorder(),
    labelText: "Email Address",
    labelStyle: TextStyle(fontSize: 20, color: Colors.grey),
    floatingLabelStyle:
    TextStyle(color: Colors.black, fontSize: 20),
    hintText: 'Email Address',
    hintStyle: TextStyle(fontSize: 0.5),
    isDense: true,
    enabledBorder: OutlineInputBorder(
      borderSide:
      const BorderSide(width: 2.0, color: Colors.grey),
      borderRadius: BorderRadius.circular(7),
    ),
    focusedBorder: OutlineInputBorder(
        borderSide:
        const BorderSide(color: Colors.green, width: 2.0),
        borderRadius: BorderRadius.circular(7)),
  ),
  onChanged: (value) {
    if(value.length>6) {
      setState(() {
        enableButton = true;
      });
    }else {
      setState(() {
        enableButton = false;
      });
    }
  },
),
GestureDetector(
  onTap: (() {
    if(enableButton){
      //do what you want
    }
  }),
  child: Container(
    child: Center(
      child: Padding(
        padding: const EdgeInsets.all(20),
        child: Text(
          "Continue",
          style: TextStyle(fontSize: 19, color: Colors.white),
        ),
      ),
    ),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(50),
        color: enableButton ? Colors.green : Colors.grey
    ),
  ),
),

Answer 3

检查这个工作正常

   final emailController = TextEditingController();


  // email text field
   TextFormField(
                  controller: emailController,
                  decoration: InputDecoration(
                    labelText: "Name",
                    labelStyle: TextStyle(
                      color: Colors.lightGreen
                    ),
                    errorStyle: TextStyle(
                      color: Colors.black
                    ),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(5.0)
                    )
                  ),
                  validator: (value){
                    if(value == null || value == ''){
                      return "Enter name";
                    }
                  },
                ) 



// button
           GestureDetector(
              onTap: (() {
                if (emailController.text.toString().isNotEmpty) {
                  //todo
                } else {
                  print("please enter email");
                }
              }),
              child: Container(
                child: Center(
                  child: Padding(
                    padding: const EdgeInsets.all(20),
                    child: Text(
                      "Continue",
                      style: TextStyle(fontSize: 19, color:emailController.text.toString().isNotEmpty? Colors.green: Colors.grey),
                    ),
                  ),
                ),
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(50),
                    color: Colors.green),
              ),
            ),

Answer 4

使用 Form 验证字段。 onChanged 当其中一个字段发生变化时被调用，所以在那里设置状态。只要表单无效，就可以通过为 onPressed 设置 null 来禁用按钮。在 TextFormField 上使用 AutovalidateMode.always 以启用无需用户交互的验证。

class MyCustomFormState extends State<MyCustomForm> {
  final _formKey = GlobalKey<FormState>();
  bool _isValid = false;

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      onChanged: () {
        setState(() => _isValid = _formKey.currentState!.validate());
      },
      child: Column(
        children: [
          TextFormField(
            autofocus: true,
            autovalidateMode: AutovalidateMode.always,
            validator: (value) => (value == null || value.isEmpty)
                ? 'Error'
                : null,
          ),
          ElevatedButton(
            onPressed: _isValid ? () {} : null,
            child: const Text('Submit'),
          ),
        ],
      ),
    );
  }
}