[flutter] RefreshIndicator를 사용하여 데이터 가져오기 전에 로딩 상태 표시하기

12 Dec 2023

flutter

안녕하세요! Flutter 앱에서 사용자가 새로고침을 요청할 때 새로운 데이터를 가져오는 동안 로딩 상태를 표시하고 싶다면, RefreshIndicator를 사용할 수 있습니다. 이 기능은 사용자가 화면을 당겨서 새로고침할 때 발동되며, 사용자에게 로딩 중임을 시각적으로 알려줍니다.

이 포스트에서는 Flutter에서 RefreshIndicator를 사용하여 데이터를 가져오기 전에 로딩 상태를 표시하는 방법에 대해 알아보겠습니다.

1. RefreshIndicator 추가하기

먼저, RefreshIndicator 위젯을 사용하여 데이터를 가져오는 화면에 추가해야 합니다. 이를 통해 사용자가 화면을 당겨서 새로고침할 수 있습니다.

import 'package:flutter/material.dart';

class MyDataScreen extends StatefulWidget {
  @override
  _MyDataScreenState createState() => _MyDataScreenState();
}

class _MyDataScreenState extends State<MyDataScreen> {
  Future<void> _fetchData() async {
    // 데이터 가져오기
  }

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

위 코드에서 RefreshIndicator와 ListView를 사용하여 데이터를 표시하는 화면을 구성하였습니다.

2. 데이터 가져오기

데이터를 새로고침하는 메서드인 _fetchData를 정의합니다. 이 메서드는 onRefresh 콜백으로 전달되어 사용자가 화면을 당겼을 때 호출됩니다.

Future<void> _fetchData() async {
  // 로딩 상태 표시
  setState(() {
    _isLoading = true;
  });

  // 데이터 가져오기
  await fetchDataFromAPI();

  // 로딩 상태 숨기기
  setState(() {
    _isLoading = false;
  });
}

위 코드에서 _fetchData 메서드에서는 데이터를 가져오기 전에 _isLoading 변수를 true로 설정하고, 데이터를 가져온 후에 다시 false로 설정하여 로딩 상태를 표시 및 숨깁니다.

3. 로딩 상태 표시하기

마지막으로, 화면에 로딩 상태를 표시하는 CircularProgressIndicator 위젯을 추가합니다. 이 위젯은 _fetchData 메서드에서 _isLoading 값을 기반으로 화면에 표시됩니다.

bool _isLoading = false;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('내 데이터'),
    ),
    body: RefreshIndicator(
      onRefresh: _fetchData,
      child: _isLoading ? Center(child: CircularProgressIndicator()) : ListView(
        children: <Widget>[
          // 데이터 표시
        ],
      ),
    ),
  );
}

위 코드에서는 _isLoading 변수에 따라 CircularProgressIndicator가 표시되도록 설정하였습니다.

이제 사용자가 화면을 당겨서 새로고침할 때, RefreshIndicator를 사용하여 데이터를 가져오기 전에 로딩 상태를 표시할 수 있게 되었습니다.

이렇게 RefreshIndicator를 사용하여 데이터를 가져오기 전에 로딩 상태를 표시하는 방법에 대해 알아보았습니다. 더 많은 기능들을 살펴보고 싶다면 Flutter 공식 문서를 참고하세요!