[flutter] RefreshIndicator를 사용하여 캐싱된 데이터 새로 고침하기

12 Dec 2023

flutter

이제 많은 앱이 인터넷 연결 없이도 작동하도록 캐싱된 데이터를 사용합니다. 그러나 사용자는 데이터를 갱신하기 위해 화면을 새로 고쳐야 할 수도 있습니다. Flutter 앱을 개발하는 경우에는 RefreshIndicator를 사용하여 화면을 새로 고치는 기능을 손쉽게 구현할 수 있습니다.

여기에서는 RefreshIndicator를 사용하여 캐싱된 데이터를 새로 고치는 방법에 대해 살펴봅니다.

1. 캐시된 데이터를 가지고 있는 위젯 만들기

우선, 캐시된 데이터를 가지고 있는 위젯을 만듭니다. 이 예제에서는 FutureBuilder를 통해 캐시된 데이터를 가져오고 화면에 표시합니다.

Future<List<Data>> fetchData() async {
  // 캐시된 데이터 가져오기
}

class CachedDataWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<Data>>(
      future: fetchData(),
      builder: (context, snapshot) {
        if (snapshot.hasData) {
          return ListView.builder(
            itemCount: snapshot.data.length,
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(snapshot.data[index].title),
                subtitle: Text(snapshot.data[index].subtitle),
              );
            },
          );
        } else {
          return CircularProgressIndicator();
        }
      },
    );
  }
}

2. RefreshIndicator 추가하기

이제 RefreshIndicator를 CachedDataWidget에 추가합니다.

class RefreshableCachedDataWidget extends StatefulWidget {
  @override
  _RefreshableCachedDataWidgetState createState() => _RefreshableCachedDataWidgetState();
}

class _RefreshableCachedDataWidgetState extends State<RefreshableCachedDataWidget> {
  Future<void> _refreshData() async {
    // 데이터를 새로고침
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refreshData,
      child: CachedDataWidget(),
    );
  }
}

RefreshIndicator에서 onRefresh 콜백에는 데이터를 다시 가져오고 화면을 새로고침하는 코드를 작성합니다.

3. 화면에 RefreshableCachedDataWidget 사용하기

마지막으로, RefreshableCachedDataWidget를 화면에 사용하여 캐시된 데이터를 새로 고칠 수 있는 화면을 만듭니다.

class MyScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('캐시된 데이터 새로고침'),
      ),
      body: RefreshableCachedDataWidget(),
    );
  }
}

이제 MyScreen을 실행하면 사용자가 아래로 당기는 제스처로 캐시된 데이터를 갱신할 수 있게 됩니다.

정말 쉽죠? Flutter의 RefreshIndicator를 사용하여 캐시된 데이터를 새로 고치는 것은 매우 간단합니다. 이 기능을 활용하여 사용자가 항상 최신의 데이터를 볼 수 있도록 앱을 개선해보세요.

더 많은 정보를 원하시거나 문제가 있으시면 Flutter 공식 문서를 참고하시기 바랍니다.