📖 당겨서 새로고침 (Pull to Refresh)
- 스크롤 가능한 목록으 최상단에서 화면을 아래로 끌어내려 새 데이터를 요청 • 갱신하는 모바일 UX 패턴이다.
- 사용자가 콘텐츠 영역의 최상단에서 화면을 아래로 당기면 새로고침 인디케이터가 나타나고 일정 거리 이상 당긴 후 손을 떼면 새로고침이 실행된다.
- 이 과정에서 로딩 스피너나 애니메이션이 표시되며 데이터 로딩이 완료되면 인디케이터가 사라지고 업데이트된 콘텐츠가 표시된다.
- 목적은 화면 전환 없이 현재 컨텍스트를 유지한 채 신선한 데이터를 빠르게 받아오는 것이다.
- 새로고침 결과는 성공 / 실패 / 신규 없음 상태를 명확히 알려야 사용자가 제스처의 결과를 이해할 수 있다.
🧩 Flutter에서의 구현
- Flutter에서는
RefreshIndicator 위젯으로 당겨서 새로고침을 구현한다.
- 내부의 스크롤 가능한 자식이 최상단에서 아래로 당겨질 때
onRefresh 콜백이 호출된다.
onRefresh는 Future<void>를 반환해야 하며 이 Future가 완료되면 인디케이터가 자동으로 사라진다.
- 인디케이터의 표시 위치나 길이는
edgeOffset, displacement 등의 속성으로 조절할 수 있다.
body : RefreshIndicator (
onRefresh: () async {
await Future.delayed(Duration(seconds : 2));
⚙️ 동작 조건 및 팁
- 리스트가 위로 조금이라도 스크롤 되어 있으면 트리거되지 않는다.
→ 반드시 최상단 도달 상태에서만 동작한다.
- 빈 화면에서도 새로고침이 가능하도록
SingleChildScrollView로 감싸 스크롤 가능하게 만드는 패턴이 유용하다.
- 새로고침 중 중복 호출을 방지하려면
ViewModel에 isRefreshing 상태를 두고 재진입을 차단한다.