[flutter] RefreshIndicator를 사용하여 네트워크 요청 후 데이터 새로 고침하기

12 Dec 2023

flutter

안녕하세요! 이번 포스트에서는 Flutter 앱에서 네트워크 요청을 하고 데이터를 새로고침하는 방법에 대해 알아보겠습니다.

1. RefreshIndicator란?

RefreshIndicator는 사용자가 스크롤하여 새로 고침할 수 있는 기능을 제공하는 Flutter 위젯입니다. 이를 사용하여 네트워크 요청을 하고 데이터를 새로고침할 수 있습니다.

2. 네트워크 요청 및 데이터 새로 고침

우선, http 패키지를 사용하여 네트워크 요청을 보내고 데이터를 가져오겠습니다.

import 'package:http/http.dart' as http;

Future<String> fetchData() async {
  final response = await http.get(Uri.parse('https://api.example.com/data'));
  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception('Failed to load data');
  }
}

위 코드는 fetchData 함수를 사용하여 네트워크 요청을 보내고, 성공적으로 데이터를 가져오면 해당 데이터를 반환합니다.

이제 RefreshIndicator를 사용하여 데이터를 새로고침하는 방법을 알아보겠습니다.

RefreshIndicator(
  onRefresh: () {
    return fetchData();
  },
  child: ListView(
    children: <Widget>[
      // 데이터 표시
    ],
  ),
)

위 코드에서 onRefresh 콜백 함수에서는 fetchData() 함수를 호출하여 데이터를 새로고침합니다.

3. 완성된 예제

아래는 전체적인 예제 코드입니다. 이 코드를 참고하여 원하는 대로 데이터를 새로고침하는 기능을 구현해 보세요.

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('데이터 새로고침 예제')),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  Future<String> fetchData() async {
    final response = await http.get(Uri.parse('https://api.example.com/data'));
    if (response.statusCode == 200) {
      return response.body;
    } else {
      throw Exception('Failed to load data');
    }
  }

  @override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: () {
        return fetchData();
      },
      child: ListView(
        children: <Widget>[
          // 데이터 표시
        ],
      ),
    );
  }
}

이제 여러분은 Flutter에서 RefreshIndicator를 사용하여 네트워크 요청 후 데이터를 새로고침하는 방법을 알게 되었습니다. 원하는 페이지에서 해당 기능을 구현하여 사용자 경험을 향상시킬 수 있을 것입니다.

다음 포스트에서 더 다양한 Flutter 개발 팁과 기술을 소개하겠습니다. 감사합니다!

참고 자료: Flutter 공식 문서 - RefreshIndicator