[Flutter] 당겨서 새로고침, 화면을 새롭게 불러오는 작은 제스처

서연·2025년 10월 22일
post-thumbnail

📖 당겨서 새로고침 (Pull to Refresh)

  • 스크롤 가능한 목록으 최상단에서 화면을 아래로 끌어내려 새 데이터를 요청 • 갱신하는 모바일 UX 패턴이다.
  • 사용자가 콘텐츠 영역의 최상단에서 화면을 아래로 당기면 새로고침 인디케이터가 나타나고 일정 거리 이상 당긴 후 손을 떼면 새로고침이 실행된다.
  • 이 과정에서 로딩 스피너나 애니메이션이 표시되며 데이터 로딩이 완료되면 인디케이터가 사라지고 업데이트된 콘텐츠가 표시된다.
  • 목적은 화면 전환 없이 현재 컨텍스트를 유지한 채 신선한 데이터를 빠르게 받아오는 것이다.
  • 새로고침 결과는 성공 / 실패 / 신규 없음 상태를 명확히 알려야 사용자가 제스처의 결과를 이해할 수 있다.

🧩 Flutter에서의 구현

  • Flutter에서는 RefreshIndicator 위젯으로 당겨서 새로고침을 구현한다.
  • 내부의 스크롤 가능한 자식이 최상단에서 아래로 당겨질 때 onRefresh 콜백이 호출된다.
  • onRefreshFuture<void>를 반환해야 하며 이 Future가 완료되면 인디케이터가 자동으로 사라진다.
  • 인디케이터의 표시 위치나 길이는 edgeOffset, displacement 등의 속성으로 조절할 수 있다.
 // 새로고침 기능을 표시해주는 도구
body : RefreshIndicator (
 // 새로고침 시작될 때
  onRefresh: () async {
  await Future.delayed(Duration(seconds : 2)); // 2초동안 기다려

⚙️ 동작 조건 및 팁

  • 리스트가 위로 조금이라도 스크롤 되어 있으면 트리거되지 않는다.
    반드시 최상단 도달 상태에서만 동작한다.
  • 빈 화면에서도 새로고침이 가능하도록 SingleChildScrollView로 감싸 스크롤 가능하게 만드는 패턴이 유용하다.
  • 새로고침 중 중복 호출을 방지하려면 ViewModelisRefreshing 상태를 두고 재진입을 차단한다.

0개의 댓글