앱을 사용하는 동안 데이터를 업데이트해야할 때 RefreshIndicator를 사용하면 사용자가 스크롤하여 새로고침할 수 있는 기능을 제공할 수 있습니다. 이 기능을 이용하여 완료된 작업 목록을 실시간으로 업데이트하는 방법에 대해 알아보겠습니다.

1. RefreshIndicator 추가

먼저, 완료된 작업 목록을 표시하는 페이지에 RefreshIndicator 위젯을 추가합니다.

RefreshIndicator(
  onRefresh: _handleRefresh,
  child: ListView(
    children: _buildCompletedTasks(),
  ),
)

onRefresh 콜백 함수를 통해 새로고침 동작을 정의할 수 있습니다.

2. 새로고침 동작 정의

다음으로, _handleRefresh 함수를 정의하여 완료된 작업 목록을 새로고침합니다.

Future<void> _handleRefresh() async {
  // 완료된 작업 목록을 업데이트하는 비동기 작업 수행
  await _updateCompletedTasks();
  setState(() {
    // 완료된 작업 목록을 다시 빌드하여 화면에 업데이트
  });
}

_updateCompletedTasks 함수에서 백엔드 API를 호출하여 최신 데이터를 가져와야 합니다.

3. 새로고침 표시 추가 (선택 사항)

새로고침이 진행 중임을 사용자에게 알리기 위해 RefreshIndicator 위젯에 기본 색상과 진행 중 색상을 설정할 수 있습니다.

RefreshIndicator(
  onRefresh: _handleRefresh,
  color: Colors.blue, // 기본 색상
  backgroundColor: Colors.white, // 배경색
  child: ListView(
    children: _buildCompletedTasks(),
  ),
)

이제 사용자가 완료된 작업 목록을 보는 동안 필요할 때마다 당겨서 새로고침하여 최신 데이터를 확인할 수 있게 되었습니다.

위 예제에서는 Flutter 프레임워크를 사용했지만, 다른 프레임워크나 플랫폼에서도 유사한 방식으로 RefreshIndicator를 활용할 수 있습니다.

참고 자료

• Flutter 공식 문서 - RefreshIndicator