0

Buenas tardes estoy creando un formulario el cual ya esta casi terminado. El plugin que estoy usando se llama validators. La cosa es que al validar los que hace el plugin es que cuando hay error, al input solo le cambia el borde de abajo a color rojo y yo quero que todos los bordes sean de color rojo.

Esta parte del codigo es donde mando a llamar el widget para los inputs

           InputForm(
              hintText: 'Motivo:',
              validator: (String value){
                if (value.isEmpty){
                  return 'Campo vacio';
                }
                return null;
              },
              onSaved: (String value) =>  widget.register.motivo = value,
              maxLines: 10,
            ),
            Container(
              padding: EdgeInsets.only(top:10),
              width: double.infinity,
              child: CustomButton(
                'Enviar', 
                CustomColors.green, 
                (context) {
                  if (_formkey.currentState.validate()) {
                    _formkey.currentState.save();
                    inspect(widget.register);
                  }
                }
              ),
            ),

La siguiente parte del codigo es donde creo el widget del input.

class InputForm extends StatefulWidget {
  final String hintText;
  final Function validator;
  final Function onSaved;
  bool isEnable = true;
  int maxLines;

  InputForm({Key key, this.hintText, this.validator, this.onSaved, this.isEnable, this.maxLines}) : super(key: key);
  @override
  _InputFormState createState() => _InputFormState();
}

class _InputFormState extends State<InputForm> {
  @override
  Widget build(BuildContext context) {
    print(widget.validator);
    final halfMediaWidth = MediaQuery.of(context).size.width / 1.05;
    return Container(
      alignment: Alignment.topCenter,
      width: halfMediaWidth,
      child: Padding(
        padding: EdgeInsets.all(8.0),
        child: TextFormField(
          decoration: InputDecoration(
            hintText: widget.hintText,
            contentPadding: EdgeInsets.all(15.0),
            filled: true,
            fillColor: Colors.grey[200],
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(width: 1, color: CustomColors.blue),
            ),
            disabledBorder: OutlineInputBorder(
              borderSide: BorderSide(width: 1, color: CustomColors.blue)
            )
          ),
          validator: widget.validator,
          onSaved: widget.onSaved,
          enabled: widget.isEnable,
          maxLines: widget.maxLines,
        ),
      ),
    );
  }
}

Este es el diseño del formulario el cual quiero que cuando hay error todo el borde del input que tenga error se marque en rojo

introducir la descripción de la imagen aquí

1 respuesta 1

1

En mi caso mientras el campo esté vació el borde estará en red

TextField(
keyboardType: TextInputType.number,

style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),

controller: _controllerCantidad,

textAlign: TextAlign.center,

decoration:

   InputDecoration(
           
            labelText:  "Cantidad total medicina",
            prefixIcon: Icon(Icons.post_add, color: Colors.blue),
            border:  OutlineInputBorder(
                borderSide: BorderSide(width: 2, color: Colors.blue),),
            enabledBorder: _controllerCantidad.text.isEmpty ?
                OutlineInputBorder(
                borderSide: BorderSide(width: 2, color: Colors.red),)
                : null,
            suffixIcon: _controllerCantidad.text.isEmpty 
            ? Container(width: 0,) 
            : CircleIconButton(
                onPressed: () {
                      _controllerCantidad.clear();
                },
            ),
     ),
   

);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.