Flutter Forms: Guía completa para crear y validar formularios

Los formularios son una parte esencial de cualquier aplicación móvil. Permiten a los usuarios ingresar información, enviar datos y realizar diversas acciones. En Flutter, la creación y validación de formularios es un proceso sencillo y eficiente, gracias a la amplia gama de widgets y herramientas que ofrece el framework.

En esta guía completa, exploraremos paso a paso cómo crear flutter forms desde cero, incluyendo la implementación de validaciones para garantizar la integridad de los datos ingresados por los usuarios. Aprenderás a construir formularios básicos, agregar campos de texto, botones, iconos y estilos, y a implementar validaciones robustas para evitar errores comunes.

Creando un Formulario Básico en Flutter

El primer paso para crear un flutter form es utilizar el widget Form. Este widget actúa como contenedor para los demás elementos del formulario, proporcionando la estructura básica para su funcionamiento.

«`dart
import ‘package:flutter/material.dart’;

class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State {
final _formKey = GlobalKey();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Form’),
),
body: Form(
key: _formKey,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
// Campos del formulario
],
),
),
),
);
}
}
«`

En el código anterior, se crea un widget Form con una clave _formKey. Esta clave es esencial para acceder al estado del formulario y controlar su comportamiento. El widget Padding se utiliza para agregar espacio alrededor de los campos del formulario.

Agregando Campos de Texto con TextFormField

Para agregar campos de texto a nuestro flutter form, utilizamos el widget TextFormField. Este widget proporciona una entrada de texto editable con características de validación y formato.

dart
TextFormField(
decoration: InputDecoration(
labelText: 'Nombre',
hintText: 'Ingresa tu nombre',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Por favor, ingresa tu nombre';
}
return null;
},
),


En el ejemplo, se crea un campo de texto llamado «Nombre» con un texto de ayuda «Ingresa tu nombre». El atributo validator se utiliza para definir la validación del campo. En este caso, se verifica si el campo está vacío y se muestra un mensaje de error si es necesario.

Agregando Botones y Iconos

Los botones son esenciales para enviar datos o realizar acciones en un formulario. El widget ElevatedButton se utiliza para crear botones con un estilo elevado.

dart
ElevatedButton(
onPressed: () {
if (_formKey.currentState!.validate()) {
// Enviar datos del formulario
}
},
child: Text('Enviar'),
),


En este ejemplo, el botón «Enviar» se activa al presionarlo. La validación del formulario se realiza con _formKey.currentState!.validate(). Si la validación es exitosa, se pueden enviar los datos del formulario.

Para agregar iconos, se puede utilizar el widget Icon dentro de la decoración del campo de texto.

dart
TextFormField(
decoration: InputDecoration(
labelText: 'Teléfono',
hintText: 'Ingresa tu número de teléfono',
prefixIcon: Icon(Icons.phone),
),
// ...
),


En este ejemplo, se agrega un icono de teléfono al inicio del campo de texto.

Estilos y Personalización de Formularios

Los flutter forms se pueden personalizar con estilos y diseños para mejorar su apariencia. Se pueden utilizar diferentes colores, fuentes, tamaños y formas para crear un formulario único.

dart
TextFormField(
decoration: InputDecoration(
labelText: 'Fecha de nacimiento',
hintText: 'Ingresa tu fecha de nacimiento',
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
// ...
),


En este ejemplo, se utiliza OutlineInputBorder para personalizar el borde del campo de texto con bordes redondeados.

Validación de Formularios en Flutter

La validación de formularios es crucial para garantizar la calidad de los datos ingresados por los usuarios. Se pueden implementar diferentes reglas de validación para verificar que los campos cumplan con los requisitos establecidos.

Validación de Campos Vacíos

Para validar si un campo está vacío, se utiliza el método validator() dentro del widget TextFormField.

dart
TextFormField(
decoration: InputDecoration(
labelText: 'Nombre',
hintText: 'Ingresa tu nombre',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Por favor, ingresa tu nombre';
}
return null;
},
),


En este ejemplo, se muestra un mensaje de error «Por favor, ingresa tu nombre» si el campo está vacío.

Validación de Formato

Se pueden utilizar expresiones regulares (RegExp) para validar el formato de los campos, como correos electrónicos, números de teléfono o fechas.

dart
TextFormField(
decoration: InputDecoration(
labelText: 'Correo electrónico',
hintText: 'Ingresa tu correo electrónico',
),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Por favor, ingresa tu correo electrónico';
}
if (!RegExp(r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:.[a-zA-Z0-9-]+)*$").hasMatch(value)) {
return 'Por favor, ingresa un correo electrónico válido';
}
return null;
},
),


En este ejemplo, se valida si el correo electrónico ingresado tiene un formato válido.

Ejemplo Completo de Flutter Form

Aquí se muestra un ejemplo completo de un flutter form con campos de nombre, teléfono, fecha de nacimiento y un botón de envío, que valida los campos y muestra un mensaje de error si es necesario.

«`dart
import ‘package:flutter/material.dart’;

class MyForm extends StatefulWidget {
@override
_MyFormState createState() => _MyFormState();
}

class _MyFormState extends State {
final _formKey = GlobalKey();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(‘Flutter Form’),
),
body: Form(
key: formKey,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
TextFormField(
decoration: InputDecoration(
labelText: ‘Nombre’,
hintText: ‘Ingresa tu nombre’,
),
validator: (value) {
if (value == null || value.isEmpty) {
return ‘Por favor, ingresa tu nombre’;
}
return null;
},
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: ‘Teléfono’,
hintText: ‘Ingresa tu número de teléfono’,
prefixIcon: Icon(Icons.phone),
),
validator: (value) {
if (value == null || value.isEmpty) {
return ‘Por favor, ingresa tu número de teléfono’;
}
return null;
},
),
SizedBox(height: 16.0),
TextFormField(
decoration: InputDecoration(
labelText: ‘Fecha de nacimiento’,
hintText: ‘Ingresa tu fecha de nacimiento’,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
validator: (value) {
if (value == null || value.isEmpty) {
return ‘Por favor, ingresa tu fecha de nacimiento’;
}
return null;
},
),
SizedBox(height: 32.0),
ElevatedButton(
onPressed: () {
if (formKey.currentState!.validate()) {
// Enviar datos del formulario
print(‘Formulario enviado correctamente’);
}
},
child: Text(‘Enviar’),
),
],
),
),
),
);
}
}
«`

En este ejemplo, se crea un flutter form con campos de nombre, teléfono, fecha de nacimiento y un botón de envío. Se valida cada campo y se muestra un mensaje de error si es necesario. Si la validación es exitosa, se muestra un mensaje de éxito.

Conclusión

Crear y validar flutter forms es un proceso sencillo y flexible gracias a las características de Flutter. Mediante el uso de widgets como Form, TextFormField, ElevatedButton e Icon, se pueden construir formularios completos con validaciones robustas. Se pueden personalizar los estilos y diseños para mejorar la experiencia del usuario.

Recuerda que la validación de formularios es esencial para garantizar la calidad de los datos y la integridad de tu aplicación. Implementa las reglas de validación adecuadas para evitar errores y garantizar un flujo de datos confiable.