Formulario (Textfield) dinámico en Flutter
A continuación vamos a hacer la funcionalidad de crear/eliminar un formulario dinámicamente.
Por supuesto también esta funcionalidad implica que cada campo del formulario mantenga su valor y nos permita recuperarlo más adelante:
Nota: Para hacerlo más sencillo de entender mi formulario solo contará de 1 campo TextField. Entonces lo que en la imagen esta marcado con rojo será 1 formulario, y cada fila abajo de esta representará 1 formulario:
Comencemos!
Vamos a crear una clase para representar el formulario que en este caso tendra un campo que se llamará _name, Si tu formulario tiene mas campos puedes crear nuevos atributos en esta clase:
Ahora vamos a crear una lista de tipo BasicForm:
Definimos tres funciones:
- La primera será para adicionar un formulario al array de formularios.
- La segunda función la usaremos para mostrar los valores actuales que tiene el array(en este caso solo lo mostraremos por consola).
- Y la tercera función sera para eliminar 1 formulario del array de formularios
Para la UI haremos uso de un ListView.builder que recorrerá el array y por cada BasicForm retornará un Widget que tendrá un TextField y un boton de eliminar:
Ahora simplemente hacemos correr la aplicacion y podremos ver lo siguiente:
El botón al lado del + sirve para mostrar el valor de los TextField actuales en la consola.
Y bueno eso es todo, Esta funcionalidad se puede expandir para un formlario aún más grande. Hice una versión con 2 campos (Texto y Select):
Por si gustas verlo, lo puedes encontrar acá: Flutter dynamic form