[Flutter] 당겨서 새로고침하기 (pull to refresh) | RefreshIndicator

화면을 아래로 당겨서 새로고침하는 기능을 구현해 보자.

 

RefreshIndicator

return Scaffold(
  appBar: AppBar(
    title: const Text('교정 타임라인'),
  ),
  body: RefreshIndicator(
    onRefresh: () async {
      timelineController.refreshTimelineData();
    },
    child: const Column(),
  ),
);

`Scaffold`의 `body`의 최상위에 `RefreshIndecator` 위젯을 추가하고, `onRefresh`에 새로고침 했을 때 실행되길 원하는 코드를 추가한다.

 

RefreshIndicator와 RefreshIndicator.adaptive의 차이점

RefreshIndicator

• 항상 Android 스타일의 `RefreshIndicator`를 제공한다.
• 모든 플랫폼(Android, iOS 등)에 동일한 UI를 제공할 수 있다. 

 

RefreshIndicator.adaptive

• Android , iOS 플랫폼에 따라 다른 스타일의 `RefreshIndicator`를 제공한다.
• Android와 iOS를 모두 대상으로 하는 앱에 이상적이다

 

참고 문서

• RefreshIndicator class