using Equatable class with flutter_bloc

Question

why when we need to use Equatable class with flutter_bloc? , and also what about the props, for what we need it? this is a sample code for make a state in bloc pattern in flutter, please i need a detailed answer. thank you in advance

abstract class LoginStates extends Equatable{}

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

}

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
}

Detail Blog: https://medium.com/flutterworld/flutter-equatable-its-use-inside-bloc-7d14f3b5479b

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.

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