Equatable In Flutter

Equatable in Flutter is a package used to compare the object.

If we want to compare objects normally then we have to override the == operator as well as hashCode.
Overriding == operator is a lengthy and very tedious process as we need to write extra code for this.
If we fail to override it correctly it will not behave as we expect.

So, if you want to compare objects then Equatable is a convenient package for defining classes.
Classes can be compared for equality based on their properties rather than their identity. This is especially useful when you want to compare two instances of a class based on their content rather than their memory address.

Read more about our Flutter app development services.

How to Implement Equatable

First of all, we need to add a dependency to pubspec.yaml file.

dependencies:
  equatable: ^2.0.5

dependencies:

equatable: ^2.0.5

Let’s take a simple example to understand the scenario.

Person. dart


class Person {
  final String personName;
  final String image;

  const Person({
    required this.personName,
    required this.image,
  });


}

Let's create a two object of the above class and compare them.

class Person {

final String personName;

final String image;

const Person({

required this.personName,

required this.image,

});

}

Let's create a two object of the above class and compare them.

 final Person person1 = const Person(
      personName: 'Person1 ' , image:  'assets/images/person1.png');
  final Person person2 = const Person(
      personName: 'Person1' , image:  'assets/images/person1.png');

final Person person1 = const Person(

personName: 'Person1 ' , image: 'assets/images/person1.png');

final Person person2 = const Person(

personName: 'Person1' , image: 'assets/images/person1.png');

If we compare the above objects they are not the same the reason for this is Dart doesn’t compare the objects by their value.

Now, Let’s use Equatable in Person class.

import 'package:equatable/equatable.dart';

class Person extends Equatable{
  final String personName;
  final String image;

  const Person({
    required this.personName,
    required this.image,
  });

  @override
  List&lt;Object?&gt; get props =&gt; &#091;personName,image];


}

Now if we compare the previous object then they will be same.

import 'package:equatable/equatable.dart';

class Person extends Equatable{

final String personName;

final String image;

const Person({

required this.personName,

required this.image,

});

@override

List<Object?> get props => [personName,image];

}

Now if we compare the previous object then they will be same.

Full code

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Equatable Demo',
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State&lt;MyHomePage&gt; createState() =&gt; _MyHomePageState();
}

class _MyHomePageState extends State&lt;MyHomePage&gt; {



 
  final Person person1 = const Person(
      personName: 'Person1 ' , image:  'assets/images/person1.png');
  final Person person2 = const Person(
      personName: 'Person1' , image:  'assets/images/person1.png');


  comparePerson(BuildContext context) {
    if (person1 == person2) {
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text("Persons are equal ")));
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text("Persons are Not equal")));
    }
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(

      appBar: AppBar(
       
        title:  Text('Flutter Equatable Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: &#091;
            PersonDetailWidget(
                name: person1.personName, image:person1.image ),
            ElevatedButton(
              style: ButtonStyle(
                backgroundColor: MaterialStateProperty.all(Colors.red),
              ),
              onPressed: () {
                comparePerson(context);
              },
              child: const Text("Compare person"),
            ),
            PersonDetailWidget(
                name: person2.personName, image:person2.image ),
          ],
        ),
      ),
    );
  }

  PersonDetailWidget({
    required name,
    required image,
  }) {
    return Column(
      children: &#091;
        Image.asset(
          image,
          fit: BoxFit.contain,
        ),
        const SizedBox(height: 5),
        Text(
          name,
          style: const TextStyle(
            fontSize: 16,
            fontWeight: FontWeight.w800,
          ),
        ),
        const SizedBox(height: 5),
       /* Text(
          age,
          style: const TextStyle(
            fontSize: 14,
            fontWeight: FontWeight.w500,
          ),
        ),*/


      ],
    );
  }
}

100

101

102

103

104

105

106

107

108

109

110

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);

@override

Widget build(BuildContext context) {

return MaterialApp(

debugShowCheckedModeBanner: false,

title: 'Flutter Equatable Demo',

theme: ThemeData(

primarySwatch: Colors.grey,

home: const MyHomePage(),

);

}

class MyHomePage extends StatefulWidget {

const MyHomePage({Key? key}) : super(key: key);

@override

State<MyHomePage> createState() => _MyHomePageState();

}

class _MyHomePageState extends State<MyHomePage> {

final Person person1 = const Person(

personName: 'Person1 ' , image: 'assets/images/person1.png');

final Person person2 = const Person(

personName: 'Person1' , image: 'assets/images/person1.png');

comparePerson(BuildContext context) {

if (person1 == person2) {

ScaffoldMessenger.of(context)

.showSnackBar(const SnackBar(content: Text("Persons are equal ")));

} else {

ScaffoldMessenger.of(context).showSnackBar(

const SnackBar(content: Text("Persons are Not equal")));

}

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text('Flutter Equatable Example'),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: [

PersonDetailWidget(

name: person1.personName, image:person1.image ),

ElevatedButton(

style: ButtonStyle(

backgroundColor: MaterialStateProperty.all(Colors.red),

onPressed: () {

comparePerson(context);

child: const Text("Compare person"),

PersonDetailWidget(

name: person2.personName, image:person2.image ),

);

}

PersonDetailWidget({

required name,

required image,

}) {

return Column(

children: [

Image.asset(

image,

fit: BoxFit.contain,

const SizedBox(height: 5),

Text(

name,

style: const TextStyle(

fontSize: 16,

fontWeight: FontWeight.w800,

const SizedBox(height: 5),

/* Text(

age,

style: const TextStyle(

fontSize: 14,

fontWeight: FontWeight.w500,

),*/

);

}

Conclusion :

In this blog, we have tried to explain how we can use Eqatable for comparison.

Thanks for reading this blog. Feel free to share your ideas or any feedback.

Pankaj Tyagi

Pankaj excels in Kotlin and Flutter, creating robust e-commerce applications. Delivers seamless functionality, scalable solutions, and innovative designs to enhance user experiences and support business growth effectively.

29 Sep, 2023
Created by - Pankaj Tyagi

. . .

Equatable In Flutter

How to Implement Equatable

Full code

Conclusion :

Leave a Comment Cancel Reply

Message Sent!