Validación de formularios en Flutter

Dejar un comentario / Flutter / Por

Hoy vamos a ver cómo validar formularios en Flutter usando el Widget Form, agregando una clave para identificarlo, colocando varios TextFormField dentro del Form y finalmente definiendo la función de validación.

Al final tendremos un formulario con el cual podremos comprobar si los datos son válidos o no, y a partir de ello realizar determinada acción.

Voy a dejar un ejemplo de código en Dart al final del post para que puedas guiarte del mismo.

Agregando un Form

Un Form es un Widget más dentro de Flutter. Tiene dos cosas:

  • key: la clave que identifica al formulario
  • body: el cuerpo, que puede ser cualquier conjunto de Widgets. Dentro del cuerpo deben estar los campos de texto.

Por lo tanto comenzamos definiendo una clave dentro de nuestra clase. Es una simple variable:

final _claveFormulario = GlobalKey<FormState>();

Y después creamos el formulario. En mi caso es el body de mi Scaffold:

body: Form(
  key: _claveFormulario,
  child: /*Aquí agregar todos los hijos*/
  )

 

El TextFormField

Un TextFormField es el que permite la validación, pues definimos la función validator dentro del mismo. Después, al validar el formulario se invocará a esa función.

Tenemos un ejemplo del campo de texto a continuación:

TextFormField(
  validator: (value) {
    if (value.isEmpty) {
      return 'Escribe el código de barras';
    }
    return null;
  },
  decoration: InputDecoration(
    hintText: 'Escribe el código',
    labelText: "Código de barras",
  ),
),

La función validator recibirá el valor actual del campo, y nosotros debemos:

  • Regresar null si el dato es correcto
  • Regresar una cadena si el dato no es correcto. Dicha cadena se mostrará bajo el campo de texto en caso de que no pase la validación.

Realizando la validación

La validación no se hace automáticamente, nosotros debemos invocarla. Podríamos invocarla dentro de un botón, por ejemplo.

Lo importante es invocar a _claveFormulario.currentState.validate() mismo que devolverá true o false.

En este caso _claveFormulario es mi clave de formulario, en tu caso puede cambiar. Ese método invocará a la función validator de cada TextFormField y mostrará los errores correspondientes si existen, además de devolver true o false.

Ejemplo completo

Voy a dejar un ejemplo completo del formulario solo como referencia; no lo copies y pegues pues probablemente no funcionará.

Dentro de mi formulario, además, tengo el botón que desencadena la validación y hace toda la lógica:

class AgregarProductoState extends State<AgregarProducto> {
  final _claveFormulario = GlobalKey<FormState>();
  final TextEditingController _codigoBarras = TextEditingController();
  final TextEditingController _descripcion = TextEditingController();
  final TextEditingController _precioCompra = TextEditingController();
  final TextEditingController _precioVenta = TextEditingController();
  final TextEditingController _existencia = TextEditingController();

  AgregarProductoState({Key key}) : super();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Agregar producto"),
      ),
      body: Form(
        key: _claveFormulario,
        child: ListView(shrinkWrap: true, children: <Widget>[
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextFormField(
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Escribe el código de barras';
                }
                return null;
              },
              controller: _codigoBarras,
              decoration: InputDecoration(
                hintText: 'Escribe el código',
                labelText: "Código de barras",
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextFormField(
              validator: (value) {
                if (value.isEmpty) {
                  return 'Escribe la descripción';
                }
                return null;
              },
              controller: _descripcion,
              decoration: InputDecoration(
                hintText: 'Escribe la descripción',
                labelText: "Descripción",
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextFormField(
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Escribe el precio de compra';
                }
                return null;
              },
              controller: _precioCompra,
              decoration: InputDecoration(
                hintText: 'Escribe el precio de compra',
                labelText: "Precio de compra",
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextFormField(
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Escribe el precio de venta';
                }
                return null;
              },
              controller: _precioVenta,
              decoration: InputDecoration(
                hintText: 'Escribe el precio de venta',
                labelText: "Precio de venta",
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: TextFormField(
              keyboardType: TextInputType.number,
              validator: (value) {
                if (value.isEmpty) {
                  return 'Escribe la existencia';
                }
                return null;
              },
              controller: _existencia,
              decoration: InputDecoration(
                hintText: 'Escribe la existencia',
                labelText: "Existencia",
              ),
            ),
          ),
          Padding(
            padding: EdgeInsets.all(16.0),
            child: Builder(
              builder: (context) => RaisedButton(
                color: Colors.blue,
                textColor: Colors.white,
                child: cargando
                    ? CircularProgressIndicator(
                        valueColor: AlwaysStoppedAnimation<Color>(Colors.white),
                      )
                    : Text("Guardar"),
                onPressed: () async {
                  if (!_claveFormulario.currentState.validate()) {
                    return;
                  }
                  // Aquí el formulario ya está validado. Haz lo que tengas que hacer (;
                },
              ),
            ),
          ),
        ]),
      ),
    );
  }
}

Nota: los textcontroller son solo para obtener el valor del TextFormField; no son obligatorios.

En caso de que alguna validación no sea correcta, se muestran los errores:

Validar formularios en Flutter

Otro ejemplo de validación

Si tienes dudas de cómo funciona la función validator te muestro otro ejemplo en donde, si el nombre no es “Luis” ni “Pedro” se devuelve un error.

Esto muestra cómo puedes validar varios aspectos del valor dentro de la misma función:

validator: (value) {
  if (value != 'Luis') {
    return 'El nombre debe ser Luis o Pedro';
  }
  
  if (value != 'Pedro') {
    return 'El nombre debe ser Luis o Pedro';
  }
  // Aquí más validaciones...
  //..
  
  
  // Si no se invoca a return antes y llegamos hasta acá, entonces la validación es correcta
  return null;
},

Y de este modo puedes realizar la validación de tus formularios y campos de texto cuando desarrollas con Flutter y Dart.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *