BLoC (Local & Global) State Management with Flutter

Hi, This is my first Medium article and I wanted to share with you few things I know about the BLoC design pattern.. so let’s jump to it.

Firstly, I assume that you already know what state management means and all of the reactive programming such as Provider, Redux, MobX or Bloc.

Then, this article will cover how we can handle the local & global state management in our apps using Flutter and Bloc.

I’m using the Bloc VS Code extension to make it easier and quicker when generating a bloc, so here I created new bloc using the extension itself and now we have those 3 files inside the bloc folder

right click on the root (lib) and choose the “Bloc: New Bloc” to create this folder (this option will be available after installing the extension we talked about)

Here I named it LoadingBloc and you may wonder why? what is this?

OK, the reason I named it because it could be the simplest bloc we may understand since we’re playing with both UI and Logic.

we have Events (loading_events.dart)

• StartLoading()
• StopLoading()

the events file

also States (loading_states.dart)

• LoadingInitial() (Initial State)
• Loading()

the states file

and finally the bloc itself

the bloc file

and the bloc as you can see when you trigger an event will return a state back to the UI (Loading or just Initial(Stop))

All of the above was just a refresh start of the whole point.. now how can we manage the state locally or globally?

Managing the Local State

The local state in the bloc pattern means that you can create an instances as many as you want for a specific widget or page.

Here, we have to different pages (HomePage, SecondPage) and each one of them has a different instance of the same bloc.. the reason I did this because in some cases we want to perform a specific task in different widgets or pages and that’s why we have a local states, and each bloc instance is completely separated from others.

as you can see above we’re providing a different instances of the LoadingBloc when routing the pages and not providing the bloc itself to the entire widget tree and the app.

Managing the Global State

The global state unlike the local state can be accessible from all of the tree widget of the app and has the same state, let suppose that we have this bloc LoadingBloc and from the (HomePage) we triggered the (StartLoading()) event, then we get a state (Loading()) and this state can be accessible from the entire widget tree and also triggering the event to the bloc itself.

Here’s the code where we can handle a global state..

Notice that in the MaterialApp we wrapped the widget by BlocProvider which then will provide the app by the LoadingBloc and we can use MultiBlocProvider for multiples blocs.

I guess that’s it for now.. we know when to use a the local or global state.

I hope I gave you a little thing to know about the bloc and how to use it.

You can visit me at Instagram, Facebook, Github..

Thanks.