Eliminar transacciones en Flutter con BLoC y Firebase

Eliminar transacciones en Flutter con Firebase usando el patrón BLoC permite mantener tu aplicación sincronizada en tiempo real y con una experiencia de usuario fluida. Aquí verás cómo conectar el ícono de borrado con el evento DeleteTransaction, validar el id recibido y comprobar que la base de datos en Firestore responde casi al instante.

¿Cómo conectar el botón eliminar con el BLoC de transacciones?

El flujo parte desde el TransactionList dentro del Wallet, donde ya tenías un ícono preparado para borrar. Lo que falta es enviar el evento al bloc para que ejecute la lógica.

Usa context.read sobre el IncomeExpenseBloc y dispara el método .add con el evento DeleteTransaction. Ese evento espera un id de tipo String, así que le pasas transaction.id.

¿Qué hace context.read en Flutter BLoC? Te da acceso al BLoC más cercano en el árbol de widgets sin escuchar cambios. Es ideal para disparar eventos como agregar o eliminar, donde solo necesitas comunicarte una vez.

Como el id es requerido, conviene evaluar el caso en el que no exista y enviar un string vacío como fallback. Con eso evitas errores en tiempo de ejecución cuando un documento no tenga el campo poblado.

dart context.read<IncomeExpenseBloc>().add( DeleteTransaction(transaction.id ?? ''), );

¿Cómo se ve el borrado en tiempo real con Firestore?

Al probar la funcionalidad en la pantalla de Transactions, seleccionas cualquier registro y se elimina al instante. Lo interesante es que toda la aplicación se actualiza en cuestión de segundos.

Esto incluye varios elementos visuales que dependen del mismo estado:

• El gráfico principal con la distribución de income y expense.
• Los montos totales que suben o bajan según la transacción borrada.
• El listado del wallet que refleja la nueva colección.
• Los contadores por transactionType agrupados.

La ventaja de tener un BLoC centralizado es justamente esa: un solo evento dispara la actualización de todos los widgets suscritos al estado.

¿Por qué conviene mostrar un modal de confirmación?

Eliminar con un solo toque es rápido, pero también riesgoso. Si el usuario presiona el ícono por accidente, pierde el dato sin posibilidad de recuperarlo.

La práctica recomendada es agregar un modal que pregunte si la persona está segura de borrar el monto antes de despachar el evento. Es un detalle pequeño que mejora mucho la confianza en la aplicación.

¿Cómo verificar las transacciones en la consola de Firebase?

Después de agregar entradas como un salaryExtra marcado como income, puedes abrir la consola de Firebase y revisar la colección directamente.

Al actualizar la data en Firestore, encuentras todos los documentos creados desde la app. Cada uno trae un autoID que nunca generaste manualmente: lo creó Firestore automáticamente al usar add.

¿Qué es un autoID en Firestore? Es un identificador único que Firebase genera al insertar un documento con el método add. Te ahorra crear lógica para evitar colisiones y sirve como llave primaria del documento.

También verás cómo la fecha se guardó usando Date.now, lo que te permite ordenar y filtrar por timestamp sin trabajo extra. Curiosear los documentos te ayuda a entender la conexión directa entre la app y la base de datos.

¿Qué funcionalidades de un CRUD quedan cubiertas?

Con el borrado integrado, ya tienes la mayor parte de un CRUD funcionando contra Firebase:

• Crear transacciones con add y autoID automático.
• Leer la colección en tiempo real desde Firestore.
• Eliminar documentos con el evento DeleteTransaction.

Falta sumar el actualizar, que es el siguiente paso natural. Te invito a implementarlo y compartir en los comentarios cómo te quedó la funcionalidad de update en tu propia app.

Habilidades y conceptos clave del flujo de borrado

Estos son los puntos técnicos que aparecieron y que conviene tener claros:

• context.read<Bloc>(): accede al BLoC sin escuchar cambios, perfecto para disparar eventos puntuales [00:10].
• Evento DeleteTransaction: recibe un id de tipo String y lo procesa en el BLoC para eliminar el documento [00:25].
• Validación de id nulo: enviar string vacío como fallback evita crashes cuando el dato no existe [00:35].
• Reactividad del BLoC: un solo evento actualiza gráfico, montos, lista y wallet simultáneamente [01:10].
• autoID de Firestore: identificador generado automáticamente al usar add, sin lógica manual [02:15].
• Date.now para timestamps: registra la fecha de creación para ordenar transacciones [02:30].