BLoC with Flutter
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:
Let’s start by creating our CounterBloc
at lib/bloc/counter_bloc.dart
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
.
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 theCounterBloc
builder
, this is like the build method of our stateful widget but provides us with thesnapshot
which has theCounterBloc
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!
Also let me know if you have any questions about BLoC or Flutter in general:
Twitter: https://twitter.com/YazeedAlKhalaf