Flutter - BLoC Pattern
Hello Amigos, hope you all are safe 😊😊😊😊😊.
Today I hope to write about the bloc pattern as simple as possible. I think you will get a clear idea on Bloc pattern.
Topics I am going to talk about….
What is BLoC Pattern??
Key Terms in BLoC pattern
How to implement the BLoc
State Management of a widget using BLoC with an example.
What is BLoC Pattern?
Business Logic Components
Introduced by Paolo Soares and Cong hui in Google I/O 18. It is used to separate Business Logic from UI. It leverages Streams functionality in order to manage and Propagate state changes in Flutter.
Before we dive into BLoC we need you to understand some keywords
Stream, StreamController, StreamTransformer, StreamBuilder, sink and stream.
Let’s imagine an instance of flow of water through pipeline.
-Stream, the pipeline is called as a stream
-StreamController, this is what controls the stream
-StreamTransformer, this is what processes the input data
-StreamBuilder, it’s a method that takes stream as an input and provides us with a builder which rebuilds every time there is a new value of a stream
-sink, the property which takes an input
-stream, the property which gives the output out of the Stream
I think you got a bit of an idea about BLoC
What does all this mean?
This is the process that is done by BLoC
Input is taken using the sink property
Output is provided using the stream property
Widget send events to the BLoC via sinks
BLoC notifies the widget via streams
In another word, we add the data into the sink and listen to the streams of data through Stream and updated the UI using StreamBuilder.
Now that business logic and UI components are separated, we may change the Business Logic of the app at any time without any impact on the UI.
Similarly, we may change the UI without any impact on the Business Logic.
Let’s see why we are using BLoC for State Management instead of setState() , InheritedWidget and Scoped Model
SetState()
setState((
{
_myState = newValue
}
);
Problem with this
- The whole widget tree gets rebuilt every time state of even a single widget changes.
-It doesn’t help to separate the UI components and Business logic.
InheritedWidget
Widget build (BuildContext context){
Final state = MyInheritedWidget.of(context).state;
}
Problem with this:
The state is set to final which means it is immutable.
It doesn’t provide any dispose method to free the resources and to avoid data leaks.
Scoped Model
As the model gets more complex it’s hard to keep track of when you should call notifylisteners().
All above didn’t stand as the best way of state management in Flutter and that’s where BLoC pattern stands to be efficient as it deal with all the demerits of these approaches.
Now it’s time to code !!!!!!😉
We will build an app with a navigation drawer and when we tap on the item on the bar, the screen replaces with another screen.
Write the code given below in navigation_c.dart
In first line, we have created a streamController to control stream and sink.
In second line, we have created a object using the navigation_provider.dart
In third line, we have created a stream to get the data.
Then the function used to input the data using streamController.sink.add method
We are using the dispose method to avoid data leakages.
Write the code given below in navigation_provider.dart
In this provider class, we have implement the logic to update the current navigation value.
Now we update the ui using streamController in my_home_page.dart
Here we have used streamBuilder to wrap the body so whenever if there is any change happen, it automatically update the body.
Whenever we tap on any drawer item, first it will close the drawer menu using Navigator.of(context).pop()then it updates the bloc which changes the navigation value and the data flows through the stream and StreamBuilder updates the UI.
If you need the full repo, feel free to check the code in given link.
https://github.com/zeenayouhan/NavigationDrawerApp-BLoCPattern
Thank you so much for reading this article 😊😊.
