[flutter] 플러터에서 Equatable을 활용한 데이터그리드 구현

12 Dec 2023

flutter

플러터(Flutter)는 모바일 앱 및 웹 앱을 개발하기 위한 Google의 오픈 소스 프레임워크로써, 손쉽게 사용할 수 있는 UI를 제공하는 것으로 유명합니다. 플러터에서 데이터 그리드를 구현하기 위해 Equatable 라이브러리를 활용해보겠습니다.

Equatable이란?

Equatable은 두 객체를 비교하는 데 사용되는 Dart 언어의 라이브러리입니다. 이 라이브러리를 사용하면 클래스의 인스턴스가 동일한 값을 가지는지 확인할 수 있습니다. Equatable 라이브러리를 사용하면 == 연산자를 오버라이드 할 필요 없이 객체를 비교할 수 있습니다.

Equatable을 사용하여 데이터 모델 만들기

다음은 Equatable을 사용하여 간단한 데이터 모델을 만드는 예제 코드입니다.

import 'package:equatable/equatable.dart';

class User extends Equatable {
  final String id;
  final String name;
  final int age;

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

  @override
  List<Object?> get props => [id, name, age];
}

위의 코드에서 Equatable을 통해 User 클래스를 만들고, id, name, age 속성을 설정하였습니다.

Equatable을 사용한 데이터 그리드 구현 예시

이제 Equatable으로 정의된 데이터 모델을 사용하여 데이터 그리드를 만들어보겠습니다. 다음은 Equatable을 활용하여 데이터 그리드를 구현한 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:equatable/equatable.dart';

class User extends Equatable {
  final String id;
  final String name;
  final int age;

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

  @override
  List<Object?> get props => [id, name, age];
}

class UserGrid extends StatelessWidget {
  final List<User> users;

  UserGrid({required this.users});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 2,
      ),
      itemBuilder: (context, index) {
        final user = users[index];
        return Card(
          child: ListTile(
            title: Text(user.name),
            subtitle: Text(user.age.toString()),
          ),
        );
      },
      itemCount: users.length,
    );
  }
}

위의 코드에서는 Equatable으로 정의된 User 클래스를 사용하여 UserGrid라는 데이터 그리드를 만들었습니다.

Equatable은 간단하면서도 효과적인 방법으로 Dart에서의 객체 비교를 할 수 있도록 도와줍니다. 데이터 그리드 뿐만 아니라 객체 비교가 필요한 모든 상황에서 Equatable을 활용해보세요!

참고 자료:

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