---
# System prepended metadata

title: Bloc (Business Logic Component)

---

# Bloc (Business Logic Component)

El patrón Bloc trabaja en base a eventos y estados, antes de entrar en los detalles de la arquitectura vamos a definir los principales elementos que la componen:

* **Eventos**: Son la entrada al bloc, están relacionados con la interación del usuario con la aplicación.
* **Estados**: Son la salida del bloc y representan el estado de la aplicación. Según estos estados se redibujan porciones de la interfaz.

## Streams: Comunicación en BLoC

La comunicación en BLoC es asíncrona y tiene dos componentes, ambos parte de StreamController. 

1. Sink: Es el punto de entrada de información
2. Stream: Punto de salida de información

Los elementos que estan suscritos al stream son los que reciben la información en el momento que esta entra al sink.

## Arquitectura

Siguiendo este patrón de diseño, se separa la aplicación en tres capas:

1. Data
2. Business Logic Component
3. Presentación Component

Estas capas se relacionan según el diagrama siguiente.

![](https://i.imgur.com/MLGkSEA.png)

### Data Layer

Esta capa es la responsable de obtener y manipular los datos de una o más fuentes. Se divide en dos subcapas: *Data Provider* y *Repository*

![](https://i.imgur.com/S9Yf6s5.png =150x)

#### Data Provider

Se conecta con las fuentes de datos y entrega datos en bruto a la subcapa Repository. Esta subcapa realiza operaciones CRUD.

#### Repository

Interactúa con múltiples Data Providers y transforma los datos acorde al modelo de datos de la aplicación antes de entregarlos a la capa BLoC.

### BLoC (Business Logic) Layer

Es el puente entre la interfaz (presentation layer)y la capa de datos. Toma los eventos generados por la interacción del usuario con la interfaz, y se comunica con el repositorio para construir el nuevo estado y entregarlo a la capa de presentación.

Es posible que haya más de un componente bloc, y estos pueden estar interconectados entre sí.

Esta capa constituye el cerebro que ejecuta toda la lógica de la aplicación.

### Presentation Layer

Se encarga de componer la interfaz de usuario, y de redibujarla en base a los estados obtenidos desde el BLoC. Adicionalmente debe manejar la interacción con el usuario.

---

Finalmente, en la imagen a continuación se observa como se relaciona cada una de las capas y subcapas del patrón BLoC. 


![](https://i.imgur.com/2ImG4Ki.png)

Considerando esto, el esqueleto del proyecto flutter queda de la forma:

![](https://i.imgur.com/IF317qD.png =200x)




