Trabajar con formularios es una parte esencial de cualquier aplicación, ya sea para recopilar información del usuario o permitirle interactuar con la aplicación de una manera más significativa. En Flutter, hay varias formas de trabajar con formularios y, en este capítulo, nos centraremos en agregar botones de envío y cancelación a un formulario.
Primero, comencemos creando un nuevo proyecto Flutter y agregando un nuevo archivo llamado 'form_page.dart'. Dentro de este archivo, creemos una nueva clase llamada 'FormPage', que será un StatefulWidget. Dentro de esta clase, creemos una variable para nuestro formulario y una función para inicializarlo.
clase FormPage extiende StatefulWidget {
@anular
_FormPageState createState() => _FormPageState();
}
clase _FormPageState extiende Estado {
final _formKey = GlobalKey();
@anular
estado init vacío() {
super.initState();
}
@anular
Construcción de widgets (contexto BuildContext) {
volver andamio (
barra de aplicaciones: barra de aplicaciones(
título: Texto('Formulario'),
),
forma corporal(
clave: _formKey,
hijo: columna (
niños: [
// Agregue los campos de su formulario aquí
],
),
),
);
}
}
Ahora que tenemos la estructura básica de nuestro formulario, podemos comenzar a agregarle campos. Por ejemplo, podemos agregar un TextFormField para recopilar el nombre de usuario. También agreguemos un botón de enviar y un botón de cancelar a nuestro formulario.
Columna( niños:[ Campo de formulario de texto ( decoración: InputDecoration(labelText: 'Nombre'), validador: (valor) { si (valor.isEmpty) { return 'Por favor ingrese su nombre'; } devolver nulo; }, ), Botón elevado( niño: Texto('Enviar'), onPressed:() { si (_formKey.currentState.validate()) { // Si el formulario es válido, mostrar un Snackbar andamio.de(contexto) .showSnackBar(SnackBar(contenido: Texto('Procesamiento de datos'))); } }, ), Botón elevado( niño: Texto ('Cancelar'), onPressed:() { // Aquí puedes borrar el formulario o volver a la página anterior }, ), ], ),
Como puede ver, hemos agregado un TextFormField con una validación simple para verificar que el campo no esté vacío. Luego agregamos un RaisedButton con la etiqueta 'Enviar'. Cuando se presiona este botón, verifica si el formulario es válido. Si es así muestra un Snackbar con un mensaje diciendo que se están procesando los datos.
El botón cancelar no hace nada en este momento, pero puedes agregarle funciones, como borrar el formulario o volver a la página anterior.
Es importante tener en cuenta que Flutter proporciona muchos otros widgets que puedes usar para crear tu formulario. Por ejemplo, puede utilizar una casilla de verificación, un botón de opción, un control deslizante, un selector de fecha y muchos otros. La forma de trabajar con estos widgets es muy similar a la que hemos mostrado aquí, por lo que deberías poder agregar estos widgets a tu formulario sin mucho esfuerzo.
En resumen, trabajar con formularios en Flutter es relativamente simple, pero también muy poderoso. Puede crear formularios complejos con validación y lógica personalizada sin tener que escribir mucho código. Además, la capacidad de agregar botones de envío y cancelación a su formulario hace que la interacción del usuario con su aplicación sea mucho más placentera e intuitiva.
En la siguiente sección, hablaremos sobre cómo trabajar con la navegación y el enrutamiento en Flutter, que es otra parte esencial de cualquier aplicación. ¡Estén atentos!
