애플리케이션을 개발하다 보면 새로운 정보나 알림이 사용자에게 넘어올 때마다 화면을 새로 고쳐야 할 때가 있습니다. Flutter에서는 RefreshIndicator 위젯을 사용하여 이를 간단하게 구현할 수 있습니다.

이번 포스트에서는 RefreshIndicator를 활용하여 리스트나 그리드 등의 스크롤 가능한 위젯에서 새로운 알림이 있을 때 화면을 갱신하는 방법에 대해 알아보겠습니다.

Step 1: RefreshIndicator 추가

먼저, 스크롤 가능한 위젯을 감싸는 형태로 RefreshIndicator를 추가해야 합니다.

RefreshIndicator(
  onRefresh: () async {
    // 새로고침 작업 수행
  },
  child: ListView(
    children: [
      // 리스트 아이템 위젯들
    ],
  ),
)

RefreshIndicator는 onRefresh 콜백을 사용하여 새로고침 이벤트가 발생했을 때 실행될 작업을 정의할 수 있습니다. 예를 들어, 네트워크 호출을 통해 새로운 데이터를 가져오는 비동기 작업을 수행할 수 있습니다.

Step 2: 새로고침 작업 구현

onRefresh 콜백 안에 어떠한 작업을 수행할지 구현해야 합니다.

예를 들어, 네트워크 호출을 통해 새로운 데이터를 가져오는 경우, 다음과 같이 구현할 수 있습니다.

onRefresh: () async {
  await Future.delayed(Duration(seconds: 1)); // 가짜로 1초 대기
  // 네트워크 호출을 통해 새로운 데이터 가져오기
  // setState()를 호출하여 화면 갱신
},

Future.delayed를 사용하여 임의의 시간 동안 대기한 후, 네트워크 호출을 통해 새로운 데이터를 가져온 후 setState를 호출하여 화면을 갱신할 수 있습니다.

결론

이렇게 RefreshIndicator를 사용하여 스크롤 가능한 위젯에서 화면을 갱신하는 방법을 살펴보았습니다. 사용자가 리스트를 당겨서 새로고침하거나, 알림이 오는 등의 상황에 유용하게 활용할 수 있습니다.

이러한 기능을 통해 사용자 경험을 개선하고, 애플리케이션의 상호작용성을 증진시킬 수 있습니다.

더 자세한 내용은 공식 문서를 참고하세요.