BLoC — The Magic of Single State Class 💙
We have all used BLoC as a State Management tool for our Flutter applications. Normally, we have been using multiple state classes in our BLoC. In this article, let’s explore how you can use just a single state class with copyWith methods to streamline your state management!
Introduction
BLoC is one of the widely used State Management in Flutter Community and production-level apps. However, most of the developers use multiple state classes for BLoC. By multiple state class, we mean having a LoadingState, LoadedState, ErrorState, etc.
But, there are a few disadvantages to this approach. One drawback is the potential increase in complexity and code duplication. With multiple state classes, developers need to manage and coordinate state updates across different components, which can lead to more intricate communication logic and potential bugs. Additionally, having numerous state classes may result in a larger codebase, making it harder to navigate and maintain. It can also introduce challenges when it comes to sharing state between components, as they may require additional synchronization mechanisms. Overall, the use of multiple state classes in BLoC can diminish code simplicity and increase the cognitive load on developers.
Let’s see how you can make the best use of a Single State Class in your BLoC to overcome these drawbacks!
Traditional Way/Multiple State Classes BLoC
We will take an example of a simple API call which is made through BLoC. Let’s first see what it looks like with multiple state classes:
home_state.dart
home_bloc.dart
And here’s how we would be using this in our UI:
Pretty simple, right? But what if you want to access photosModel when there is an error too? There are many use cases where you want to access certain variables in a type of state which doesn’t have that variable’s scope.
So, for this, it would be a better option to have a single state class which has the scope of all the variables present 🤩
Let’s now work on our single state class which will do the same thing but with a single state class and an enum for our app status like initial, loading, loaded, and error.
Single State Class BLoC
Let’s now see how we can manipulate BLoC to use a Single State Class with an enum and copyWith method.
home_state.dart
So in the above code snippet, we have a single class called HomeState. There is a static method called initial() which just returns an object of HomeState with initial values. There is another method called copyWith method that updates the value based on the value passed in the method. If for a particular parameter, any value is not passed, it takes the value passed to the HomeState constructor. So, for example, when we use copyWith method and don’t pass any value for status, it will assign HomeStatus.initial because that’s what we passed in the initial method.
Now, let’s see how the bloc file will look:
home_bloc.dart
In the above code snippet, you can see that we emitted the state object by updating the value of status and later when API was successful, we emitted the state object by updating the value of status and photosModel.
That’s simple, right? Now, in the UI, we just need to check the value of the status. Let’s see what it looks like:
Anddddd, that’s it 🥳
We can now just use a single state class with an enum for different statuses of the app!
Check out the entire example in GitHub Repository 💙
Don’t stop, until you are breathing!💙
- Abhishek Doshi
