Flutter development series
Part 4 – BLoC pattern in Flutter

Welcome to part 4 of the Flutter development series. In this post, we will be exploring the BLoC pattern in Flutter.

In the last post of the series, we setup the repository to save and retrieve loyalty cards. Now let’s use BLoC to implement the business logic of our loyalty app.

What is the BLoC pattern?

BLoC is a pattern, it stands for Business Logic Component.

BLoC makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.

http://bloclibrary.dev/#/whybloc

It is also a predictable state container. Furthermore, it gives us the possibility of knowing, saving or restoring the state in our app at a given point in time.

Adding the BLoC library to your project

As usual, let’s start adding the dependency to the project. Edit the pubspec.yaml file:

And install it:

$ flutter pub get

We need all the 3 new dependencies to be added to the project.

• equatable to make the class comparable, so we don’t need to implement that ourselves.
• bloc is purely dart and contains the foundations of the BLOC pattern.
• flutter_bloc gives us some widgets, so we can easily bind bloc to our UI.

Loyalty App Architecture

Before we move to the implementation, let’s break our application into different layers and understand each of them.

• Presentation layer: Responsible for the UI of the application. In short, this is where all our widgets will be.
• Domain layer: This is where the application logic is contained.
• Data layer: The layer responsible for containing the repositories and storing the data.

Implementing BLoC in Flutter

Now that we have covered the basics, let’s get down to business.

Create a new class and name it loyalty_bloc.dart. Don’t worry, we are going to go through each line of code and understand what’s happening in the code bellow.

Events and States in BLoC

Every time we want to change the state of our application, we start by emitting an event. Consequently, The function mapEventToState will be called, handle the event and return a state accordingly.

Implementing the BLoC States and Events

As you can see, our loyalty_bloc.dart needs the LoyaltyEvent and the LoyaltyState types. Let’s implement it.

The Fetch event will be emitted when the app starts. As a result, we will then fetch the loyalty cards from the repository and return a new state.

The implementation of mapEventToState can return a few different states:

• LoyaltyLoaded: If we have loyalty cards and succeeded fetching it.
• LoyaltyEmpty: If there are no loyalty cards.
• LoyaltyLoading: Shows a progress indicator.
• LoyaltyError: Well, if there is an error.

BLoC – Ui implementation

Now that we have implemented our BLoC class. Let’s hook it up to our User Interface.

For the sake of keeping this post concise. I’ll omit some of the UI specifics. However, you can always go to the Loyalty app Github repository and have a look at the code.

BlocProvider

BlocProvider is part of the flutter_bloc library and its responsibility is to provide dependencies to child Widgets in the tree. It is a simple DI framework.

Add the BlocProvider widget to the top of the widget tree, in our case the main.dart file:

BlocBuilder

If you have used StreamBuilder before you will find BlocBuilder quite familiar.

Now, do you remember the states we created? LoyaltyLoaded, LoyaltyLoading, LoyaltyEmpty, LoyaltyError?

BlocBuilder is the widget which handles the UI changes when the state changes. Let’s see how we use it:

BLoC – Unit testing

Well. We wouldn’t forget the tests. Would we?

Notice that the test requires a good number of lines of code. For the sake of this post I kept it simple and “raw”. However, if you want, there is a pretty good library called bloc_test which aims to reduce the amount of boilerplate code.

Conclusion

If after we went through all that, you are still not sure about BLoC. I believe I failed you.

I mean, BLoC is really impressive. It’s not only a library that helped separating presentation and business logic in our application. In addition to that, it also provided state management, DI, reactive UI and more. Besides, it made our app easily testable.

Having said that, please let me know if there is something I missed or anything you would like a more detailed explanation about. Any feedback is more than welcome.

Remember that all the code snippets you see at the Flutter development series posts is part of our Loyalty App and it’s available on Github.

Thank you for your time and I hope you learned enough of the BLoC pattern in Flutter to be able to use it in your future projects.

Next post in the series will cover some cool stuff:

Flutter development series – Part 5 – BLoC pattern and navigation in Flutter