[flutter] dio_retry 패키지를 사용하여 API 호출에 대한 로딩 표시기 보여주기

18 Dec 2023

flutter

앱을 개발하다 보면 API 호출 시 일시적인 네트워크 문제로 실패할 수 있습니다. 사용자에게 로딩 표시기를 통해 작업이 진행 중임을 알려주는 것은 중요합니다. 이번 포스트에서는 Flutter 앱에서 dio_retry 패키지를 사용하여 API 호출 시 로딩 표시기를 보여주는 방법에 대해 알아보겠습니다.

dio_retry 패키지란?

dio_retry는 Flutter에서 HTTP 요청 라이브러리인 dio에 재시도 로직을 추가할 수 있도록 도와주는 패키지입니다. 이를 사용하면 네트워크 요청 중 실패한 경우 재시도를 하거나 실패 시 적절한 오류 처리를 할 수 있습니다.

flutter 앱에 dio_retry 패키지 추가하기

먼저, 프로젝트의 pubspec.yaml 파일에 dio_retry 패키지를 추가합니다.

dependencies:
  dio: ^4.0.0
  dio_retry: ^4.0.0
  retry: ^3.0.1

이후, 터미널에서 flutter pub get 명령어를 실행하여 패키지를 설치합니다.

로딩 표시기 추가하기

이제 API 호출을 할 스크린에 로딩 표시기를 추가해보겠습니다. 아래는 dio_retry 패키지를 사용하여 API 호출 시 로딩 표시기를 보여주는 간단한 예제 코드입니다.

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:dio_retry/dio_retry.dart';

class ApiScreen extends StatefulWidget {
  @override
  _ApiScreenState createState() => _ApiScreenState();
}

class _ApiScreenState extends State<ApiScreen> {
  bool _loading = false;
  late Dio _dio;

  @override
  void initState() {
    super.initState();
    _dio = Dio();
    _dio.interceptors.add(
      RetryInterceptor(
        dio: _dio,
        options: const RetryOptions(
          retries: 3, // 요청 실패 시 재시도 횟수
          retryInterval: const Duration(seconds: 1), // 재시도 간격
        ),
      ),
    );
  }

  Future<void> _fetchData() async {
    setState(() {
      _loading = true;
    });

    try {
      Response response = await _dio.get('https://api.example.com/data');
      // API 호출 성공 시 처리 로직
    } catch (e) {
      // API 호출 실패 시 처리 로직
    } finally {
      setState(() {
        _loading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('API Screen'),
      ),
      body: Center(
        child: _loading ? CircularProgressIndicator() : ElevatedButton(
          onPressed: _fetchData,
          child: Text('Fetch Data'),
        ),
      ),
    );
  }
}

위 코드에서는 _loading 상태를 사용하여 로딩 중인지를 표시하고, RetryInterceptor를 사용하여 HTTP 요청을 재시도하도록 설정했습니다.

이제 dio_retry 패키지를 사용하여 API 호출 시 로딩 표시기를 보여주는 방법에 대해 알게 되었습니다. 네트워크 요청 중 실패하더라도 사용자에게 작업이 진행 중임을 명확하게 알려줄 수 있습니다.