Flutter - RefreshIndicator, Pull to Refresh, 당겨서 새로고침

안녕하세요 독학코딩입니다. 오늘은 Flutter에서 Pull to Refresh 기능인 당겨서 새로고침을 배워보겠습니다. 어떤 앱을 보든 기본적으로 있는 기능있는데요. 모두 본적이 있으실 겁니다. 화면을 아래로 당기면 새로고침 스피너가 나오면서 화면이 새로고침 되는걸 보셨을 겁니다. 오늘은 그 기능인 RefreshIndicator를 배워보겠습니다.

 

Flutter RefreshIndicator

RefreshIndicator는 스크롤 가능한 하위 항목이 오버스크롤 되면 새로고침 콜백이 호출됩니다. 다만, Vertical Scroll View에서만 가능하다는 걸 유의하셔야 합니다.

 

int refreshnum = 0;

RefreshIndicator(
  onRefresh: () async {
    refreshnum += 1;
    setState(() {});
  },
  child: ListView(
    children: List.generate(10, (index) {
        return ListTile(
          title: Text("Refresh Num $refreshnum"),
        );
      }
    ).toList()
  )
)

RefreshIndicator는 onRefresh라는 기능이 있습니다. async로만 오버스크롤이 됬을때 호출되는 콜백으로 원하시는 기능을 작성하시면 됩니다. 

 

만약 ListView의 child가 화면 내에 모두 있어서 스크롤이 안되는 상태라면 ListView에 Scrollable.physics를 AlwaysScrollableScrollPhysics()로 설정해주시면 상항 오버스크롤이 가능한 상태가 됩니다.

ListView(
    physics: const AlwaysScrollableScrollPhysics(),
    children: ...
)

 

Flutter RefreshIndicator 스피너 꾸미기

RefreshIndicator(
  color: Colors.red, // 스피너 화살표 색
  backgroundColor: Colors.blue, // 스피너 배경 색
  displacement: 10.0, // 스피너가 내려오는 정도
  edgeOffset: 220.0, // 스피너가 나오는 위치
  strokeWidth: 3.0, // 스피너 화살표 크기  
)

RefreshIndicator Color

color는 Material Color를 값으로 사용합니다. 이 속성을 사용하여 새로 고침 스피너의 색상을 변경할 수 있습니다.

 

RefreshIndicator BackgroudColor

BackgroundColor는 Material Color를 값으로 사용합니다. 이 속성을 사용하여 새로 고침 스피너의 배경색상을 변경할 수 있습니다.

 

RefreshIndicator displacement

displacemnet는 double을 값으로 사용합니다. 새로고침 표시기가 내려오는 거리를 설정합니다. 기본값은 40.0입니다.

 

RefreshIndicator edgeOffset

edgeOffset는 double을 값으로 사용합니다. 새로고침 표시기가 나타나는 위치를 조정합니다. 기본적값은 0.0입니다.

 

RefreshIndicator strokeWidth

strokeWidth는 double을 값으로 사용합니다. 이 속성을 사용하여 새로 고침 표시기의 너비/두께를 변경합니다. 기본값은 2.0입니다.