Visualización de Datos en Dashboard con Block Builder

Clase 23 de 30 • Curso de Flutter con Firebase

Clase anteriorSiguiente clase

Resumen

La gestión de datos en aplicaciones móviles es fundamental para ofrecer experiencias de usuario significativas. Aprender a mostrar información de manera dinámica y controlada permite crear aplicaciones robustas que responden adecuadamente a diferentes estados de datos. En esta guía, exploraremos cómo implementar un sistema de visualización de datos financieros utilizando Flutter, con énfasis en el manejo de estados y la presentación condicional de información.

¿Cómo implementar un Block Builder para mostrar datos financieros?

El Block Builder es una herramienta poderosa que nos permite crear widgets dinámicos basados en diferentes estados de datos. Esta funcionalidad es especialmente útil cuando necesitamos mostrar información que puede estar en diferentes estados: cargando, cargada correctamente, o con errores.

Para implementar un Block Builder efectivo en nuestra aplicación de finanzas personales, necesitamos:

  1. Crear la estructura básica del Block Builder que escuchará constantemente nuestro estado.
  2. Definir los diferentes estados posibles de nuestros datos.
  3. Implementar la lógica condicional para mostrar widgets específicos según el estado.

Configuración inicial del Block Builder

Comenzamos creando nuestro Block Builder que recibirá dos parámetros fundamentales:

Widget blockBuilder(IncomeExpendBloc bloc, TransactionState state) {
  return Builder(
    builder: (context) {
      // Aquí implementaremos la lógica condicional
    }
  );
}

Este Block Builder estará constantemente escuchando los cambios en el estado de nuestras transacciones financieras, permitiéndonos responder adecuadamente a cada situación.

Manejo de diferentes estados de datos

Una vez configurado nuestro Block Builder, implementamos la lógica condicional para manejar los diferentes estados posibles:

if (state is TransactionLoading) {
  return const Center(
    child: CupertinoActivityIndicator(),
  );
} else if (state is TransactionLoaded) {
  // Cálculos financieros cuando los datos están cargados
  double totalIncome = state.transactions
      .where((transaction) => transaction.type == 'income')
      .fold(0.0, (sum, transaction) => sum + transaction.amount);
      
  double totalExpense = state.transactions
      .where((transaction) => transaction.type == 'expense')
      .fold(0.0, (sum, transaction) => sum + transaction.amount);
      
  double availableBalance = totalIncome - totalExpense;
  double budgetForMonth = totalIncome * 0.7;
  
  return buildBody(
    context, 
    availableBalance, 
    budgetForMonth, 
    totalIncome, 
    totalExpense
  );
} else if (state is TransactionError) {
  return Center(
    child: Text("Error cargando la data: ${state.message}"),
  );
} else {
  return const Center(
    child: Text("No data available"),
  );
}

Este enfoque nos permite:

  • Mostrar un indicador de carga mientras los datos se están recuperando
  • Calcular y mostrar información financiera cuando los datos están disponibles
  • Presentar mensajes de error claros cuando algo sale mal
  • Manejar el caso de ausencia de datos con un mensaje apropiado

Construcción del widget de visualización de datos

Una vez que tenemos los datos procesados, necesitamos construir la interfaz que los mostrará al usuario:

Widget buildBody(BuildContext context, double availableBalance, double budget, double income, double expense) {
  return Column(
    children: [
      // Widget para mostrar el balance disponible
      Text("\$$availableBalance.toString()"),
      
      // Widget para mostrar el presupuesto mensual
      Text("\$$budget.toString()"),
      
      // Widgets para mostrar ingresos y gastos
      Text("\$$income.toString()"),
      Text("\$$expense.toString()"),
      
      // Botón para guardar meta
      ElevatedButton(
        onPressed: () {
          // Funcionalidad para guardar meta
        },
        child: Text("Guardar Meta"),
      ),
    ],
  );
}

¿Cómo realizar cálculos financieros con los datos obtenidos?

Una parte crucial de nuestra aplicación es realizar cálculos financieros precisos con los datos obtenidos de nuestra base de datos. Estos cálculos nos permiten presentar información valiosa al usuario.

Cálculo de ingresos y gastos totales

Para calcular los ingresos y gastos totales, utilizamos el método fold que nos permite acumular valores a partir de una colección:

double totalIncome = state.transactions
    .where((transaction) => transaction.type == 'income')
    .fold(0.0, (sum, transaction) => sum + transaction.amount);
    
double totalExpense = state.transactions
    .where((transaction) => transaction.type == 'expense')
    .fold(0.0, (sum, transaction) => sum + transaction.amount);

Este código:

  1. Filtra las transacciones por tipo (ingresos o gastos)
  2. Acumula los montos de cada transacción
  3. Devuelve el total como un valor double

Cálculo del balance disponible y presupuesto

Con los totales de ingresos y gastos, podemos calcular fácilmente el balance disponible y establecer un presupuesto mensual:

double availableBalance = totalIncome - totalExpense;
double budgetForMonth = totalIncome * 0.7; // 70% de los ingresos

Estos cálculos nos permiten:

  • Mostrar al usuario cuánto dinero tiene disponible después de restar los gastos
  • Establecer un presupuesto recomendado basado en un porcentaje de sus ingresos

¿Cómo presentar la información financiera de manera efectiva?

La presentación efectiva de la información financiera es crucial para que los usuarios puedan entender rápidamente su situación económica.

Diseño de tarjetas informativas

En nuestra aplicación, utilizamos tarjetas (cards) para mostrar diferentes aspectos de la información financiera:

  1. Tarjeta de balance disponible: Muestra el dinero total disponible
  2. Tarjeta de presupuesto mensual: Muestra la meta de gastos para el mes
  3. Tarjetas de ingresos y gastos: Muestran los totales de entradas y salidas de dinero

Cada tarjeta debe ser clara y mostrar la información de manera concisa, utilizando formatos de moneda apropiados:

Text("\$$availableBalance.toString()")

Implementación de funcionalidades adicionales

Además de mostrar la información, podemos agregar funcionalidades que permitan al usuario interactuar con sus datos financieros:

ElevatedButton(
  onPressed: () {
    // Funcionalidad para guardar meta
  },
  child: Text("Guardar Meta"),
)

Este botón podría permitir al usuario establecer y guardar sus propias metas financieras, personalizando así la experiencia de la aplicación.

La implementación de un Block Builder para mostrar datos financieros en Flutter nos permite crear una experiencia de usuario robusta y dinámica. Al manejar adecuadamente los diferentes estados de datos y realizar cálculos financieros precisos, podemos proporcionar a los usuarios información valiosa sobre su situación económica. Te animamos a experimentar con estas técnicas y a implementar funcionalidades adicionales como el guardado de metas financieras para enriquecer tu aplicación.