[flutter] Riverpod를 사용하여 앱의 데이터 필터링을 관리하는 방법은 어떻게 되나요?

04 Dec 2023

flutter

이번 블로그에서는 Flutter 애플리케이션에서 데이터 필터링을 관리하는 Riverpod를 다룰 것입니다. Riverpod는 Flutter의 상태 관리 솔루션 중 하나로, 다른 상태 관리 라이브러리보다 간편하게 상태를 관리할 수 있습니다.

Riverpod 소개

Riverpod는 Flutter의 비동기 의존성 관리 솔루션인 Provider 패키지의 개선 버전입니다. Provider 패키지가 상태를 제공하는 데 사용되는 반면, Riverpod는 상태 관리와 의존성 주입을 통합하여 앱의 상태 관리를 단순화합니다.

데이터 필터링을 위한 Riverpod 사용하기

필터링할 데이터 모델 생성하기 필터링할 데이터 모델을 생성합니다. 예를 들어, 사용자 이름과 나이를 가진 “User” 데이터 모델이 있다고 가정해보겠습니다.

class User {
  final String name;
  final int age;

  User(this.name, this.age);
}

필터링 상태 관리하기 필터링 상태를 관리하기 위해 “Filters”라는 상태를 생성합니다. 이 상태에는 사용자 이름과 나이의 필터 조건이 포함됩니다.

class Filters {
  final String? nameFilter;
  final int? ageFilter;

  Filters(this.nameFilter, this.ageFilter);
}

필터링 로직 작성하기 필터링 로직을 작성합니다. Riverpod를 사용하여 필터링된 사용자 목록을 가져오는 “filterUsers” 함수를 만들어보겠습니다.

final usersProvider = Provider<List<User>>((ref) {
  // 사용자 목록 가져오는 비동기 로직
});

final filtersProvider = Provider<Filters>((ref) => Filters(null, null));

final filteredUsersProvider = Provider<List<User>>((ref) {
  final filters = ref.watch(filtersProvider);
  final users = ref.watch(usersProvider);

  // 필터링 로직을 적용하여 필터링된 사용자 목록을 반환
  return users.where((user) {
    final nameFilter = filters.nameFilter;
    final ageFilter = filters.ageFilter;

    bool nameMatches = nameFilter == null || user.name.contains(nameFilter);
    bool ageMatches = ageFilter == null || user.age == ageFilter;

    return nameMatches && ageMatches;
  }).toList();
});

필터링된 사용자 목록 사용하기 방금 작성한 필터링된 사용자 목록을 사용하여 UI를 업데이트할 수 있습니다. 필터링된 사용자 목록을 사용하는 위젯을 작성하고, 필터링 상태가 변경될 때마다 자동으로 업데이트되도록 설정할 수 있습니다.

class FilteredUsersWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final filteredUsers = context.watch(filteredUsersProvider);

    return ListView.builder(
      itemCount: filteredUsers.length,
      itemBuilder: (context, index) {
        final user = filteredUsers[index];
        return ListTile(
          title: Text(user.name),
          subtitle: Text(user.age.toString()),
        );
      },
    );
  }
}

사용자 입력 처리하기 UI에서 사용자 입력을 관리하여 필터링 상태를 변경할 수 있습니다. 예를 들어, 사용자가 이름 필터를 입력하면 필터링 상태를 업데이트하고, 필터링된 사용자 목록이 자동으로 업데이트되도록 할 수 있습니다.

class FiltersWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final filters = context.read(filtersProvider);

    return Column(
      children: [
        TextField(
          onChanged: (value) => filters.nameFilter = value,
          decoration: InputDecoration(labelText: 'Name Filter'),
        ),
        TextField(
          onChanged: (value) =>
              filters.ageFilter = int.tryParse(value) ?? null,
          decoration: InputDecoration(labelText: 'Age Filter'),
        ),
      ],
    );
  }
}

마무리

이제 Riverpod를 사용하여 앱의 데이터 필터링을 관리하는 방법을 알아보았습니다. Riverpod의 강력한 상태 관리 기능을 활용하여 필터링된 데이터를 손쉽게 관리할 수 있습니다. 자세한 정보는 Riverpod 공식 문서를 참조하시기 바랍니다.

참고자료: Riverpod 공식 문서