Flutter Equatable Plugin

Updated:

Equatable 이란?

  • Equatable 플러그인은 한 인스턴스오 ㅏ다른 인스턴스가 같은 인스턴스인지 판단을 쉽게 할 수 있게 해주는 플러그인입니다. 일반적으로 인스턴스를 두번 생상하고 이들을 ‘==’ 비교하면 항상 false 가 나옵니다. (값 베이스가 아니라 메모리 위치 비교로 포인터가 다르기 때문에)
// 단순 비교 값에 나타난 예시의 값


class Person {
  final int id;
  final String name;
  final int age;

  Person({
    required this.id,
    required this.name,
    required this.age,
  });
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  renderText(String text) {
    return Row(children: [Text(text, style: TextStyle(fontSize: 20.0))]);
  }

  @override
  Widget build(BuildContext context) {
    final person1 = Person(id: 1, name: "John", age: 50);
    final person2 = Person(id: 1, name: "John", age: 50);

    return Scaffold(
      appBar: AppBar(
        title: Text('Equatable Demo'),
      ),
      body: Column(children: [
        // person1 과 person2 의 value 값은 다 같기 때문에 개별적으로 다 비교 한다면 true 이지만 object 자체를 비교하는 경우에는
        renderText('person1.id == person2.id : ${person1.id == person2.id}'),
        renderText(
            'person1.name == person2.name : ${person1.name == person2.name}'),
        renderText(
            'person1.age == person2.age : ${person1.age == person2.age}'),
        renderText('person1 == person2 : ${person1 == person2}'),
      ]),
    );
  }
}

스크린샷 2021-11-01 오전 10 00 18

메모리 포인터 값이 다르기 때문에 person1 == person2 이 false 가 됨

Equatable package 사용하기

# in pubspec.yaml 에 dependencies 추가하기

dependencies:
  equatable:
class Person extends Equatable {
  final int id;
  final String name;
  final int age;

  Person({
    required this.id,
    required this.name,
    required this.age,
  });

  // Equatable override (값을 비교해서 메모리 포인터가 달라도 == 으로 비교 해주는것 override)
  @override
  // TODO: implement props
  // list 값을 가지는 getter 가 하나 생성되는데 원하는 unique 의 값을 넣으면 됨
  List<Object?> get props => [this.id];
}

ID 값만 값으면 equatable 이 되게끔 세팅 하면 false 에서 true 로 바뀌게 됨

image

// 모든 값이 같게 세팅을 하면
  List<Object?> get props => [this.id, this.name, this.age];

// 인데 여기서 name 하나라도 틀리게 되면 false 가 됨
// person2 의 name 의 값을 다르게 하면 name 만 false 이고 전체 비교도 false 가 됨
final person1 = Person(id: 1, name: "John", age: 50);
final person2 = Person(id: 1, name: "John2", age: 50);

image


🔶 🔷 📌 🔑

Reference

equatable pub.dev - https://pub.dev/packages/equatable

Flutter: Equatable & It’s usage in Bloc - https://medium.com/flutterworld/flutter-equatable-its-use-inside-bloc-7d14f3b5479b

코드 팩토리 - https://youtu.be/9-FGJHTRRW0

Categories:

Updated:

Leave a comment