[flutter] 플러터 Riverpod을 이용한 무한 스크롤 처리 방법

30 Nov 2023

flutter

플러터(Flutter)는 모바일 애플리케이션 개발을 위한 인기있는 프레임워크 중 하나입니다. 이번 글에서는 Riverpod라는 상태 관리 라이브러리를 사용하여 플러터에서 무한 스크롤을 처리하는 방법에 대해 알아보겠습니다.

Riverpod 소개

Riverpod은 플러터의 공식 상태 관리 라이브러리인 Provider를 개선한 버전입니다. Provider는 의존성 주입(Dependency Injection)을 제공하여 애플리케이션의 상태 관리를 간편하게 해주는 역할을 합니다. Riverpod은 이러한 Provider의 기능을 보완하고 성능을 향상시킨 버전으로, 플러터에서 많은 개발자들에게 사랑받고 있습니다.

무한 스크롤 처리 방법

무한 스크롤은 많은 양의 데이터를 가진 리스트를 사용자에게 표시할 때 유용합니다. 일반적으로, 초기에는 일부 데이터만 표시하고 스크롤이 끝에 도달했을 때 추가 데이터를 로드하는 식으로 구현합니다. 플러터와 Riverpod을 사용하면 간단하게 무한 스크롤을 처리할 수 있습니다.

1. 데이터 소스 준비

우선, 리스트를 표시하고자 하는 데이터 소스를 준비해야 합니다. 이 예시에서는 List<String> 형태의 데이터를 사용합니다. 원하는 데이터를 가져오는 방법은 여러 가지가 있을 수 있습니다.

final List<String> dataList = [];

2. 상태 관리 및 데이터 로딩

데이터 소스와 관련된 상태 관리를 위해 StateNotifierProvider를 사용합니다. 데이터 로딩을 위한 비동기 함수를 작성하고, 필요한 시점에 해당 함수를 호출하여 데이터를 로드합니다.

final dataProvider = Provider<List<String>>((ref) {
  ref.watch(dataLoaderProvider);
  return ref.watch(dataListProvider);
});

final dataLoaderProvider = StateNotifierProvider<DataLoader, bool>((ref) {
  return DataLoader(ref.read);
});

class DataLoader extends StateNotifier<bool> {
  final Reader _read;

  DataLoader(this._read) : super(false);

  Future<void> loadData() async {
    // 데이터 로딩 로직 구현
    // 예시: API 호출 후 데이터 가져옴
    final newData = await _read(apiProvider).fetchData();

    _read(dataListProvider.notifier).addAll(newData);

    state = true;
  }
}

3. 무한 스크롤 위젯 구현

실제로 스크롤을 처리하는 위젯을 작성합니다. ListView.builder를 사용하여 스크롤이 끝에 도달했을 때 데이터를 추가로 로드하도록 구현합니다.

class InfiniteScrollWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final dataList = watch(dataProvider);

    return ListView.builder(
      itemCount: dataList.length + 1,
      itemBuilder: (context, index) {
        if (index == dataList.length) {
          // 스크롤이 끝에 도달했을 경우
          watch(dataLoaderProvider.notifier).loadData();
          return Center(child: CircularProgressIndicator());
        }

        return ListTile(
          title: Text(dataList[index]),
        );
      },
    );
  }
}

4. 무한 스크롤 위젯 사용

이제 이전에 작성한 무한 스크롤 위젯을 화면에 사용하면 됩니다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Infinite Scroll Example'),
        ),
        body: InfiniteScrollWidget(),
      ),
    );
  }
}

마무리

위의 방법을 통해 Riverpod을 사용하여 플러터에서 무한 스크롤을 처리하는 방법을 알아보았습니다. 이는 Riverpod의 강력한 상태 관리 기능을 활용하여 더 나은 애플리케이션을 개발하는 데 도움이 될 것입니다. 더 많은 기능과 예제는 Riverpod 공식 문서에서 확인할 수 있습니다.