BLoC with Flutter

4 min readDec 14, 2021

So you started using Flutter and know what widgets are. You can also build cool and interesting user interfaces, hopefully. But when it comes to state management, you struggle to find a good one or struggle to use any in the first place.

You have been hearing about BLoC and that it is a robust option used by companies for large and complex projects. That got you interested in BLoC and its power! 😁

BLoC stands for Business Logic Component. The gist of it is that everything in your app should be represented by streams.

Any BLoC can split into 3 parts:
1) BLoC
2) Events
3) State or States (depends on what you prefer)

I prefer learning from code and text and that’s why this blog will contain both to make sure you understand BLoC from the ground up.

We will not use flutter_bloc, we will build our own bloc to understand how BLoC works under the hood. And don’t worry, it will be easy and you will be happy at the end.

We will be creating a BLoC for our Counter app, I know you might say it is simple but trust me you will learn a lot of stuff about BLoC from this simple example.

What is a stream?

A stream is a sequence of asynchronous events.

Imagine a river that is flowing from point A to point B. If you drop something at point A, it will reach point B.

What are Sinks and Streams?

So in dart, we use a StreamController to work with streams. Each StreamController has a Sink and a Stream .

In the diagram above, we can say that the river is the StreamController and “Point A” is the Sink and “Point B” is the Stream we receive. It might be confusing at the beginning but hopefully this example clears things up.

What does a BLoC contain?

First of all, each BLoC has two streams inside it.

First stream is used for the Events.
Second stream is used for the State.

For the outside world, we only see only:

the events sink, the place that we add events to.
the state stream, the place we listen to state at.

Both the events sink and state stream are used internally by the BLoC to manipulate the state and talk to repositories. They should not be used outside the BLoC. This will make sense in a bit once we start writing code!

Coding Part:

Now we will start the coding part. If you want to follow with me, download the starter code from GitHub:

GitHub - YazeedAlKhalaf/bloc_tutorial at starter_code

github.com

Let’s start by creating our CounterBlocat lib/bloc/counter_bloc.dart

Counter Bloc file

The code above BLoC that holds a counter state and based on specific events it manipulates the state, which is in this case and int .

The CounterEvent can be anything, we used an enum, but it can be a class for example. You could use classes when your events have some data to pass on to the BLoC like a submit form button event.

Next we should make our user interface use the CounterBloc . Let’s start by creating a variable for the CounterBloc in our CounterScreen state and initialize it inside the initState .

Part from Counter Screen file

After we have initialized our CounterBloc instance inside of the CounterScreen , we can use it to add events that fire when the buttons are clicked.

We have three buttons in our CounterScreen that look like this:

Remember that we add events to the eventSink that we exposed earlier from the BLoC using a getter.

Only one thing remains now, and that is showing the state to the user. Right now the state is changing inside the BLoC when the user clicks the buttons but it is not being shown to them. The text, "0", is static but that will change right now!

We wrapped the text widget inside a StreamBuilder , the StreamBuilder takes two required named parameters to function properly:

stream , for us this is the state stream from the CounterBloc
builder , this is like the build method of our stateful widget but provides us with the snapshot which has the CounterBloc state. It also builds whenever the state/stream changes, which is exactly what we want!

We are finally done with the Counter Bloc example!

In conclusion, BLoC is a robust method to build your Flutter app with. One of the best things about BLoC is that it is really easy to test!

I enjoyed making this blog tutorial about BLoC and hopefully you have enjoyed reading it!

Code is on GitHub:

GitHub - YazeedAlKhalaf/bloc_tutorial

You can't perform that action at this time. You signed in with another tab or window. You signed out in another tab or…