[flutter] RefreshIndicator를 사용하여 앱의 새로 고침 기능 구현하기

12 Dec 2023

flutter

안녕하세요! 이번 포스트에서는 Flutter 앱에 새로 고침 기능을 구현하는 방법에 대해 알아보겠습니다. RefreshIndicator 위젯을 사용하여 사용자가 화면을 아래로 당기면 새로 고침 동작이 시작되고, 데이터를 갱신하여 사용자에게 최신 정보를 제공할 수 있습니다.

RefreshIndicator란?

RefreshIndicator는 Flutter에서 제공하는 위젯으로, 사용자가 화면을 아래로 당겨서 새로 고침을 실행할 수 있도록 하는 기능을 구현할 때 사용됩니다. 이를 통해 앱의 사용자 경험을 향상시킬 수 있습니다.

RefreshIndicator 사용하기

아래는 RefreshIndicator를 구현하는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';

class MyRefreshIndicatorApp extends StatefulWidget {
  @override
  _MyRefreshIndicatorAppState createState() => _MyRefreshIndicatorAppState();
}

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

  Future<void> _handleRefresh() async {
    // 데이터 새로고침 로직 구현
    await Future.delayed(Duration(seconds: 2));
    setState(() {
      items.add('New Item');
    });
  }

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

void main() => runApp(MaterialApp(home: MyRefreshIndicatorApp()));

위 코드에서는 RefreshIndicator를 사용하여 리스트를 표시하고, 사용자가 아래로 당길 때 새로 고침을 수행하는 동작을 구현했습니다.

요약

Flutter 앱에서 RefreshIndicator를 사용하여 앱의 화면을 아래로 당겨서 새로 고침을 구현하는 방법에 대해 알아보았습니다. 사용자가 최신 정보를 얻고 더 나은 사용자 경험을 제공하기 위해 RefreshIndicator를 적절히 활용할 수 있습니다.

더 많은 정보는 공식 문서를 참고하세요!