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.

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:

Receiving Stream Events

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.

Cubit and Bloc

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

coma

Conclusion

For your structurize code, the BLoC pattern is the best practice to make you a good coder and for the optimized app.

Must-Try!

Thank You & Happy Fluttering!!!!

Kiran

Kiran is an android & flutter developer with around 3.5 + years of experience in developing mobile applications. She is self-motivated, a quick learner & result oriented. She likes to learn new technologies and grow with it. She is good at developing clean, reusable, and latest technologies oriented code with interactive apps.

Get in touch for a detailed discussion.

Hear From Our 100+ Customers
coma

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author
ADDIE WOOTTEN
CEO, SMILINGMIND
coma

We had very close go live timeline and MindBowser team got us live a month before.

author
Shaz Khan
CEO, BuyNow WorldWide
coma

They were a very responsive team! Extremely easy to communicate and work with!

author
Kristen M.
Founder & CEO, TotTech
coma

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author
Chacko Thomas
Co-Founder, TEAM8s
coma

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author
Dave Dubier
Founder & CEO, MangoMirror
coma

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author
Hieu Le
Executive Director of Product Development, Innovation Lab
coma

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author
Alex Gobel
Co-Founder, Vesica
coma

Mindbowser is professional, efficient and thorough. 

author
MacKenzie R
Consultant at XPRIZE
coma

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author
Laurie Mastrogiani
Founder, S.T.A.R.S of Wellness
coma

MindBowser was great; they listened to us a lot and helped us hone in on the actual idea of the app.” “They had put together fantastic wireframes for us.

author
Bennet Gillogly
Co-Founder, Flat Earth
coma

They're very tech-savvy, yet humble.

author
Uma Nidmarty
CEO, GS Advisorate, Inc.
coma

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author
Katie Taylor
Founder, Child Life On Call
coma

As a founder of a budding start-up, it has been a great experience working with Mindbower Inc under Ayush's leadership for our online digital platform design and development activity.

author
Radhika Kotwal
Founder of Courtyardly
coma

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author
Michael Wright
Chief Executive Officer, SDOH2Health LLC
coma

They are focused, patient and; they are innovative. Please give them a shot if you are looking for someone to partner with, you can go along with Mindbowser.

author
David Cain
CEO, thirty2give
coma

We are a small non-profit on a budget and they were able to deliver their work at our prescribed budgets. Their team always met their objectives and I'm very happy with the end result. Thank you, Mindbowser team!!

author
Bart Mendel
Founder, Mindworks
coma

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author
George Hodulik
CEO, Stealth Startup, Ex-Google