If you like this article, considere buy me a cofee! 😉
Crypto donation button by NOWPayments

En este artículo quiero hacer una introducción a como diseñar la estructura de una aplicación Flutter con el patrón BLoC.

Introducción

Cuando empiezas a desarrollar aplicaciones para iOs o Android, uno de los primeros patrones de diseño que aprendes, sino el primero, es el MVC (Model View Controller). En este patrón la vista y el model están separados, y es el controlador el que se encarga de transmitir señales entre ellos.

Más adelante, aprendes nuevos patrones que te ayudan a estructurar tu aplicación y su código: MVP (Model View Presenter), MVVM (Model View ViewModel)… De esta forma obtenemos un código más limpio, reutilizable y escalable.

En el caso que estamos tratando, el del patrón BLoC, este es un componente que correspondería al Presenter en el MVP o al ViewModel en el MVVM.

Introducción del patrón BLoC

El patrón BLoC, que significa Business Logic Component, fue introducido pos Paolo Soares y Cong Hu en la DartConf 2018, con la finalidad de aumentar la reutilización de código entre aplicaciones.

BLoC se adecua a la naturaleza reactiva de las aplicaciones en Flutter (a diferencia del patrón MVC). El patrón BLoC se basa que en una aplicación en todo momento se están produciendo eventos (tanto de emisión como de recepción), y el componente BLoC es el encargado de hacer la conversión.

Básicamente, el patrón BLoC tiene como misiones principales el agrupar la lógica de negocio, los cambios de estado y adaptarlos a la vista. Este patrón BLoC lo utilizaremos para cada pantalla, incluso widget si es lo suficientemente importante para tener su propia lógica.

De una forma simple, podemos representar un componente BLoC de la siguiente manera:

Lógica de negocio

Cuando generemos la clase de un BLoC hemos de tener en cuenta que solo debería contener la lógica del componente, ser escalable y reutilizable, y no tener dependencias. Por lo tanto, cualquier posible dependencia deberá ser inyectada.

Gestionar los cambios de estado

La clase BLoC es la encargada de recibir lo eventos de la pantalla (o widget) y modificar el estado en función de dichos eventos.

Adaptación para la vista

Además de recibir eventos y modificar el estado en función de dichos eventos, el componente BLoC también es el encargado de dar formato a los datos que se muestran en la vista.

Categorías: Sin categoría

Sígueme en Feedly