Contenido del curso
Fundamentos de BLoC y Firebase
Navegación y Autenticación
- 10

BlocProvider y RepositoryProvider en Flutter
06:24 min - 11

Pantalla de login con BlocListener en Flutter
11:12 min - 12

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

Rutas en Flutter con GoRouter y Firebase Auth
15:46 min - 14

Conectar botón de login con Firebase Auth
11:34 min - 15

Cómo implementar logout con Firebase y GoRouter
10:30 min
Diseño Avanzado en iOS
Integración con Firestore usando BLoC
- 18

Modelo e repositório Firestore para BLoC
16:43 min - 19

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

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

Eliminar Transacciones con Firebase en Flutter
05:29 min - 22

MultiBlocProvider con auth y transacciones en Flutter
06:06 min
Funcionalidades con BLoC
- 23

BlocBuilder para mostrar datos en Flutter
15:13 min - 24

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

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

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

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

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

Eliminar transacciones en Flutter con BLoC y Firebase
03:57 min
Testing
Estructura de carpetas Bloc en Flutter
Resumen
Construir una app de finanzas en Flutter requiere una arquitectura clara desde el inicio, y la metodología Bloc es una de las más potentes para lograrlo. Aquí aprenderás a organizar carpetas, instalar dependencias y preparar el archivo main para que tu proyecto escale sin caos.
¿Qué carpetas necesitas para aplicar Bloc en Flutter?
La arquitectura Bloc se sostiene en una organización de carpetas que separa responsabilidades. Antes de escribir lógica, conviene dejar lista esta estructura.
- blocs: aquí viven los events y el state que controlan el flujo de datos.
- authentication: funciona como centro de control para el login y registro.
- repositories: contiene el repositorio de autenticación y cualquier otra fuente de datos.
- models: aunque no forma parte estricta de la arquitectura, ayuda a organizar las respuestas que recibes.
- screens: agrupa todas las pantallas de la app.
- widgets: reúne componentes reutilizables a lo largo del proyecto.
- utils: guarda utilidades transversales que puedes reusar en cualquier parte.
Con estas carpetas tienes la base de la metodología cubierta [00:24]. El resto es ir poblando cada una conforme avanzas.
¿Qué es Bloc en Flutter? Es una metodología de gestión de estado que separa la lógica de negocio de la interfaz mediante eventos y estados, facilitando apps escalables y mantenibles.
¿Cómo instalar las dependencias de Bloc en tu proyecto?
Para que toda esta arquitectura funcione, necesitas dos paquetes oficiales: flutter_bloc y bloc. Ambos se instalan desde la terminal usando el comando que Flutter recomienda en su documentación [02:10].
El orden importa poco, pero la versión sí. Te aconsejo revisar que ambas dependencias estén actualizadas y sean compatibles entre sí, porque un desfase de versiones suele romper la compilación o generar comportamientos extraños en tiempo de ejecución.
Una vez instalados, ya puedes usar todas las funcionalidades de Bloc dentro de tu proyecto Flutter.
¿Para qué sirve flutter_bloc? Es el paquete que conecta los widgets de Flutter con la lógica de Bloc, permitiendo que la UI reaccione automáticamente a los cambios de estado.
¿Cómo configurar el main con BlocProvider y RepositoryProvider?
El archivo main es la puerta de entrada de tu aplicación, y ahí debes declarar que vas a trabajar con Bloc. La idea es envolver el widget raíz con los providers necesarios para que toda la app tenga acceso a los blocs y repositorios.
¿Qué hace BlocProvider?
El BlocProvider recibe dos parámetros clave: create y child. El child suele ser tu home page, mientras que el create define cómo se inicializa el bloc y cómo se conecta al repositorio. Por ahora basta con dejar un context listo para llamar al repositorio cuando lo necesites.
¿Y qué aporta RepositoryProvider?
Después del bloque del provider viene el RepositoryProvider, que también se inicializa con el parámetro create. Su función es exponer el repositorio a toda la app, de modo que cualquier bloc pueda consumirlo sin acoplarse directamente a su implementación.
Con estos dos providers anidados ya tienes la estructura básica de la arquitectura Bloc funcionando. El BlocProvider gestiona el estado y el RepositoryProvider entrega los datos, lo que permite un manejo limpio de toda la información que circula por la UI.
¿Qué funcionalidades vas a construir sobre esta base?
La app de finanzas personales que estás montando necesita varias piezas funcionando en conjunto:
- Login para que los usuarios accedan a su cuenta.
- Registro para crear nuevos usuarios.
- Captura de presupuesto para definir metas y límites.
- Hoja de balance para registrar ingresos y egresos.
Cada una de estas funcionalidades aprovechará la estructura que acabas de montar: blocs para la lógica, repositorios para los datos, modelos para las respuestas y screens para la interfaz. Tener la arquitectura lista desde ahora te ahorra refactors costosos más adelante.
¿Qué parte de la arquitectura Bloc te genera más dudas al empezar un proyecto nuevo? Cuéntamelo en los comentarios.