플러터(Flutter) 의 RefreshIndicator 란?

RefreshIndicator

• 리스트에서 스크롤을 위로 쭉 올리거나 밑으로 쭉 내린 다음에 새로고침 되게 만들 수 있는 위젯
• 보통 내부에 있는 onRefresh 속성의 콜백함수에서 Future 를 반환하여 데이터를 새로고침한다.
  • 단, Future<void> 를 반환하고, 콜백 함수 내부에서 setState() 를 호출하는 방식도 가능하다.
• 다양한 속성으로 로딩될 때 사용되는 spinner 의 스타일을 조정할 수 있다.
  • 스타일엔 edgeOffset(시작 위치), displacement(위치), strokeWidth, color, backgroundColor 등이 있다.

예제 코드

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(
        centerTitle: true,
        title: const Text(
            '코팩튜브'
        ),
        backgroundColor: Colors.black,
      ),
      body: FutureBuilder<List<VideoModel>>(
        future: YoutubeRepository.getVideos(),
        builder: (context, snapshot) {
          if (snapshot.hasError) {
            return Center(
                child: Text(
                    snapshot.error.toString()
                )
            );
          }

          if (!snapshot.hasData) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }

          return RefreshIndicator(
            onRefresh: () async {
              // setState() 메서드를 호출하면 statefulWidget 이 다시 랜더링된다.
              setState(() {});
            },
            child: ListView(
              physics: const BouncingScrollPhysics(),
              children: snapshot.data!
                  .map((e) => CustomYoutubePlayer(videoModel: e))
                  .toList(),
            ),
          );
        },
      ),
    );
  }
}

공식문서

https://api.flutter.dev/flutter/material/RefreshIndicator-class.html