Validación de formularios en Flutter

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:

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:

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:

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:

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