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
Qué es el patrón BLoC en Flutter
Resumen
El patrón BLoC (Business Logic Component) es una arquitectura para aplicaciones Flutter que separa la lógica de negocio de la interfaz de usuario. Esta separación te da mayor rendimiento y escalabilidad cuando tu app empieza a crecer. Si vienes del desarrollo móvil y quieres ordenar tu código, aquí entenderás cómo encaja cada pieza.
Cómo entender BLoC con la analogía de una ciudad
Imagina que Flutter es una ciudad con varios medios de transporte: buses, camiones y trenes que mueven personas, animales y mercancías de un lado a otro.
Dentro de esa ciudad hay tres partes fundamentales que sostienen toda la operación:
- La UI, que son las paradas de autobuses repartidas por la ciudad.
- El BLoC, que actúa como el centro de control de todos los transportes.
- Los streams, que son los autobuses por donde viajan los datos.
¿Qué hace exactamente un BLoC? Es el centro de control que recibe eventos desde la UI, decide qué hacer con ellos (como consultar una base de datos) y devuelve un estado con el resultado.
Cuáles son las 4 partes del patrón BLoC en Flutter
Para construir una aplicación con esta arquitectura vas a trabajar con cuatro piezas que se conectan en un flujo claro.
Eventos, BLoCs, streams y estados
Cada parte tiene un rol específico dentro del flujo de datos.
- Eventos: son las personas subiendo al autobús. Representan acciones como obtener datos o enviar datos.
- BLoCs: son el centro de control de transporte. Cuando llega un evento, deciden hacia dónde dirigirlo, por ejemplo, hacia una consulta a la base de datos.
- Streams: son las rutas que toman los transportes para llegar a su destino. Por ahí viajan los datos en tiempo real.
- Estados: son las paradas de autobús. Indican si la operación llegó a su destino, si fue exitosa o si hubo un error.
Con estas cuatro piezas tienes un ciclo completo de comunicación entre la interfaz y la lógica de negocio.
Cómo es el flujo completo de datos en BLoC
El flujo arranca cuando el usuario interactúa con la UI y termina cuando esa misma UI se actualiza con la respuesta.
- Se dispara un evento, como una persona subiéndose a su medio de transporte.
- El evento llega al BLoC, que decide hacia dónde dirigir esa información.
- El BLoC emite un estado, indicando si la operación fue exitosa o errónea.
- Ese estado viaja por un stream de regreso a la UI para actualizar la información en pantalla.
¿Por qué separar la lógica de la UI con BLoC? Porque ganas rendimiento, escalabilidad y un código más fácil de mantener cuando la app crece o cambia de diseño.
Este ciclo se repite cada vez que el usuario realiza una acción, y es la base que vas a aplicar dentro de tu aplicación Flutter. ¿Tú cómo organizas hoy la lógica de tus apps? Cuéntame en los comentarios.