[flutter] 플러터 Riverpod를 사용한 스크롤 처리 방법

30 Nov 2023

flutter

플러터(Flutter)는 Google에서 개발한 UI 프레임워크로, 다양한 플랫폼에서 동작하는 애플리케이션을 만들 수 있습니다. Riverpod는 플러터의 상태 관리 라이브러리 중 하나로, 효율적인 상태 관리를 위해 사용됩니다. 이 문서에서는 플러터 앱에서 스크롤 처리를 위해 Riverpod 라이브러리를 사용하는 방법에 대해 알아보겠습니다.

1. Riverpod 설치하기

플러터 프로젝트에서 Riverpod를 사용하려면, pubspec.yaml 파일에 의존성을 추가해야합니다. 아래와 같이 riverpod 패키지를 추가해주세요.

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.14.0

의존성 추가 후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 다운로드 받아주세요.

2. 스크롤 처리를 위한 Provider 생성하기

스크롤 처리를 위해선, 스크롤 위치를 추적할 수 있는 Provider를 생성해야합니다. 이 Provider는 ScrollController를 사용하여 스크롤 위치를 관리합니다.

final scrollPositionProvider = Provider<int>((ref) => 0);

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final scrollPosition = watch(scrollPositionProvider);
    
    return ListView.builder(
      controller: ScrollController(),
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  }
}

위 코드에서 scrollPositionProvider는 현재 스크롤 위치를 나타내는 Provider입니다. Provider<int>를 사용하여 정수 값을 제공하도록 설정하였습니다.

3. 스크롤 위치 업데이트하기

위에서 생성한 scrollPositionProvider는 현재 스크롤 위치를 추적합니다. 이 위치를 업데이트하기 위해, ScrollController의 addListener() 메서드를 사용하여 스크롤 이벤트를 감지할 수 있습니다.

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final scrollPosition = watch(scrollPositionProvider);
    final scrollController = useScrollController();

    scrollController.addListener(() {
      context.read(scrollPositionProvider).state = scrollController.offset.toInt();
    });

    return ListView.builder(
      controller: scrollController,
      itemCount: 100,
      itemBuilder: (context, index) {
        return ListTile(
          title: Text('Item $index'),
        );
      },
    );
  }
}

위의 코드에서 useScrollController()는 현재 위젯에 연결된 ScrollController를 제공합니다. addListener()를 사용하여 스크롤 이벤트를 감지하고, context.read()를 사용하여 scrollPositionProvider를 업데이트합니다.

4. 스크롤 위치 사용하기

이제 scrollPositionProvider를 사용하여 스크롤 위치를 표시하거나 사용할 수 있습니다. 다음은 scrollPositionProvider를 사용하여 현재 스크롤 위치를 출력하는 간단한 예시입니다.

class MyWidget extends ConsumerWidget {
  @override
  Widget build(BuildContext context, ScopedReader watch) {
    final scrollPosition = watch(scrollPositionProvider);

    return Scaffold(
      appBar: AppBar(
        title: Text('Scroll Position'),
      ),
      body: Center(
        child: Text('Scroll Position: $scrollPosition'),
      ),
    );
  }
}

위 코드에서 watch()를 사용하여 scrollPositionProvider를 읽고, 현재 스크롤 위치를 표시하고 있습니다.

결론

이렇게 Riverpod를 사용하여 플러터 앱에서 스크롤 처리를 할 수 있습니다. Riverpod는 효율적이고 간결한 상태 관리를 제공하여 코드의 가독성과 유지 보수성을 향상시킵니다. 본 문서를 참고하여 플러터 앱에서 스크롤 처리를 구현해 보세요.

참고자료:

Riverpod 공식 문서