[flutter] RefreshIndicator를 사용하여 새로운 데이터를 추가할 때 새로 고침하기

12 Dec 2023

flutter

Flutter 앱을 개발하다보면 사용자가 새로운 데이터를 추가하거나 업데이트할 때 화면을 새로 고쳐야 하는 경우가 있습니다. 이때 RefreshIndicator를 사용하면 앱 화면을 아래로 당겨 새로고침할 수 있습니다.

RefreshIndicator 위젯을 사용하면 사용자가 리스트를 당겨서 새로 고치는 제스처를 사용할 수 있습니다. 이를 통해 앱의 데이터를 업데이트하고 사용자 경험을 개선할 수 있습니다.

RefreshIndicator 사용하기

아래는 RefreshIndicator를 사용하여 리스트를 새로 고치는 간단한 예제입니다.

// RefreshIndicator를 사용한 리스트 예제
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyList(),
    );
  }
}

class MyList extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<MyList> {
  List<String> items = ['Item 1', 'Item 2', 'Item 3'];

  Future<void> _onRefresh() async {
    // 새로운 데이터 가져오는 로직
    await Future.delayed(Duration(seconds: 1));
    setState(() {
      items.add('New Item');
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('RefreshIndicator 예제')),
      body: RefreshIndicator(
        onRefresh: _onRefresh,
        child: ListView.builder(
          itemCount: items.length,
          itemBuilder: (context, index) {
            return ListTile(
              title: Text(items[index]),
            );
          },
        ),
      ),
    );
  }
}

위 예제에서 RefreshIndicator는 onRefresh 콜백을 통해 리스트를 새로고침합니다. _onRefresh 메서드에서 새로운 데이터를 가져오는 로직을 처리하고, 이후 setState를 호출하여 화면을 업데이트합니다.

이렇게 RefreshIndicator를 사용하면 사용자가 화면을 아래로 당기는 제스처를 통해 데이터를 실시간으로 업데이트할 수 있습니다.

결론

Flutter 앱에서 사용자가 화면을 새로 고쳐서 실시간으로 데이터를 업데이트하는 기능을 구현할 때 RefreshIndicator를 사용할 수 있습니다. 이를 통해 사용자의 경험을 개선하고 앱의 성능을 향상시킬 수 있습니다.

더 많은 정보를 원하시면 Flutter 공식 문서를 참고하세요.