Getting Started With Flutter BLoC Pattern

Hey There!

In the last story, I told you about ‘How to start with flutter?‘…so now move ahead & will learn how to structure the flutter project using the BLoC pattern.

How to design the structure of an application is one of the most discussed issues that arise in the development of applications?

Each one seems to have his favorite architectural model with an acronym of fantasy. iOS and Android developers know Model-View-Controller (MVC) and have used this model as a default selection when building apps.

The model and view are split, with the controller sending signals to one another. But Flutter brings a new responsive style that is not completely compatible with MVC.

A variation of this classic model has been introduced to the Flutter community: BLoC. BLoC signifies Business Logic Components. The essence of BLoC is that everything in the application should be depicted as an event flow. The BLoC stands in the middle and manages the conversation.

Related read: State Management Using Flutter BloC

Core Concept

Stream is the BLoC’s foundation, and you must familiarise yourself with the concept.

Stream provides the means to receive a sequence of events. Each event is either a data event, referred to as an element of the Stream, or an error event, a notification that something failed.

Receiving Stream Events

A Stream can be created in several ways and used in the same way: the asynchronous loop, commonly known as waiting iterations on events in a Stream, is like a loop for iterations on an Iterable.

For more understanding, see the below example:

So, you see where the streams will help within the BLoC?

You will need interaction in-app to listen to the emerging state, and the BLoC does that.

Cubit and BLoC

Cubit and BLoC are the two most important & needed concepts that we need to understand.

After looking at the image, the question in your mind is whether both are the same. Just the cubit is an old version of the BLoC, or we can say the BLoC extends the cubit.

The cubit is a special type of stream component related to UI..it emits the states and rebuilds the UI.

But as we compare it to the BLoC, a cubit is not a stream component. We can say it holds an empty stream with a state.

Now you may ask me why we need to use BLoC ?? is cubit not enough? Then remember, the cubit is not a part of a stream, it only includes component-based, but it emits the state and modifies the UI. On the other hand, the BLoC emits the state and receives a stream of events.

That’s why the BLoC is the brain of complex and advanced apps.

Flutter BLoC Concepts

You know that everything in the flutter has a UI component and widgets. And we need to use BLoC to UI ..so many of us think we need to add the BLoC for every widget.
Wrong….
You don’t need to add the BLoC for every widget.

BLoC Provider

BLoC Provider is a one-flutter widget that provides the bloc to all its children’s widgets.
We can call it a dependency injection widget..which has a single instance and is provided to multiple widgets, like a tree structure.

Please look into the below example, which shows how we instantiate BLoCProvider.

class FilesPage extends StatelessWidget {

 const FilesPage({Key key}) : super(key: key);

 @override

 Widget build(BuildContext context) {

   return BlocProvider(

     create: (_) => FilesCubit(),

     child:Center(

child:Text(“Center”));,

   );

 }

}

}

Using the above code, you can provide the BLoC to the FilePage class’s widgets, and the filesCubit will emit the states and receive the respective component’s stream.

So, this is to provide the BLoC, but what about building it to receive it or assigning it to widgets.
Now, introducing you to the second component of BLoC

BLoC Builder

The BLoC build helps you to rebuild the UI of state changes. This magical component helps you to rebuild the UI either, cubit or BLoC emits the state.

Rebuilding a large amount of code in the app takes a lot of time, so you can use the BLoC and wrap your widgets into it.

BLoC builder requires bloc and cubit both while rebuilding the widgets. And the builder returns the widgets with a responsive state.
Like-

class MobileFilesScreen extends StatelessWidget {

 @override

 Widget build(BuildContext context) {

   return BlocBuilder<FilesCubit, FilesState>(builder: (context, state) {

   Return Center(

child:Text(“Center”));

}

You can see the above example returns the FilesCubit and FilesState with the rebuild of UI.

If you want to try it, you should add the following packages to your pubspec.yaml

https://pub.dev/packages/bloc_pattern

https://pub.dev/packages/flutter_bloc