[flutter] RefreshIndicator를 사용하여 스크롤 위치 유지하기

12 Dec 2023

flutter

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: Scaffold(
        appBar: AppBar(
          title: Text('RefreshIndicator Example'),
        ),
        body: MyList(),
      ),
    );
  }
}

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

class _MyListState extends State<MyList> {
  final GlobalKey<RefreshIndicatorState> _refreshIndicatorKey =
      new GlobalKey<RefreshIndicatorState>();

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      key: _refreshIndicatorKey,
      onRefresh: _handleRefresh,
      child: ListView(
        children: <Widget>[
          for (int i = 0; i < 20; i++) ListTile(title: Text('Item $i')),
        ],
      ),
    );
  }

  Future<void> _handleRefresh() {
    // 새로고침 작업 수행
    return Future.delayed(Duration(seconds: 2));
  }
}

이 예제에서는 RefreshIndicator를 사용하여 리스트를 만들었습니다. onRefresh 콜백에서는 실제 새로고침 작업을 수행합니다.

결론

RefreshIndicator를 사용하면 스크롤 위치를 유지하면서 새로고침 기능을 추가할 수 있습니다. 사용자가 스크롤하는 위치를 유지하는 것이 중요하므로 사용자 경험을 개선하는 데 도움이 됩니다.

샘플 코드 및 자세한 내용은 Flutter 공식 문서를 참조하세요.

이로써 RefreshIndicator를 사용하여 스크롤 위치를 유지하는 방법에 대해 알아보았습니다. 만약 추가 질문이나 문의가 있다면 망설이지 마시고 연락주세요.