No cabe duda de que los formularios son un componente muy utilizado en el desarrollo, ya sea móvil o no. En todo proceso donde el usuario deba de insertar datos, es necesario dotar de un “input” de entrada a nuestra aplicación.
Flutter posee widgets muy interesantes para este tipo de trabajos, con el TextFormField junto con el widget Form, poseemos unas herramientas muy potentes y a la vez muy sencillas de usar para crear formularios en Flutter.
Creando un formulario en Flutter

Como ejemplo de como crear formularios en Flutter vamos a desarrollar una vista como si fuese una pantalla de login de una aplicación. Tendremos dos TextFormField
, uno donde incluir un email y otro donde añadir la contraseña. Por último un botón que tras pulsarlo, validará y comprobará que los datos introducidos sean los correctos, según las normas de validación que establezcamos, y nos pasará a la siguiente pantalla, solo mostraremos un toast si la validación es correcta.
Como requisitos de validación solo vamos a tener dos, que el campo email sea una dirección de email válida, o sea, que esté formada correctamente. Y como segunda condición que el campo password no esté vacío y que tenga un mínimo de 8 caracteres.
Empecemos construyendo la vista y explicando los diferentes widgets de Flutter que la conforman.
class LoginScreenState extends State<LoginScreen> {
// Crea una clave global que identificará de manera única el widget Form
// y nos permita validar el formulario
//
// Nota: Esto es un GlobalKey<FormState>, no un GlobalKey<LoginScreenState>!
final _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
// Crea un widget Form usando el _formKey que creamos anteriormente
return Form( //1 Form como raiz de nuestro formulario
key: _formKey,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_emailInput(), //2
_passwordInput(), //2
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: _loginButton()),//2
],
),
);
}
......
1// Como widget raíz de nuestro formulario hemos incluido un widget Form
. Este widget posee una serie de métodos internos que nos facilitan mucho la labor de gestionar los diferentes campos que conforman el formulario, incluido la validación.
Al parámetro key
lo hemos asignado un GlobalKey<FormState>
para después en el evento del botón Login poder recoger si las validaciones que hemos requerido a los dos campos son correctas o no.
2// Disponemos los inputs dentro de una columna, un primer TextFormField
para el email , otro para la password y por último el botón de login.
Validando los TextFormField en Flutter
Hemos extraído los inputs a métodos diferentes para abstraer algo más la lógica de cada uno. En el input del email vemos que los propios TextFormField
poseen un parámetro validator
al que tenemos que asignar una función que recibe un valor tipo String
, el campo que se ha introducido por el input, y devuelve un String
, el mensaje de error en caso de que la validación no sea correcta.
Widget _emailInput() {
return TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.email),
hintText: 'Inserte su email',
labelText: 'Email',
),
validator: (value) => _validatorEmail(value));
}
Widget _passwordInput() {
return TextFormField(
decoration: const InputDecoration(
icon: Icon(Icons.lock),
hintText: 'Inserte su contraseña',
labelText: 'Contraseña',
),
validator: (value) => _validatorPassword(value));
}
En nuestro caso la validación del email la hemos realizado fuera también de este método para abstraerse más si cabe, y poder reutilizarla en otras vistas si hiciese falta. Habría que crear una clase y tener las validaciones en ella.
En nuestra validación lo que tenemos realizado es que si el campo no pasa el pattern de la regex del email, devuelve el String
que se mostrará como error el pulsar el botón de Login.
String _validatorEmail(String value) {
if (!_isEmail(value)) {
return 'Please enter some text';
}
}
bool _isEmail(String str) {
return _emailRegExp.hasMatch(str.toLowerCase());
}
static final RegExp _emailRegExp = RegExp(
r"^[a-zA-Z0-9.a-zA-Z0-9.!#$%&'*+-/=?^_`{|}~]+@[a-zA-Z0-9\-\_]+(\.[a-zA-Z]+)*$");
Para el caso del input de la contraseña, es básicamente igual, solo que la validación comprueba que no esté vació el campo y que este sea como mínimo de una longitud de 8 caracteres.
String _validatorPassword(String value) {
if (!_hasMinLenght(value)) {
return 'Please enter some text';
}
}
bool _hasMinLenght(String value){
return value.isNotEmpty && value.length >= 8;
}
Validación del Formulario
Ya solo queda darle un vistazo a la lógica que hay dentro del método que se ejecuta al pulsar el botón Login.
Aquí utilizamos la GlobalKey
que habíamos seteado al widget Form
. Esta key nos provee de acceso a la validación que internamente ha realizado el widget Form
utilizando el conjunto de validators
que nosotros hemos realizado en cada FormTextField
.
Widget _loginButton() {
return ElevatedButton(
onPressed: () {
// devolverá true si el formulario es válido, o falso si
// el formulario no es válido.
if (_formKey.currentState.validate()) {
// Si el formulario es válido, queremos mostrar un Snackbar
Scaffold.of(context)
.showSnackBar(SnackBar(content: Text('Login correcto')));
}
},
child: Text('Login'),
);
}
Preguntando el método currentState.validate()
obtenemos un booleano
a true
si todos los TextFormField
han pasado nuestra validación o un false
en caso contrario.
Al mismo tiempo, si existe un error, el widget Form
mostrará el error bajo cada TextFormField
con el texto que nosotros hemos incluido en el validador.

Lo cierto es que sumamente fácil crear formularios y validarlos con el conjunto de estos dos widgets.
Todo el código lo tenéis disponible Github.
Desarrollador Android/IOS desde los orígenes del universo. También he probado Flutter y en general me gusta todo lo que huela a plataformas móviles. Intento escribir sobre problemas que me encuentro en el día a día y que espero ayuden a otr@s.
1 comentario en “Como crear fomularios en Flutter”