[flutter] RefreshIndicator를 사용하여 테이블 목록 새로 고침하기

12 Dec 2023

flutter

플러터(Flutter) 애플리케이션을 개발하다 보면, 테이블이나 목록을 화면에 표시하는 경우가 많습니다. 사용자가 목록을 아래로 당겨서 새로고침할 수 있는 기능을 구현하고 싶을 때가 있습니다. 이때 RefreshIndicator 위젯을 사용하여 목록을 새로 고침할 수 있습니다.

RefreshIndicator란?

RefreshIndicator는 사용자가 화면을 당겨서 새로 고침할 수 있는 기능을 제공하는 위젯입니다. 사용자가 목록을 당기면 onRefresh 콜백 함수를 실행하여 새로고침을 처리할 수 있습니다.

테이블 목록에 RefreshIndicator 추가하기

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('테이블 목록 새로 고침'),
        ),
        body: MyTableList(),
      ),
    );
  }
}

class MyTableList extends StatefulWidget {
  @override
  _MyTableListState createState() => _MyTableListState();
}

class _MyTableListState extends State<MyTableList> {
  // 가상의 테이블 데이터
  List<String> items = List.generate(20, (index) => '아이템 $index');

  Future<void> _refresh() async {
    // 여기에 새로고침 로직을 구현합니다.
    // 새로고침 후에는 setState 함수를 사용하여 화면을 갱신할 수 있습니다.
    setState(() {
      // 새로운 데이터를 가져오거나 기존 데이터를 다시 불러옵니다.
    });
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _refresh,
      child: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(items[index]),
          );
        },
      ),
    );
  }
}

위의 예제는 RefreshIndicator를 사용하여 테이블 목록을 새로고침하는 간단한 플러터 애플리케이션 코드입니다. 사용자가 목록을 아래로 당기면 _refresh 함수가 호출되며, 여기에는 실제로 새로고침을 처리하는 로직을 구현할 수 있습니다.

_refresh 함수 내부에서는 데이터를 새로 가져오거나 기존 데이터를 다시 불러와 화면을 갱신할 수 있습니다.

이렇게 RefreshIndicator를 사용하여 테이블 목록을 새로 고침할 수 있습니다.

결론

RefreshIndicator를 사용하여 플러터 애플리케이션에서 테이블이나 목록을 새로 고침하는 기능을 구현할 수 있습니다. 사용자 친화적인 화면 갱신을 위해 활용할 수 있는 유용한 위젯 중 하나입니다.

플러터 공식 문서

이상으로 플러터의 RefreshIndicator를 사용하여 테이블 목록을 새로 고침하는 방법에 대해 알아보았습니다. 여러분의 애플리케이션에 적용하여 보다 나은 사용자 경험을 제공할 수 있기를 바랍니다.