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 formulariobody
: 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:
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.
0 Comentarios