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:
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
nullsi 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:
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.
