RefreshIndicator(
onRefresh: () async {
ref.read(widget.provider.notifier).paginate(
forceRefetch: true,
);
},
child: ListView.separated(
physics: AlwaysScrollableScrollPhysics(),
controller: controller,
itemCount: cp.data.length + 1,
itemBuilder: (_, index) {
if (index == cp.data.length) {
return Padding(
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 8.0,
),
child: Center(
child: cp is CursorPaginationFetchingMore ? CircularProgressIndicator() : Text('마지막'),
),
);
}코드 흐름
사용자가 화면을 아래로 당기면 RefreshIndicator의 onRefresh가 호출됩니다.
이때 ref.read(widget.provider.notifier).paginate(forceRefetch: true);
통해 데이터를 강제로 다시 로드하며,
paginate 함수는 상태 관리와 서버에서 추가 데이터를 가져오는 작업을 수행합니다.
ListView.separated는 데이터 수에 맞춰 리스트를 그리며,
맨 마지막에는 추가 데이터를 로드하여 CircularProgressIndicator()를 나타내거나, 마지막 데이터임을 나타내는 텍스트를 표시합니다.
이 코드는 Flutter와 Riverpod을 사용하여 무한 스크롤 기능을 구현하는 방식입니다.
주로 리스트에 데이터가 더 필요할 때 추가 데이터를 불러오는 로직을 다루며,
RefreshIndicator와 ListView.separated를 사용해 구성되어 있습니다.
하나씩 설명하겠습니다.
코드 설명
1. RefreshIndicator 위젯
RefreshIndicator는 당겨서 새로 고침(Pull-to-Refresh)을 구현할 수 있는 Flutter의 위젯입니다.
이 위젯은 onRefresh 매개변수에 비동기 함수를 받아 실행하며,
이 함수가 실행되면 새로 고침 아이콘(로딩)이 표시됩니다.
2. onRefresh
리스트가 새로 고침될 때 동작할 로직을 정의합니다.
ref.read(widget.provider.notifier).paginate(forceRefetch: true); Riverpod을 통해 provider의 notifier에 접근하여 paginate라는 메서드를 호출합니다.
여기서 forceRefetch: true는 데이터를 강제로 다시 가져오도록 설정하는 옵션입니다.
이미 데이터를 갖고 있더라도 이 옵션이 활성화되면 서버에서 데이터를 다시 가져옵니다.
3. ref.read
Riverpod에서 ref.read는 provider의 현재 값을 읽어올 수 있게 해줍니다.
여기서는 widget.provider.notifier에 접근하여 paginate 메서드를 호출하는데,
이는 provider의 state를 조작하는 방식입니다.
일반적으로 provider를 통해 상태를 읽고 쓰기 위해 Riverpod의 ref를 사용합니다.
4. ListView.separated 위젯
이 위젯은 리스트 아이템 사이에 구분선을 추가하여 리스트를 시각적으로 구분하는 역할을 합니다.
physics: AlwaysScrollableScrollPhysics()리스트가 항상 스크롤 가능하도록 설정하며, 리스트에 데이터가 적더라도 당겨서 새로 고침이 가능합니다.
controller: controller는 리스트 뷰의 스크롤 상태를 관리하는 컨트롤러입니다.
주로 스크롤 위치를 확인하거나 변경하는 데 사용됩니다.
5. itemCount
itemCount: cp.data.length + 1리스트의 항목 개수를 설정합니다.
cp.data.length는 리스트의 실제 데이터 수를 나타내며,
여기에 +1을 추가하여 로딩 상태나 마지막 페이지 도달 시 메시지를 나타낼 추가 아이템을 위해 1개의 항목을 더 설정합니다.
6. itemBuilder
리스트의 각 항목을 그릴 때 사용되는 빌더 함수입니다.
index를 기반으로 해당 인덱스에 맞는 위젯을 반환합니다.
if (index == cp.data.length) 조건문은 현재 인덱스가 데이터 리스트의 마지막일 때 실행되며,
이 위치에서 추가 데이터를 로딩 중인지 아니면 리스트의 끝에 도달했는지를 확인합니다.
7. CursorPaginationFetchingMore:
cp is CursorPaginationFetchingMore 조건은 데이터가 더 불러오는 중인지 확인하는 부분입니다.
로딩 중일 때는 CircularProgressIndicator()를 표시하여 사용자가 추가 데이터를 불러오고 있음을 인지할 수 있게 하고, 그렇지 않다면 Text('마지막') 텍스트를 표시해 더 이상 가져올 데이터가 없음을 알립니다.
