using Equatable class with flutter_bloc

Question

Why do we need to use the Equatable class with flutter_bloc? Also, what do we use the props for? Below is sample code for making a state using the bloc pattern in Flutter.

    abstract class LoginStates extends Equatable{}
    
    class LoginInitialState extends LoginStates{
      @override
      List<Object> get props => [];
    
    }

Charcoal

Answer 1

For comparison of data, we required Equatable. it overrides == and hashCode internally, which saves a lot of boilerplate code. In Bloc, we have to extend Equatable to States and Events classes to use this functionality.

 abstract class LoginStates extends Equatable{}

So, that means LoginStates will not make duplicate calls and will not going to rebuild the widget if the same state occurs.

Define State:

class LoginInitialState extends LoginStates {}

Define State with props:

props declared when we want State to be compared against the values which declared inside props List

class LoginData extends LoginStates {
  final bool status;
  final String userName;
  const LoginData({this.status, this.userName});
  @override
  List<Object> get props => [this.status, this.userName];
}

If we remove the username from the list and keep a list like [this.status], then State will only consider the status field, avoiding the username field. That is why we used props for handling State changes.

Bloc Stream Usage:

As we extending State with Equatable that makes a comparison of old state data with new state data. As an example let's look at the below example here LoginData will build a widget only once, which will avoid the second call as it is duplicated.

@override
Stream<LoginStates> mapEventToState(MyEvent event) async* {
  yield LoginData(true, 'Hello User');
  yield LoginData(true, 'Hello User'); // This will be avoided
}

Schnorr

Above answer is clear for status but what about events. Why we need equatable for events? Bloc is allowing to pass same event multiple times. – Bloated

Events extend Equatable for several reasons: -to support event transformers/operators like distinct -ease of testing/comparisons -consistency *Based on the reply from the package create felangel in this issue github.com/felangel/bloc/issues/3277 – Rheumatism

Answer 2

We are using the Equatable package so that we can compare instances of classes without having to manually override "==" and hashCode.

Equatable class allows us to compare two object for equality.

This is the equatable example. Let's say we have the following class:

class Person {
  final String name;

  const Person(this.name);
}

We can create instances of Person like so:

void main() {
  final Person bob = Person("Bob");
}

Later if we try to compare two instances of Person either in our production code or in our tests we will run into a problem.

print(bob == Person("Bob")); // false

In order to be able to compare two instances of Person we need to change our class to override == and hashCode like so:

class Person {
  final String name;

  const Person(this.name);

  @override
  bool operator ==(Object other) =>
    identical(this, other) ||
    other is Person &&
    runtimeType == other.runtimeType &&
    name == other.name;

  @override
  int get hashCode => name.hashCode;
}

Now if we run the following code again:

print(bob == Person("Bob")); // true

it will be able to compare different instances of Person.

So you don't have to waste your time writing lots of boilerplate code when overrides "==" and hashCode.

Use Equatable like

class Person extends Equatable

In bloc case; if you try to use bloc with mutable state you will face with problems without Equatable. It makes resources immutable reduce performance. It’s more expensive to create copies than to mutate a property.

If it is not clear to you that I tried to explain, reading this could help you.

Xenomorphic

but why we need it with flutter_bloc? just when we need to say (state is some state) as example in our bloc? – Charcoal

thank you, should i implement (props) in each class and add my state inside, or it is not important in terms of performance? – Charcoal

Is there an example of how to implement the same but using equatable? Seeing both side-by-side would improve this answer. – Justino

Answer 3

Equatable overrides == and hashCode for you so you don't have to waste your time writing lots of boilerplate code.

There are other packages that will actually generate the boilerplate for you; however, you still have to run the code generation step which is not ideal.

With Equatable there is no code generation needed and we can focus more on writing amazing applications and less on mundane tasks. and the props is a getter of equatable that takes the properties that we want to
although it needs no focus on it i only putted properties to props getter it is not that Important but i suggest you to read more about it in here

Lightner

but why we need it with flutter_bloc? just when we need to say (state is some state) as example in our bloc? – Charcoal

as i said with using that have to waste your time writing lots of boilerplate code. it is like why we use http for api requests or how text style works, you can find a answer for it but it won't be helpful for you – Lightner

no bro, your example is not right, because i need to know why we used it, you said ovveride == and hashcode, but still you didn't answer my question, because my question is about why we need it in bloc (flutter_bloc), so why we need to overrides == and hashCode in bloc? :) – Charcoal