Flutter BLoC Pattern
State Management Tool in Flutter🚀
As the app grows it becomes really essential to maintain the states. One such state management technique in flutter is the BLoC pattern.
Flutter BLoC is known to effectively manage various states within the Flutter app. BLoC in simple words is a State Render, where the Event goes as an input to the BLoC and State will be the output of the BLoC. Here for Event, you can imagine any simple example such as the onPressed, onTap, onLongPressed and for State, it is nothing but the widget tree that we want to build or render at runtime.
😇Hope you got an idea of what BLoC is, and the functionality as well. Now let as understand it with an example.
Dependencies
flutter_bloc: ^3.2.0
equatable: ^1.1.1
In a brief manner let me first explain what the example is all about…📢
We shall be having two two TextFormField where we will be entering the Username and the City. Once the user fills out the two fields and presses the submit button provided below, We shall be navigating the user to the next page. So in this example we will be having an Event, which is the submit button press and three States, which are MyblocInitial, FormLoading and the FormLoaded states.
MyblocInitial
In MyblocInitial state we shall be having the initial Widget tree which contains the two TextFormFields that is used for accepting the input from the user.
here the buildInitialInput() is a custom function that returns the widget. In our case, it is the two TextFormFields (Username and City).
FormLoading
In this FormLoading state we will be having a CircularProgressIndicator() widget. This FormLoading state is called before each state change, just to have a visualization and for loading animations.
the loadingwidget is again a function that returns the CircularProgressIndicator() widget.
FormLoaded
In FormLoaded state we shall be providing the Navigator for switching to the next page.
Till now we have discussed the function that need to be written inside the dart file which will be rendering the UI(i.e., main.dart in our case), Let’s now look into the code that need to be written inside the BLoC.dart file. So inside this file is where we will be writing the conditions such as what state need to be rendered for the event triggered.
The code inside the file is as follows.,
In the above code snippet 👆 SubmitForm [line no:9] is the event that gets triggered on pressing the submit button and if it is so (if button is pressed [after entering the Username and City fields]), then this condition gets satisfied and we shall be yielding the FormLoadingand FormLoaded states which we have discussed above already.
Thus we have successfully implemented simple page navigation using Flutter BLoC Pattern.
If my above explanation wasn’t clear enough, then check out the video tutorial 👇 for this Flutter BLoC pattern technique, where I have explained step by step procedure from setting up the BLoC (initial setup) till the implementation part (A complete guide). kindly have a look at it…
Flutter BLoC : Part-1
Flutter BLoC : Part-2
Flutter BLoC : Part-3
Get the Complete code here 👉 Source Code for Flutter BLoC
To know more about BLoC and other Flutter Widgets…?🤓 head over to my channel vijaycreations 🚩
Other Contributions.,
Other related posts.,
Happy to know that you learnt from my post, Thanks for your time. Have a good day, Bye!!!☺☺
