BlocProvider y RepositoryProvider en Flutter

Integrar la arquitectura Bloc con un sistema de rutas en Flutter te permite separar la lógica de negocio de la interfaz y navegar entre pantallas sin acoplar componentes. Aquí verás cómo envolver tu MaterialApp con BlocProvider y RepositoryProvider, y cómo preparar el esqueleto de pantallas para una app de finanzas con Firebase.

Por qué envolver MaterialApp con BlocProvider y RepositoryProvider

La arquitectura Bloc separa la lógica de la UI, pero esa lógica necesita estar disponible en todo el árbol de widgets. Por eso envolvemos MaterialApp con dos providers que inyectan tanto el bloc como el repositorio.

Cómo se configura el BlocProvider en main

En el main.dart envuelves tu MaterialApp con un BlocProvider que inicializa el AutoBloc. Dentro del parámetro create recibes el context y devuelves la instancia del bloc, pasándole el repositorio que necesita para operar.

La clave está en cómo obtienes ese repositorio: usas RepositoryProvider.of<AutoRepository>(context) para extraerlo del árbol y entregárselo al bloc. Así el bloc queda conectado a su fuente de datos sin instanciarla manualmente.

¿Qué hace BlocProvider en Flutter? Es el widget que crea y expone una instancia de un bloc a sus widgets hijos, permitiendo que cualquier pantalla descendiente acceda al estado y a los eventos sin pasar referencias manualmente.

Cómo añadir el RepositoryProvider por encima del Bloc

No basta con entregar el bloc: también necesitas exponer el repositorio para que cualquier parte de la app pueda consultarlo. Por eso envuelves el BlocProvider dentro de un RepositoryProvider que crea la instancia de AutoRepository.

El orden importa. Primero el RepositoryProvider, luego el BlocProvider, porque el bloc depende del repositorio. Si lo haces al revés, el bloc no podrá encontrar su fuente de datos al inicializarse.

Cómo crear el Main Screen y preparar la navegación

Una vez resuelta la inyección de dependencias, toca construir el contenedor de pantallas. Creas un archivo main_screen.dart con una clase StatefulWidget llamada MainScreen y su MainScreenState, importando siempre material.dart para acceder a los widgets de Flutter.

Este MainScreen será el punto desde donde el router decida qué pantalla mostrar según la ruta activa. Funciona como contenedor principal de la navegación.

Qué pantallas y widgets reciclables incluir

La app de finanzas se organiza en cuatro pantallas principales que cubren los flujos básicos del usuario:

• Dashboard con la vista general de la cuenta.
• Perfil con configuraciones y datos del usuario.
• Dos pantallas de balances para mostrar finanzas y transacciones.

Cada pantalla apoya su construcción en widgets reciclables guardados en una carpeta widgets. Por ejemplo, un CustomBar que recibe información por parámetro y se reutiliza en varias vistas, o un TransactionList que renderiza el historial de movimientos.

¿Qué es un widget reciclable en Flutter? Es un componente parametrizable ubicado en una carpeta común que puedes reutilizar en distintas pantallas pasándole datos diferentes, evitando duplicar código.

Cómo agregar fl_chart para gráficos de finanzas

La pantalla de balances usa la librería fl_chart para renderizar gráficos tipo line chart. Para instalarla ejecutas en la terminal:

bash flutter pub add fl_chart

Con ese comando el paquete queda agregado al pubspec.yaml y puedes importar sus widgets directamente en las pantallas que muestren datos financieros. Los gráficos vienen listos para usarse, así que solo conectas tus datos al widget y obtienes la visualización.

Cómo conecta todo esto con Firebase y la app iOS

Esta estructura de providers, pantallas y widgets reciclables te deja el terreno listo para enfocarte en lo importante: integrar Firebase y construir las funcionalidades específicas de iOS. Las maquetas iniciales sirven como base navegable, y a partir de ahí vas inyectando lógica real a través de los blocs y repositorios ya conectados.

La recomendación es revisar cada pantalla, personalizar estilos y animarte a ajustar los widgets a tu propia identidad visual antes de cablear los servicios externos.

¿Cómo organizarías tú la jerarquía de providers en una app más grande? Cuéntame en los comentarios.