60 Days of Flutter : Day 12–14 : Understanding BLoC Pattern in Flutter

6 min readAug 26, 2019

As the title suggests, today I’m not going to code anything. I spent the past three days reading different articles and watching videos about BLoC. And I can’t emphasize enough how important having a sound architecture is for a app. So today we’ll focus on understanding the core concepts of BLoC pattern.

Need For an Architecture

During the starting days of my career as a Android Developer back in 2015, like every novice programmer I couldn’t understand what was the need of an architecture after-all. I sure as hell loved programming, the first few apps I built, worked pretty well and so being the novice programmer I was, I didn’t feel the need to learn anything about architectures.

Time is the best teacher.

Yes, and I learnt it the hard way. By the start of 2016 I had lot of work on my hand and continuously maintaining and adding features to the apps I was working on, became a nightmare for me. It was around this time that I realized how a sound architecture and testing could save me a lot of time. It was around this time when my brain shifted to thinking more like a Developer and less like a Programmer.

What is a BLoC ?

So What is a BLoC? A BLoC is an interface between the data sources in your app (Firebase, Database, Rest API) and the UI. It’s used for State Management in Flutter. It takes the user’s inputs as Events, handles the business logic, calls the repository if necessary and returns a State back to the UI.

Let’s go through all the key parts of the above diagram.

UI : Contains the Widgets and the screen the user interacts with. Every interaction like a button click, a scroll, etc can be mapped to a Event and passed on to the BLoC.
BLoC : A BLoC takes the current State and the Event, maps it to a different State by using the necessary business logic. It is also responsible for interacting with the repository for any data required.
Repository : The repository acts as a interface between a BLoC and all the providers. In the diagram we have multiple providers in form of Firebase and Local DB. The repository is responsible for deciding which of these providers to call.
Providers : The providers call the actual data sources. All the network call related codes and all the DB query related code are kept in these providers. The result from the providers are passed on to the repository.
Data Source : These are the actual data sources.

What’s the Need of all this and How is BLoC Pattern Useful?

Using BLoC pattern has quite some benefits, like :

Helps make code modular.
Makes it easier to test the business logic.
Code re-usability.
The overall layered architecture makes it easy to swap in and out sections. For example switching from a Firebase Provider to a similar REST API Provider can be easily done.

What’s Under the Hood?

Under the hood BLoC uses Dart’s StreamBuilder APIs and RxDart. If you aren’t familiar with streams and reactive programming I’ll highly recommend you checkout this intro.

Implementation in Flutter

We’ll need to implement three things for it:

Events: They are the input to a Bloc. They are commonly UI events such as button clicks. Events are dispatched and converted to States.
States: These are the output of a Bloc. Presentation components can listen to the stream of states and redraw portions of themselves based on the given state.
BLoCs: The BLoCs take the current State and Event as inputs and give States as output. Every BLoC class uses the mapStateToEvent method for this mapping.

A Real Usage Example

Let’s say we have a screen with a login form. The possible bare minimum states, events and flow can be:

From the diagram we can see that the LoginEvent and the starting UninitializedState are passed to the BLoC on button press. The username and password are passed as parameters with the LoginEvent. The BLoC calls the repository, and based on the response received from it (Auth Success/Auth Fail) shows the Home Page or the Login Failed Page.

There can be more possible states and events like Forgot password, new registration, etc. as well.

Summary

I started the series by building up the UI first, now we’re done with major sections of the UI. We’ll start building the rest of the app. In the next post we’ll add Firebase to our app and implement it’s Provider. Later on we’ll build our first set of states, events and BLoC classes for the Register Page. Stay tuned !

Also, here are all the videos/blogs I went through for understanding BLoCs :

That’s all for today. Cheers !

PS: Do not confuse BLoC pattern with flutter_bloc . BLoC is a pattern whereas flutter_bloc is just a package which helps in implementing the pattern.

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.
Connect with me on Twitter or Linkedin or Instagram.
Star the Github repository.
Share the series on Twitter.
Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!