Juan Esteban Alvarez Ruiz
Recursos
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.