[flutter] 플러터 Riverpod에서의 페이징 처리 방법

30 Nov 2023

flutter

이번 포스트에서는 플러터의 상태 관리 라이브러리인 Riverpod을 사용하여 페이징 처리하는 방법을 알아보겠습니다. 페이징 처리는 대량의 데이터를 작은 단위로 나누어 불러오는 기술로, 효율적인 메모리 사용과 부드러운 스크롤을 제공하는 데 도움이 됩니다.

1. Riverpod 설치 및 설정

먼저, Riverpod을 프로젝트에 추가해야 합니다. pubspec.yaml 파일에 다음 의존성을 추가해주세요:

dependencies:
  riverpod: ^1.0.0

의존성을 추가한 후, 패키지를 가져올 수 있도록 pub get 명령을 실행하세요.

2. Provider 정의

다음으로, 페이징 처리를 위한 Provider를 정의해야 합니다. riverpod.dart 파일을 만들고 다음 내용을 추가하세요:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final pageProvider = StateProvider<int>((ref) => 0);
final itemsProvider = Provider<List<String>>((ref) {
  final page = ref.watch(pageProvider).state;
  final items = fetchItems(page);
  return items;
});

List<String> fetchItems(int page) {
  // 실제 데이터를 가져오는 로직을 구현하세요
  // 예시: 네트워크 요청 등
  return ["item 1", "item 2", "item 3"];
}

위 코드에서 pageProvider는 현재 페이지를 저장하는 상태 프로바이더이고, itemsProvider는 현재 페이지에 해당하는 데이터를 가져오는 프로바이더입니다. fetchItems 메서드는 실제 데이터를 가져오는 로직을 구현해야 합니다.

3. 위젯에서 Provider 사용

이제 위젯에서 정의한 Provider를 사용하여 데이터를 불러와 화면에 표시할 수 있습니다. 예를 들어, ListView 위젯을 사용하여 아이템을 표시하는 코드를 작성해보겠습니다:

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

class MyPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final items = watch(itemsProvider);
    
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text(items[index]),
        );
      },
    );
  }
}

위 코드에서 watch(itemsProvider)를 호출하여 itemsProvider에 해당하는 데이터를 가져옵니다. 그 다음, ListView.builder를 사용하여 데이터를 리스트로 표시합니다.

4. 페이징 처리 코드 추가

마지막으로, 페이징 처리를 위한 코드를 추가해보겠습니다. ListView 위젯에 스크롤 리스너를 등록하여 스크롤이 끝에 도달했을 때 다음 페이지의 데이터를 불러오도록 합니다. 이를 위해 scroll_notification_listener 라이브러리를 설치해야 합니다.

dependencies:
  scroll_notification_listener: ^1.0.0

다음은 코드의 일부분입니다:

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:scroll_notification_listener/scroll_notification_listener.dart';

class MyPage extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final items = watch(itemsProvider);
    final page = watch(pageProvider);
    final controller = ScrollController();
  
    controller.addListener(() {
      if (controller.position.atEdge && controller.position.pixels != 0) {
        context.read(pageProvider).state = page.state + 1;
      }
    });
  
    return ScrollNotificationListener(
      onNotification: (_) {},
      child: ListView.builder(
        controller: controller,
        itemCount: items.length,
        ...
      ),
    );
  }
}

위 코드에서 controller를 생성하고 스크롤 리스너를 등록합니다. 스크롤이 끝에 도달하면 pageProvider의 상태를 업데이트하여 다음 페이지의 데이터를 불러오도록 합니다.

이제 Riverpod을 사용하여 페이징 처리를 구현하는 방법에 대해 알아보았습니다. 이를 기반으로 실제 데이터를 불러오는 로직을 구현하여 원하는 페이징 기능을 구현해보세요.

1. Riverpod 설치 및 설정

2. Provider 정의

3. 위젯에서 Provider 사용

4. 페이징 처리 코드 추가

참고 자료