Introduction to BLoC pattern [A Beginner’s guide]

Hi there, I am here once again to share my experience with BloCPattern and I will try to demonstrate how we can manage the State of a Login-Flow with the help of this State Management procedure.

So What is BLoC?

BLoC is nothing but Business Logic Component. It is a mechanism to manage the state of your App; we just need to send an event to our Bloc and it will give us a State.

Here I have tried to demonstrate the logic when I was taking a Webinar, 😝

So, the main logic is:

From the UI, we will send an event to the BLoC, for example, clicking a button and it will invoke a function to the class which has extended the Bloc Class, there some calculations that will be going on and we will get a state in return.

The Bloc class takes 2 parameters.

class Demo extends Bloc<event,state>{ return state}

The first parameter is your event and the second one is your state. The state that is to be returned will be decided depending upon the event.

In this app, we will learn how we can manage the Login flow of an app and understand the BLoC Pattern.

So what we are going to achieve?

In the initial state, the state will be loggedOut and it will give us the LoginScreen() where the user will put the credentials. If the login credentials match then the state will change into loggedIn and it will give us the HomePage(). If the credentials are wrong then the state will change into errorLogin() and will return an ErrorScreen().

So, we have to import 2 packages, bloc and flutter_bloc.

Then, we will go to the logical section, ie, the Business Logic part. First of all, let’s create an enum where all the possible states are defined- LoggedIn, LoggedOut, ErrorLogin.

Now, let’s make an event class and here we will define which parameters will come to the bloc. We will only deal with now emailID and passWord.

Next comes the LoginBloc, where all the operations will take place.

The LoginBloc() class extends to the Bloc class which came from the bloc package we have imported. The Bloc takes two parameters as discussed earlier. So here we are giving the LoginEvent and LoginState.

There is a getter named initialState which returns initially the loggedOut State. (for this app only. here can be any state you want, depending on the scenario of your App)

There is a stream of states where we are passing the event and then the calculation is computed. I kept this simple calculation for example, here can be any logic or calculation you want and we are yielding a state depending upon the calculation. yield means return, but the return keyword stops executing the function but yield doesn’t.

So we have done with the BusinessLogic.

Next, let’s go to the UI Part. First of all, the main.dart,.

In MaterialApp we will call BlocProvider() which will pass take a Bloc and Child. So we will pass the LoginBloc() and it will have a child DeciderWidget(), The child will get access to the Bloc. So the DeciderWidget() will get a state from LoginBloc() and will return screens like LoginScreen(), HomePage(). ErrorScreen() depending on the state.

Now we are in the DeciderWidget(). Here is the BlocBuilder which will take the Bloc and the state.

Here is the Switch case, which decides which screen is to be returned based on the provided state.

Next comes the LoginScreen(), from where we will trigger an event with user credentials to the Bloc.

We have taken an instance of the Bloc and triggering the function with the help of it.

final LoginBloc loginBloc = BlocProvider.of<LoginBloc>(context);
onPressed: () {
  loginBloc.add(
    ImplementLoginEvent(
      emailController.text,
      passwordController.text,
    ),
  );
},

Let’s get a glimpse of the total app.

Here are the Links of my previous Blogs:

How to use Provider to parse API

Fetch Cloud Firestore Data Stream in your Flutter App using StreamProvider &add data to Cloud…