- 1

Desarrollo de Apps Multiplataforma con Flutter y Firebase
01:46 - 2

Instalación y configuración de XCode y simuladores iOS para Flutter
12:01 - 3

Personalización de Temas Claros y Oscuros en Aplicaciones iOS
11:01 - 4

Configuración de Splash Screen en iOS con XCode y Flutter
06:06 - 5

Registro y membresía en Apple Developer para publicar apps
02:20 quiz de Preparación del entorno iOS
Agregar Transacciones en Firebase con Flutter y Bloc
Clase 28 de 30 • Curso de Flutter con Firebase
Contenido del curso
- 10

Implementación de Provider y Bloc en Flutter para Aplicaciones Financieras
06:24 - 11

Creación de Pantalla de Inicio de Sesión con Firebase y Bloc Listener
11:12 - 12

Creación y Validación de Formularios en Flutter con Firebase
17:44 - 13

Configuración de rutas en Flutter con GoRouter
15:46 - 14

Funcionalidad de Inicio y Cierre de Sesión con Firebase en Flutter
11:34 - 15

Implementación de Autenticación y Cierre de Sesión con Firebase
10:30
- 18

Clase para Gestión de Ingresos y Gastos en Firestore
16:44 - 19

Manejo de Estados y Eventos en Flutter con Bloc para Finanzas
09:57 - 20

Agregar transacciones en Firebase con Flutter Bloc
06:41 - 21

Eliminar Transacciones con Firebase en Flutter
05:29 - 22

Implementación de MultiProvider y MultiRepository en Flutter
06:06
- 23

Visualización de Datos en Dashboard con Block Builder
15:13 - 24

Integración de Gráficas y Estados en Aplicaciones Flutter
11:50 - 25

Creación de Listados Dinámicos en Aplicaciones Flutter
18:25 - 26

Configuración de Balance y Estados en Pantalla de Wallet
07:12 - 27

Lista de Transacciones en Aplicaciones Móviles
04:02 - 28

Agregar Transacciones en Firebase con Flutter y Bloc
10:55 - 29

Eliminar transacciones en aplicación con Firebase
03:57
La gestión de transacciones financieras en aplicaciones móviles es un componente esencial para cualquier desarrollador que busque crear herramientas útiles para el control de gastos. En esta ocasión, exploraremos cómo implementar la funcionalidad de agregar transacciones en una aplicación Flutter utilizando Firebase como base de datos, aprovechando la arquitectura BLoC para mantener una actualización en tiempo real de la información.
¿Cómo implementar la funcionalidad de agregar transacciones en Firebase?
Para completar nuestro CRUD (Create, Read, Update, Delete) con Firebase, necesitamos implementar las funcionalidades de agregar y eliminar transacciones. En esta sección, nos enfocaremos en la funcionalidad de agregar transacciones a nuestra aplicación de control de gastos.
Nuestra aplicación ya cuenta con un botón en el Navbar que permite agregar montos y descripciones, con opciones para registrar tanto entradas como salidas de dinero. Ahora, vamos a darle vida a estos botones para que procesen la información ingresada por el usuario.
Creación de la función para agregar transacciones
Lo primero que debemos hacer es crear una función privada que maneje la lógica de agregar transacciones:
void _addTransaction(BuildContext context, String amount, String description, String type) {
// Convertir el monto a un valor numérico
double parsedAmount = double.tryParse(amount) ?? 0;
// Validar que el monto sea válido
if (amount.isEmpty || parsedAmount <= 0) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Enter a valid amount"))
);
return;
}
// Crear objeto de transacción
final transaction = IncomeExpense(
amount: parsedAmount.toInt(),
description: description.isEmpty ? "No description" : description,
date: DateTime.now(),
type: type
);
// Agregar la transacción usando el BLoC
context.read<IncomeExpenseBloc>().addTransaction(transaction);
// Cerrar el modal
Navigator.of(context).pop();
// Mostrar mensaje de éxito
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text("Transaction agregada exitosamente"))
);
}
Esta función realiza varias tareas importantes:
- Parsea y valida el monto: Convierte el texto ingresado a un valor numérico y verifica que sea mayor que cero.
- Crea un objeto de transacción: Utiliza el modelo
IncomeExpensepara estructurar los datos. - Maneja casos especiales: Si no hay descripción, asigna un valor predeterminado.
- Registra la fecha actual: Utiliza
DateTime.now()para capturar el momento exacto de la transacción. - Utiliza el BLoC para agregar la transacción: Conecta con la lógica de negocio.
- Proporciona retroalimentación al usuario: Muestra mensajes de éxito o error.
Conectando la función con los botones de la interfaz
Una vez que tenemos nuestra función lista, necesitamos conectarla con los botones de nuestra interfaz:
// Para el botón de ingresos (Income)
onPressed: () {
_addTransaction(
context,
amountController.text,
descriptionController.text,
"income"
);
},
// Para el botón de gastos (Expense)
onPressed: () {
_addTransaction(
context,
amountController.text,
descriptionController.text,
"expense"
);
},
Es crucial pasar el tipo correcto ("income" o "expense") según el botón que se presione, ya que esto determinará cómo se clasifica la transacción en nuestra base de datos y cómo se visualizará en los gráficos y resúmenes.
¿Qué ventajas ofrece la arquitectura BLoC en esta implementación?
La implementación de la funcionalidad de agregar transacciones nos permite apreciar las ventajas de utilizar la arquitectura BLoC (Business Logic Component) en nuestra aplicación:
Actualización en tiempo real
Una de las mayores ventajas de utilizar BLoC Builder junto con Firebase es la actualización inmediata de los datos en la interfaz de usuario. Cuando agregamos una nueva transacción:
- El saldo se actualiza automáticamente
- Los gráficos se regeneran con la nueva información
- La lista de transacciones se actualiza para incluir la nueva entrada
Todo esto ocurre sin necesidad de recargar manualmente la aplicación o implementar lógica adicional para refrescar los datos.
Separación de responsabilidades
La arquitectura BLoC nos permite separar claramente la lógica de negocio de la interfaz de usuario. Nuestra función _addTransaction se encarga de validar los datos y preparar el objeto, pero delega la responsabilidad de almacenar la información al BLoC, que a su vez se comunica con el repositorio y Firebase.
Manejo de estados simplificado
Al utilizar BLoC, el manejo de estados se vuelve más predecible y fácil de mantener. No necesitamos preocuparnos por actualizar manualmente diferentes partes de la interfaz cuando cambian los datos, ya que los widgets que utilizan BlocBuilder se reconstruirán automáticamente cuando el estado cambie.
La implementación de la funcionalidad de agregar transacciones es un paso fundamental en nuestra aplicación de control de gastos. Con esta característica, los usuarios pueden registrar sus ingresos y gastos de manera sencilla, mientras que la arquitectura BLoC garantiza que toda la interfaz se mantenga sincronizada con los datos más recientes.
¿Has implementado alguna vez un sistema similar en tus aplicaciones? ¿Qué otras funcionalidades consideras esenciales para una aplicación de control de gastos? Comparte tu experiencia en los comentarios.