<div id="readability-page-1" class="page"><div>
 <div id="SE-60bab83c-eb73-4b23-a7c4-00932f0a24a5">
 개요​Flutter 에서 'Pull to Refresh (당겨서 새로고침)' 기능을 사용하는 방법에 대해 정리한다.​​​RefreshIndicator ​Flutter 에서는 RefreshIndicator 라는 StatefulWidget 을 제공한다. 'Pull to Refresh' 를 적용하고 싶은 widget 을 RefreshIndicator 로 감싸주면 된다.​아래 코드를 보면 body 에 RefreshIndicator 가 할당되고 child 에서는 분기처리가 되고 있다._list 에 item 이 있으면 ListView 를 렌더링하고 없으면 없다는 text 를 렌더링 한다.​RefreshIndicator 에는 onRefresh 라는 속성이 있는데 'pull to refresh' 동작시 onRefresh 에 할당된 함수가 동작한다. 보통은 이 부분에 새로 데이터를 불러오도록 구현한다.
 </div> <div id="SE-1394d61c-60ad-4f67-a6d5-712a57119aa1">
 class _MyHomePageState extends State&lt;MyHomePage&gt; {
 List&lt;String&gt; _list = [];

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: const Text('RefreshIndicator')),
 body: RefreshIndicator(
 onRefresh: () async {
 final newList = ['Apple', 'Banana', "Strawberry", "Watermelon"];

 setState(() {
 _list = [..._list, ...newList];
 });
 },
 child: _list.isNotEmpty
 ? ListView.builder(
 itemCount: _list.length,
 itemBuilder: (context, index) {
 return ListTile(
 title: Text(_list[index]),
 );
 },
 )
 : LayoutBuilder(
 builder: (context, constraints) {
 return SingleChildScrollView(
 physics: const AlwaysScrollableScrollPhysics(),
 child: SizedBox(
 height: constraints.maxHeight,
 child: Center(
 child: Column(
 mainAxisAlignment: MainAxisAlignment.center,
 children: const [
 Text('There is not data.'),
 Text('Pull to refresh.'),
 ],
 ),
 ),
 ),
 );
 },
 ),
 ),
 );
 }
}
 </div> <div id="SE-6fedf5da-c43d-4680-8c5e-24c3b51e4531">
 (코드 출처 : <a href="https://deku.posstree.com/en/flutter/widget/RefreshIndicator/" target="_blank">https://deku.posstree.com/en/flutter/widget/RefreshIndicator</a>)​​​RefreshIndicator with FutureBuilder​대부분의 예제들이 RefreshIndicator 와 함께 ListView.Builder 를 사용하는 예제로 되어 있다. 본인은 api 등을 fetch 해서 ListView 를 만들때 FutureBuilder 를 통해서 ListView 를 생성한다. ​FutureBuilder 와 함께 RefreshIndicator 를 사용하는 방법에 대해 구글링을 해보니 RefreshIndicator 의 onRefresh 함수에서 setState({}); 함수를 호출하면 된다고 나와있었다.​setState({}); 가 호출되면 build 함수가 호출되면서 자연스레 FutureBuilder 또한 내부적으로 데이터를 다시 fetch 해오게 된다.
 </div> <div id="SE-e43ae41a-0bfa-42d3-8b9a-7245d9418543">
 class _HomeScreenState extends State&lt;HomeScreen&gt; {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 backgroundColor: Colors.black,
 body: FutureBuilder&lt;List&lt;VideoModel&gt;&gt;(
 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) =&gt; CustomYoutubePlayer(videoModel: e))
 .toList(),
 ),
 );
 },
 ),
 );
 }
}
출처: https://jake-seo-dev.tistory.com/659 [제이크서 위키 블로그:티스토리]
 </div> <div id="SE-8b7c41d2-2e9a-4943-a025-106de9bce715">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-8b7c41d2-2e9a-4943-a025-106de9bce715&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;256&quot;, &quot;originalHeight&quot; : &quot;103&quot;, &quot;linkUse&quot; : &quot;true&quot;, &quot;link&quot; : &quot;https://qr.kakaopay.com/2810060110000443710583945dc00000&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTU1/MDAxNjE2MTM4MjkxMjM3.dNZls450pxypmf-DDgpsXyvvHMt06U7ZQUNXnOQA43Ug.vtGD-dfDsIyabzZVoo-fdyd2AIYUoQuMT74Plq4T10Yg.JPEG.writer0713/kakao.jpeg?type=w1" alt="">
 </a>
 
 카카오페이로 후원
 </div>
 <div id="SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86">
 <a href="#" onclick="return false;" data-linktype="img" data-linkdata="{&quot;id&quot; : &quot;SE-d6bd9823-fdf0-4ca2-843d-6f14a118bf86&quot;, &quot;src&quot; : &quot;https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1&quot;, &quot;originalWidth&quot; : &quot;330&quot;, &quot;originalHeight&quot; : &quot;330&quot;, &quot;linkUse&quot; : &quot;false&quot;, &quot;link&quot; : &quot;&quot;}">
 <img src="https://blogfiles.pstatic.net/MjAyMTAzMTlfMTIy/MDAxNjE2MTM4Mzk5Mjkz.7C8k50nPce6NqNspKw4-LN2u34aGtUxhR0Wv_mZH-xQg.U1KVzLLFEU4OaZ2KhamW_jV6_a4jVmvV0V3yY0uTl_Qg.JPEG.writer0713/kakao_qr.jpeg?type=w1" alt="">
 </a>
 
 카카오페이 QR코드로 후원
 </div>
 </div></div>

나만의공간。

KIM JUNGHWAN

개요 Flutter 에서 'Pull to Refresh (당겨서 새로고침)' 기능을 사용하는 방법에 대해 정리한다. RefreshIndicator Flutter 에서는 RefreshIndicator 라는 StatefulWidget 을 제공한다. 'Pull to Refresh' 를 적용하고 싶은 widget 을 RefreshIndicator 로 감싸주면 된다. 아래 코드를 보면 body 에 RefreshIndicator 가 할당되고 child 에서는 분기처리가 되고 있다. _list 에 item 이 있으면 ListView 를 렌더링하고 없으면 없다는 text 를 렌더링 한다. RefreshIndicator 에는 onRefresh 라는 속성이 있는데 'pull to refresh' 동작시 onRefresh 에 할당된 함수가 동작한다. 보통은 이 부분에 새로 데이터를 불.......

[Flutter] RefreshIndicator (Pull to Refresh)

댓글