[flutter] Dio를 사용하여 파일 다운로드의 진행 상태를 표시하는 방법을 알려주세요.

11 Dec 2023

flutter

flutter pub add dio

Dart 코드에서 Dio를 사용하여 파일을 다운로드하고 진행 상태를 표시하기 위해서는 Dio의 download 메서드를 사용해야 합니다. 또한, onReceiveProgress 콜백을 등록하여 다운로드 진행 상태를 받아올 수 있습니다. 아래는 이를 구현하는 예제 코드입니다.

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

class DownloadPage extends StatefulWidget {
  @override
  _DownloadPageState createState() => _DownloadPageState();
}

class _DownloadPageState extends State<DownloadPage> {
  bool _isDownloading = false;
  double _progress = 0;

  void downloadFile() async {
    setState(() {
      _isDownloading = true;
      _progress = 0;
    });

    String fileUrl = 'Your_File_Download_URL';
    String savePath = 'Your_Save_Path';

    try {
      await Dio().download(
        fileUrl,
        savePath,
        onReceiveProgress: (received, total) {
          setState(() {
            _progress = (received / total) * 100;
          });
        },
      );
    } catch (e) {
      // Handle error
    }

    setState(() {
      _isDownloading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Download Page'),
      ),
      body: Center(
        child: _isDownloading
            ? Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  CircularProgressIndicator(),
                  SizedBox(height: 20),
                  Text('Downloading: ${_progress.toStringAsFixed(0)}%'),
                ],
              )
            : ElevatedButton(
                onPressed: downloadFile,
                child: Text('Start Download'),
              ),
      ),
    );
  }
}

위 코드를 보면 Dio를 이용하여 파일을 다운로드하는 페이지를 만들었습니다. downloadFile 메서드를 호출하여 다운로드를 시작하면, 진행 상태가 퍼센트로 표시되며, 다운로드가 완료되면 버튼이 다시 활성화됩니다.

이렇게 하면 Flutter 프로젝트에서 Dio를 사용하여 파일 다운로드의 진행 상태를 표시할 수 있습니다.