Whoever said you can’t build an ocean with drops of water?

Come with me as we create our own Ocean using sinks and streams.

First off, what is Bloc?

Bloc is a word coined by Google, meaning Business, Logic components. The original idea was to store as much business logic as possible in pure dart code so that it can be reusable across other platforms.

In order to build an ocean from our drops of water, first, we need to choose our land for the Ocean( Expected outputs). And our source of water drops (User inputs). (In mobile app development this is basically you knowing what you want your app to do. Quite simple? Yeah.

In this article which is the first of a two part series, we are going to go over the different components that enables building with the Bloc pattern using the bloc package for Flutter found here.

We’ll be starting with events.

Events are the water that flows from the tap.

States are the output that comes out from our pipe. Water drops go into our pipe through the sink (as events) and once they come out to our ocean site, they have a different name called states.

When we dispatch the water from the tap, we say the water (event) has been dispatched.


The plumbing pipes connecting our Sink to the Ocean are called mapEventToState. like wait, who gave this pipe such a weird name? Oh, maybe it’s because it maps our input water (Events) to the Ocean site (State). Makes sense.


Transitioning occurs when the Event (Water) is dispatched.

Supervisor: You are the supervisor, your job is to assign blocs to the BlocDelegate.

after mapEventToState has been called but before the Bloc‘s state has been updated. A Transition consists of the currentState, the event which was dispatched, and the next state.

BlocDelegate handles events from all Blocs which are assigned by the BlocSupervisor. It is usually a great place to intercept all Bloc Transitions, Bloc errors, and can be used for logging and error handling.

By the end we would have converted all our events into several states in the application that leads to one awesome whole, The App, our ocean. 😊🙂

In the next part, we would go through the process of creating an application that fetches data from network using the bloc pattern.

Leave a Reply