我试图在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变量,所以这不是一个好方法。请告诉我如何有效地做到这一点。
您可以在' 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;
},
));
}
我从这个教程中得到了答案。