<div id="readability-page-1" class="page"><div><div><nav aria-label="breadcrumb"><ol itemscope="" itemtype="http://schema.org/BreadcrumbList"><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/">Home</a><meta itemprop="position" content="1"></li><li itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter">flutter</a><meta itemprop="position" content="2"></li><li aria-current="page" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem"><a itemtype="http://schema.org/Thing" itemprop="item" href="/ko/flutter/widget/RefreshIndicator/">[Flutter] 당겨서 새로고침</a><meta itemprop="position" content="3"></li></ol></nav></div><div><article><div id="contents_list"><h2 id="section">목차</h2><ul><li><a href="#개요">개요</a></li><li><a href="#refreshindicator">RefreshIndicator</a></li><li><a href="#listview">ListView</a></li><li><a href="#refreshindicator-위젯-사용-방법">RefreshIndicator 위젯 사용 방법</a></li><li><a href="#리스트가-없는-빈-화면에-적용">리스트가 없는 빈 화면에 적용</a></li><li><a href="#완료">완료</a></li></ul></div><h2 id="개요">개요</h2>리스트를 가지는 앱에서 <code>당겨서 새로고침(Pull to refresh)</code>은 이제 기본적으로 제공하는 UI/UX가 되었습니다. 이번 블로그에서는 Flutter로 개발한 앱에서 당겨서 새로고침을 사용하여 표시된 리스트 갱신하는 방법에 대해서 알아보겠습니다.여기서 소개하는 소스코드는 <code>GitHub</code>에서 확인하실 수 있습니다.<ul><li>GitHub: <a href="https://github.com/dev-yakuza/study-flutter/tree/main/widget/refreshindicator" rel="nofollow noreferrer" target="_blank">https://github.com/dev-yakuza/study-flutter/tree/main/widget/refreshindicator</a></li></ul><h2 id="refreshindicator">RefreshIndicator</h2>Flutter에서 당겨서 새로고침을 사용하기 위해서는 <code>RefreshIndicator</code> 위젯을 사용할 필요가 있습니다.<ul><li>Document: <a href="https://api.flutter.dev/flutter/material/RefreshIndicator-class.html" rel="nofollow noreferrer" target="_blank">RefreshIndicator class</a></li></ul>이번 블로그 포스트에서는 <code>RefreshIndicator</code> 위젯을 사용하여 당겨서 새로고침을 구현하는 방법에 대해서 알아보도록 하겠습니다.<h2 id="listview">ListView</h2>우선 <code>ListView</code> 위젯을 사용하여 일반적으로 리스트를 표시하는 코드를 작성해 봅시다.<div><pre><code>class _MyHomePageState extends State&lt;MyHomePage&gt; {
 final List&lt;String&gt; _list = ['Apple', 'Banana', "Strawberry", "Watermelon"];

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: const Text('RefreshIndicator')),
 body: ListView.builder(
 itemCount: _list.length,
 itemBuilder: (context, index) {
 return ListTile(
 title: Text(_list[index]),
 );
 },
 ),
 );
 }
}
</code></pre></div><code>RefreshIndicator</code> 위젯을 사용하여 화면에 표시되는 리스트를 업데이트할 예정이므로 <code>State Widget</code>을 사용했습니다.이와같이 코드를 작성하면, 다음과 같이 <code>ListView</code> 위젯이 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/listview.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/listview.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/listview.png" alt="Flutter RefreshIndicator - ListView"></picture>이렇게 표시된 <code>ListView</code> 위젯을 다음과 같이 아래로 당기면 상단 영역이 넓어질뿐 새로고침 동작이 발생하지 않습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/listview_pull.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/listview_pull.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/listview_pull.png" alt="Flutter RefreshIndicator - ListView Pull"></picture><h2 id="refreshindicator-위젯-사용-방법">RefreshIndicator 위젯 사용 방법</h2>그럼 이제 <code>RefreshIndicator</code> 위젯을 사용하여 당겨서 새로고침을 구현해 봅시다. <code>RefreshIndicator</code> 위젯은 다음과 같이 <code>onRefresh</code> 함수와 <code>child</code>를 사용할 수 있습니다.<div><pre><code>RefreshIndicator(
 onRefresh: ...,
 child: ...,
)
</code></pre></div>그럼 이제 <code>ListView</code> 위젯을 사용하여 리스트 화면을 구현한 코드에 <code>RefreshIndicator</code> 위젯을 적용해 봅시다.<div><pre><code>class _MyHomePageState extends State&lt;MyHomePage&gt; {
 List&lt;String&gt; _list = ['Apple', 'Banana', "Strawberry", "Watermelon"];

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: const Text('RefreshIndicator')),
 body: RefreshIndicator(
 onRefresh: () async {
 setState(() {
 _list = [..._list, ..._list];
 });
 },
 child: ListView.builder(
 itemCount: _list.length,
 itemBuilder: (context, index) {
 return ListTile(
 title: Text(_list[index]),
 );
 },
 ),
 ),
 );
 }
}
</code></pre></div><code>ListView</code> 위젯의 부모 위젯으로 <code>RefreshIndicator</code> 위젯을 사용하였고, <code>onRefresh</code> 함수에는 화면에 표시되고 있는 리스트를 갱신하도록 코드를 작성하였습니다.이렇게 작성하고 앱의 화면을 보면 이전과 같이 리스트가 잘 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator.png" alt="Flutter RefreshIndicator - RefreshIndicator"></picture>이렇게 표시된 리스트를 아래로 당기면 이전과는 다르게 로딩 아이콘(Indicator)이 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_pull.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_pull.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_pull.png" alt="Flutter RefreshIndicator - RefreshIndicator pull"></picture>그리고 당긴 화면을 풀면 다음과 같이 데이터가 추가된 리스트가 잘 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_pull_to_refresh.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_pull_to_refresh.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_pull_to_refresh.png" alt="Flutter RefreshIndicator - RefreshIndicator pull to refresh"></picture><h2 id="리스트가-없는-빈-화면에-적용">리스트가 없는 빈 화면에 적용</h2>처음부터 화면에 표시할 데이터가 있는 경우는 지금까지의 방식만으로 구현이 가능합니다. 하지만, 데이터가 없는 경우 빈 화면을 보여주고, 역시 동일한 방식으로 당겨서 새로고침을 할 경우는 다음과 같이 <code>SingleChildScrollView</code> 위젯의 <code>AlwaysScrollableScrollPhysics</code>을 사용할 수 있습니다.<ul><li><a href="https://deku.posstree.com/ko/flutter/AlwaysScrollableScrollPhysics/" target="_blank">[Flutter] 자식 위젯의 크기와 상관없이 스크롤하기</a></li></ul><div><pre><code>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.'),
 ],
 ),
 ),
 ),
 );
 },
 ),
 ),
 );
 }
}
</code></pre></div>데이터가 없는 경우의 코드만을 보면 다음과 같습니다.<div><pre><code>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.'),
 ],
 ),
 ),
 ),
 );
 },
)
</code></pre></div><code>SingleChildScrollView</code> 위젯에 <code>AlwaysScrollableScrollPhysics</code> 옵션을 사용하면 컨텐츠의 크기와 상관없이 언제든지 스크롤이 되도록 만들 수 있습니다. 이렇게 만든 스크롤에 <code>LayoutBuilder</code> 위젯을 사용하여 화면 전체 크기로 데이터가 없을 때 보여줄 빈 화면을 표시하면 데이터가 없을 때 화면을 만들 수 있습니다.이렇게 코드를 수정하면 다음과 같은 화면을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_no_data.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_no_data.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_no_data.png" alt="Flutter RefreshIndicator - RefreshIndicator with no data"></picture>그런 다음 화면을 당기면 다음과 같이 새로고침 아이콘이 표시되는 것을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_refresh_no_data.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_refresh_no_data.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_refresh_no_data.png" alt="Flutter RefreshIndicator - RefreshIndicator refresh with no data"></picture>그리고 새로고침을 하면, 다음과 같이 데이터가 추가된 화면을 확인할 수 있습니다.<picture><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_new_data_with_no_data.avif" type="image/avif"><source srcset="/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_new_data_with_no_data.webp" type="image/webp"><img src="https://deku.posstree.com/assets/images/category/flutter/2023/RefreshIndicator/refreshindicator_new_data_with_no_data.png" alt="Flutter RefreshIndicator - RefreshIndicator new data with no data"></picture><h2 id="완료">완료</h2>이것으로 <code>RefreshIndicator</code> 위젯을 사용하여 당겨서 새로고침을 사용하는 방법에 대해서 알아보았습니다. 당겨서 새로고침은 거의 모든 리스트 화면에서 구현하고 있으므로, 잘 기억해두면 활용하는데 큰 도움이 될거 같습니다.<code> 제 블로그가 도움이 되셨나요? 하단의 댓글을 달아주시면 저에게 큰 힘이 됩니다! </code><h2>앱 홍보</h2><div> 지금 보고 계신 블로그를 작성하는 <code>Deku</code>가 개발한 앱을 한번 사용해보세요. <code>Deku</code>가 개발한 앱은 Flutter로 개발되었습니다. 관심있으신 분들은 앱을 다운로드하여 사용해 주시면 정말 감사하겠습니다.</div><h2>책 홍보</h2></article></div></div></div>

dev-yakuza

Flutter로 만든 앱에서 리스트를 표시하고 당겨서 새로고침(Pull to refresh)을 사용하여 리스트를 갱신하는 방법에 대해서 알아봅시다.