[flutter] 플러터 프로바이더를 사용하여 파일 다운로드하기

22 Dec 2023

flutter

이번 글에서는 Flutter 앱에서 파일을 다운로드하는 방법을 알아보겠습니다. 또한, Provider를 사용하여 상태 관리를 하는 방법에 대해서도 알아볼 것입니다.

1. 다운로드 링크 생성

먼저, 다운로드할 파일의 링크를 생성합니다. 이 예제에서는 URL_launcher 패키지를 사용하여 웹 브라우저를 열고 파일을 다운로드하는 기능을 추가할 것입니다.

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

...

launchURL(String url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

위의 코드에서 launchURL 함수는 주어진 URL로 이동하거나 해당 URL을 통해 파일을 다운로드할 수 있는 웹 브라우저를 엽니다.

2. Provider를 사용한 파일 상태 관리

이제, 파일 다운로드 상태를 관리하기 위해 Provider를 사용할 것입니다. 먼저, 다운로드 중인지 여부를 추적하기 위한 DownloadProvider 클래스를 생성합니다.

import 'package:flutter/material.dart';

class DownloadProvider extends ChangeNotifier {
  bool _downloading = false;

  bool get isDownloading => _downloading;

  void startDownload() {
    _downloading = true;
    notifyListeners();
  }

  void finishDownload() {
    _downloading = false;
    notifyListeners();
  }
}

위의 코드에서, DownloadProvider는 isDownloading 변수를 통해 현재 다운로드 상태를 추적하고, startDownload와 finishDownload 함수를 통해 다운로드 상태를 변경합니다.

3. UI 업데이트

이제, UI를 업데이트하여 파일 다운로드 상태를 표시합니다.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'download_provider.dart';

class DownloadButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Consumer<DownloadProvider>(
      builder: (context, downloadProvider, _) => ElevatedButton(
        onPressed: () {
          downloadProvider.startDownload();
          launchURL('https://example.com/file.pdf');
          // 다운로드가 완료된 후에는 downloadProvider.finishDownload()를 호출하여 다운로드 완료 상태로 변경할 수 있습니다.
        },
        child: downloadProvider.isDownloading ? CircularProgressIndicator() : Text('Download'),
      ),
    );
  }
}

위의 코드에서, DownloadButton은 DownloadProvider를 사용하여 현재 다운로드 상태를 관리합니다. 버튼을 누르면 startDownload 함수가 호출되어 다운로드 상태가 활성화되고, 다운로드 중인 경우에는 진행 표시줄을 표시하고, 다운로드가 완료되면 상태를 업데이트하여 완료된 상태를 표시합니다.

이제, Provider를 통해 파일 다운로드를 효과적으로 관리하고 UI를 업데이트할 수 있습니다.

위의 예제에서는 파일이 직접 다운로드되는 대신 웹 브라우저가 열리도록 되어 있습니다. 파일을 앱 내부 저장소로 다운로드하고 싶은 경우에는 다른 방법을 사용해야 합니다.

이제, 플러터에서 파일 다운로드 기능을 구현하고 Provider를 사용하여 상태를 관리하는 방법에 대해 알아보았습니다. 원하는 기능에 맞게 코드를 수정하여 적용해보세요.