在flutter中写入时如何隐藏文本字段中的错误消息和错误边框

Question

I'm trying to add validation on textfield, i want when i leave any textfield empty it change its border color into red and display a error message, so and when i write something in it then it should hide the border error and message, which is happening but not in efficient way, here is what i'm doing.

i created the custom 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,
  ));
}

and calling it as like this

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

i'm using a bool type variable in errortext and changing its state in onchanged , so i want to do it in efficient way, like if i have 10 textfields so i have to initialize 10 bool variables so this is not a good way to go. please help how to achieve this in efficient way.

Answer 1

You can use the validator property in `TextField``

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

Then your code,

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

我从本教程中得到了答案。