[flutter] RefreshIndicator를 사용하여 로그아웃 후 데이터 새로 고침하기

12 Dec 2023

flutter

앱에서 로그아웃 후에 데이터를 새로 고침해야 하는 경우가 있습니다. Flutter에서는 RefreshIndicator를 사용하여 간단하게 이를 구현할 수 있습니다.

1. RefreshIndicator 추가하기

먼저, 로그아웃 후에 데이터를 새로 고칠 화면에 RefreshIndicator를 추가합니다.

import 'package:flutter/material.dart';

class MyRefreshableScreen extends StatefulWidget {
  @override
  _MyRefreshableScreenState createState() => _MyRefreshableScreenState();
}

class _MyRefreshableScreenState extends State<MyRefreshableScreen> {
  Future<void> _refreshData() async {
    // 데이터를 새로고침하는 비동기 작업 수행
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('데이터 화면'),
      ),
      body: RefreshIndicator(
        onRefresh: _refreshData,
        child: ListView(
          children: <Widget>[
            // 데이터 표시 위젯들
          ],
        ),
      ),
    );
  }
}

2. 로그아웃 후 RefreshIndicator 호출하기

로그아웃 버튼이 있는 화면에서는 로그아웃 후 RefreshIndicator를 호출하여 데이터를 새로 고칠 수 있습니다. 이를 위해 해당 화면에 접근하여 RefreshIndicator를 호출하는 메서드를 작성합니다.

import 'package:flutter/material.dart';

class MyLogoutScreen extends StatelessWidget {
  Future<void> _logout() async {
    // 로그아웃 처리
  }

  void _handleLogoutButtonPressed(BuildContext context) async {
    await _logout();
    _refreshData(context);
  }

  void _refreshData(BuildContext context) {
    final _refreshableScreenKey = GlobalKey<_MyRefreshableScreenState>();
    final _refreshableState = _refreshableScreenKey.currentState;
    _refreshableState?.refreshData(); // MyRefreshableScreen의 refreshData 메서드 호출
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로그아웃 화면'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _handleLogoutButtonPressed(context),
          child: Text('로그아웃'),
        ),
      ),
    );
  }
}

요약

이제 RefreshIndicator를 사용하여 로그아웃 후 데이터를 새로 골칠하는 방법에 대해 알아보았습니다. RefreshIndicator를 활용하면 간단하게 데이터를 새로 고칠 수 있으며, 사용자들은 항상 최신 정보를 볼 수 있게 될 것입니다.

더 자세한 내용은 Flutter 공식 문서를 참고하세요.