[flutter] dio_retry 패키지를 사용하여 API 호출 시 로딩 상태 표시하기

18 Dec 2023

flutter

이번 포스트에서는 Flutter 앱에서 API 호출 시 로딩 상태를 표시하는 방법에 대해 알아보겠습니다. 우리는 dio_retry 패키지를 사용하여 API 호출을 수행하고, 그 동안 로딩 상태를 표시할 것입니다.

1. dio_retry 패키지 추가하기

먼저 dio_retry 패키지를 프로젝트에 추가해야 합니다. 이를 위해서 pubspec.yaml 파일을 열고 dependencies 섹션에 아래와 같이 패키지를 추가합니다.

dependencies:
  dio: ^4.0.0
  dio_retry: ^4.0.0

이제 패키지를 추가한 후에는 flutter pub get 명령어를 실행하여 의존성을 업데이트합니다.

2. API 호출과 로딩 상태 관리

다음으로, API 호출과 로딩 상태 관리를 위한 코드를 작성해야 합니다. 아래는 dio_retry 패키지를 사용하여 API 호출 및 로딩 상태 표시를 관리하는 예제 코드입니다.

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

class ApiCallScreen extends StatefulWidget {
  @override
  _ApiCallScreenState createState() => _ApiCallScreenState();
}

class _ApiCallScreenState extends State<ApiCallScreen> {
  bool _loading = false;
  Dio _dio;

  @override
  void initState() {
    super.initState();
    _dio = Dio();
    _dio.interceptors.add(RetryInterceptor(
      dio: _dio,
      options: const RetryOptions(
        retries: 3,
      ),
    ));
  }

  Future<void> _fetchData() async {
    setState(() {
      _loading = true;
    });
    try {
      Response response = await _dio.get('https://api.example.com/data');
      // handle response data
    } catch (e) {
      // handle error
    } finally {
      setState(() {
        _loading = false;
      });
    }
  }

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

위의 코드에서 _loading 변수를 사용하여 로딩 상태를 관리하고, _fetchData 함수 내에서 API를 호출할 때 로딩 상태를 설정 및 해제합니다.

이제 위의 코드를 참고하여 필요한 API 호출 및 로딩 상태 관리를 수행할 수 있습니다.

3. 마무리

이제 dio_retry 패키지를 사용하여 API 호출 시 로딩 상태를 효과적으로 관리하는 방법에 대해 알아보았습니다. 이를 활용하여 Flutter 앱에서 API 호출 시 더 나은 사용자 경험을 제공할 수 있습니다.

참고: dio_retry 패키지