[Flutter] 당겨서 새로고침 표시 방법, RefreshIndicator 사용법

앱에 리스트를 사용하다 새로고침 로직을 추가할 일이 생기는데, 그 때 유용하게 사용할 수 있는 위젯이 RefreshIndicator이다. 

이는 아래 사진과 같이 아래로 당기는 제스처를 수행했을 때, 새로고침 로직을 진행할 수 있다. 

 

예제코드

class MyHomePage extends StatelessWidget {
  final List<String> list = ['1111', '22222', "3333", "4444"];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(F.title),
      ),
      body: RefreshIndicator(
        backgroundColor: Colors.transparent,
        color: Colors.blue,
        onRefresh: () async {
          Future.delayed(const Duration(seconds: 10), () {

          });
        },
        child: ListView.builder(
          itemCount: list.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(list[index]),
            );
          },
        ),
      ),
    );
  }
}

 

의외로 간단하다. RefreshIndicator 위젯의 child에 LivsView, Cloumn 등이 있으면 된다. 

RefreshIndicator 뿐만아니고 RefreshIndicator.adaptive도 있으니 한번 적용해보면 좋을 것 같다.