Formulario con validación en Flutter: ejercicio resuelto
Si necesitas formulario con validación en Flutter, este ejemplo te ayuda a validar email y password antes de enviar.
Enunciado
Construye un formulario con:
- campo email,
- campo password,
- validaciones,
- botón enviar con feedback.
Solución en Flutter
import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: LoginFormPage()));
class LoginFormPage extends StatefulWidget {
const LoginFormPage({super.key});
@override
State<LoginFormPage> createState() => _LoginFormPageState();
}
class _LoginFormPageState extends State<LoginFormPage> {
final _formKey = GlobalKey<FormState>();
final _emailCtrl = TextEditingController();
final _passCtrl = TextEditingController();
@override
void dispose() {
_emailCtrl.dispose();
_passCtrl.dispose();
super.dispose();
}
void submit() {
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text('Formulario valido: ${_emailCtrl.text}')),
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Formulario Flutter')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _emailCtrl,
decoration: const InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null || value.isEmpty) return 'Email obligatorio';
if (!value.contains('@')) return 'Email no valido';
return null;
},
),
TextFormField(
controller: _passCtrl,
decoration: const InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) {
if (value == null || value.length < 6) return 'Minimo 6 caracteres';
return null;
},
),
const SizedBox(height: 16),
ElevatedButton(onPressed: submit, child: const Text('Enviar')),
],
),
),
),
);
}
}Resultado esperado
El botón solo permite enviar cuando ambos campos cumplen reglas básicas.
Errores frecuentes
- No usar
GlobalKey<FormState>. - Validar en
onChangedsin control. - Olvidar liberar
TextEditingController.
Aplicación práctica
Es el bloque base para login, registro, checkout y formularios internos de negocio.
Siguiente ejercicio recomendado
- BottomNavigationBar en Flutter: ejercicio resuelto con IndexedStack
- Contador en Flutter con setState: ejercicio resuelto paso a paso
- ListView.builder en Flutter: ejercicio resuelto con lista dinamica
- Todos los ejercicios Flutter
Práctica guiada y siguiente paso
- Más ejercicios de Flutter
- Ejercicios C para reforzar fundamentos
- Programación en C en 100 ejercicios resueltos
- Ver el libro en Amazon (incluido en Kindle Unlimited)
- Suscribirte a la newsletter
FAQ
¿Qué widget se usa para formularios en Flutter?
Normalmente Form junto con TextFormField y validadores por campo.
¿Dónde guardar errores de validación?
En los validadores de cada campo, devolviendo mensajes claros y breves.
¿Este enfoque es escalable?
Sí. Puedes extraer reglas y reutilizar validadores en pantallas grandes.