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

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活动模式，并侦听 TextFile 上的更改并更新布尔值。

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

使用表单验证字段。 当其中一个字段更改时，将调用onChanged，因此请在此处设置状态。只要表单无效，就可以通过为onPressed设置 null 来禁用按钮。使用文本表单字段上的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'),
),
],
),
);
}
}