如何在颤振中在文本框上书写时隐藏错误信息和错误边框

Question

我试图在textfield上添加验证，我想当我留下任何文本字段为空时，它将其边框颜色更改为红色并显示错误消息，所以当我在其中写一些东西时，它应该隐藏边框错误和消息，这正在发生，但不是有效的方式，这就是我正在做的。

我创建了自定义文本字段

Widget textformfieldCustom(context,keyboardType,width,icon, controller,errortext,onchanged, hintText, labelText) {
return Container(
width: width,

child:TextFormField(
keyboardType:keyboardType,
decoration: InputDecoration(
contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
errorText:errortext,
labelText: labelText,
labelStyle:  GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
hintStyle: GoogleFonts.montserrat(),
hintText: hintText,
prefixIcon: icon,
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),borderSide: BorderSide(color: HexColor("#6610f2"))),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.red, width: 1))),
onSaved: (String? value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
onChanged:onchanged,
controller: controller,
));
}

并像这样调用

bool _validatetex = false;
textformfieldCustom(
context, 
TextInputType.number,
MediaQuery.of(context).size.width * 0.9,
Icon(Icons.email,color: iconColor,),
phoneNoController,
_validatetex ? 'This is the required field' : null,
(value) {
setState(() {
phoneNoController.text.isEmpty ? _validatetex = true : _validatetex = false;
});
},
'Enter your phone number',
'Phone number'
),

我在errortext中使用bool类型变量，并在onchanged中改变其状态，所以我想以有效的方式做到这一点，就像我有10个文本字段一样，所以我必须初始化10个bool变量，所以这不是一个好方法。请告诉我如何有效地做到这一点。

Answer 1

您可以在' TextField ' '中使用validator属性

validator: (value) {
if (value == null || value.isEmpty) {
return 'This is the required field';
}
return null;
},

然后你的代码，

Widget textformfieldCustom(context,keyboardType,width,icon, controller,errortext,onchanged, hintText, labelText) {
return Container(
width: width,

child:TextFormField(
keyboardType:keyboardType,
decoration: InputDecoration(
contentPadding:EdgeInsets.symmetric(vertical: 20.0, horizontal: 10.0),
labelText: labelText,
labelStyle:  GoogleFonts.montserrat(color: HexColor("#6e6b7b")),
hintStyle: GoogleFonts.montserrat(),
hintText: hintText,
prefixIcon: icon,
focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(10.0)),borderSide: BorderSide(color: HexColor("#6610f2"))),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0))),
errorBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide(color: Colors.red, width: 1))),
onSaved: (String? value) {
// This optional block of code can be used to run
// code when the user saves the form.
},
onChanged: onchanged,
controller: controller,
// Validator
validator: (value) {
if (value == null || value.isEmpty) {
return 'This is the required field';
}
return null;
},
));
}

Answer 2

我从这个教程中得到了答案。