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.
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
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)
also States (loading_states.dart)
- LoadingInitial() (Initial State)
and finally the bloc itself
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.