Curso de Flutter con Firebase

Crea tu colección de transacciones en Firestore

Curso de Flutter con Firebase

Contenido del curso

Crea tu colección de transacciones en Firestore

Resumen

Si estás construyendo una app de finanzas personales con Flutter y Firebase, llega el momento de conectar tu interfaz con una base de datos real. Aquí aprendes a crear una colección en Cloud Firestore llamada transactions y a sumar un gesto nativo de iOS para refrescar la lista de movimientos.

La idea es simple: dejar lista la estructura para guardar ingresos y gastos, y que el usuario pueda actualizar la vista deslizando hacia abajo, tal como lo hace en cualquier app nativa de iOS.

¿Cómo agregar un gesto pull to refresh en Flutter?

Para que la lista de transacciones se recargue cuando el usuario lo necesite, envuelves el listado en un widget llamado RefreshIndicator. Este widget reproduce el gesto nativo de iOS de deslizar hacia abajo para actualizar contenido [00:10].

La propiedad clave es onRefresh, que recibe una función asíncrona. Dentro de esa función defines qué pasa al deslizar: en este caso, una espera de un segundo usando Duration(seconds: 1) mientras más adelante se conecta el fetch real desde Firestore.

¿Qué hace RefreshIndicator en Flutter? Es un widget que muestra un indicador circular cuando el usuario desliza hacia abajo una lista, ejecutando la función que pases en onRefresh para recargar datos.

Al guardar el cambio, cada vez que deslizas hacia abajo se muestra el indicador animado, idéntico al comportamiento que esperas en cualquier aplicación de iOS.

¿Cómo crear una colección en Cloud Firestore?

Con el gesto listo, toca preparar la base de datos. Desde la consola de Firebase, en el panel principal, ya aparece habilitado Authentication, así que el siguiente paso es activar Cloud Firestore [01:30].

Dentro de la sección de productos seleccionas Cloud Firestore y creas la base de datos en modo test, ideal para entornos de desarrollo porque permite lecturas y escrituras sin reglas estrictas mientras construyes la app.

¿Qué nombre darle a la colección de una app de finanzas?

Para este proyecto, la colección se llama transactions porque va a almacenar todos los movimientos de dinero del usuario, tanto ingresos como gastos.

Al crear el primer documento, defines el documentId como autoId, lo que significa que Firestore genera automáticamente un identificador único para cada transacción. Así no tienes que preocuparte por colisiones ni por mantener un contador manual.

¿Qué campos debe tener un documento de transacción en Firestore?

La estructura de cada documento dentro de transactions se compone de cuatro campos pensados para describir un movimiento financiero completo:

  • amount: tipo number. Representa el monto de dinero. En el ejemplo se usa 1500.
  • date: tipo timestamp. Guarda la fecha y la hora exactas en que se registró la transacción.
  • description: tipo string. Describe el origen o motivo del movimiento, por ejemplo salario.
  • type: tipo string. Indica si la transacción es income (entrada) o expense (salida).

Esta separación entre income y expense es la que permite, más adelante, calcular balances, mostrar gráficas y filtrar la lista por tipo de movimiento [03:40].

¿Para qué sirve el campo type en una transacción? Diferencia los números positivos que entran a la cuenta (income) de los negativos que salen (expense), y permite filtrar y sumar movimientos por categoría.

¿Por qué usar timestamp en lugar de string para la fecha?

Usar el tipo timestamp en vez de un string facilita ordenar las transacciones cronológicamente y aplicar filtros por rangos de fechas directamente desde las consultas de Firestore, sin tener que parsear texto en el cliente.

Cuando guardas el documento, Firestore te muestra la estructura final: el id único de la transacción, el monto, la fecha formateada, la descripción y el tipo. Con eso queda lista la base para hacer fetch de la data y también para agregar nuevos registros desde la app.

¿Cómo conectarías esta colección con tu pantalla de Flutter? Cuéntame en los comentarios qué estructura usarías tú para una app de finanzas personales.