Flutter의 파일 다운로드(File Download) 방법

파일 다운로드는 Flutter 애플리케이션에서 서버로부터 파일을 가져와 로컬 저장소에 저장할 수 있게 해주는 중요한 기능입니다. 이를 통해 사용자는 다양한 파일 형식의 콘텐츠를 자신의 기기에 저장하고 사용할 수 있습니다. 이번 글에서는 Flutter에서 파일 다운로드를 구현하는 방법과 이를 구현하는 예제를 자세히 살펴보겠습니다.

1. 파일 다운로드 패키지 설치

Flutter 애플리케이션에서 파일을 다운로드하고 저장하기 위해 http와 path_provider 패키지를 설치합니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
  path_provider: ^2.0.6

 

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다.

2. Android 설정

Android 프로젝트에서 파일 다운로드를 사용하려면 추가적인 설정이 필요하지 않습니다.

3. iOS 설정

iOS 프로젝트에서 파일 다운로드를 사용하려면 Info.plist 파일을 수정해야 합니다. ios/Runner/Info.plist 파일에 다음 설정을 추가합니다.

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>

 

4. 파일 다운로드 구현

이제 Flutter 애플리케이션에서 파일을 다운로드하고 로컬 저장소에 저장하는 기능을 구현해보겠습니다. http 패키지를 사용하여 파일을 다운로드하고, path_provider 패키지를 사용하여 로컬 저장소에 저장합니다.

 

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FileDownloadExample(),
    );
  }
}

class FileDownloadExample extends StatefulWidget {
  @override
  _FileDownloadExampleState createState() => _FileDownloadExampleState();
}

class _FileDownloadExampleState extends State<FileDownloadExample> {
  bool _isDownloading = false;
  String _filePath = '';

  Future<void> _downloadFile(String url, String filename) async {
    setState(() {
      _isDownloading = true;
    });

    try {
      final response = await http.get(Uri.parse(url));

      if (response.statusCode == 200) {
        final directory = await getApplicationDocumentsDirectory();
        final filePath = '${directory.path}/$filename';
        final file = File(filePath);
        await file.writeAsBytes(response.bodyBytes);

        setState(() {
          _filePath = filePath;
        });

        print('File downloaded to $filePath');
      } else {
        print('Failed to download file');
      }
    } catch (e) {
      print('Error: $e');
    }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('File Download Example')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            _isDownloading
                ? CircularProgressIndicator()
                : ElevatedButton(
                    onPressed: () {
                      _downloadFile('https://www.example.com/sample.pdf', 'sample.pdf');
                    },
                    child: Text('Download File'),
                  ),
            SizedBox(height: 20),
            _filePath.isNotEmpty ? Text('File downloaded to: $_filePath') : Container(),
          ],
        ),
      ),
    );
  }
}

 

위 코드는 사용자가 버튼을 클릭하여 파일을 다운로드하고, 로컬 저장소에 저장하는 예제입니다. http.get 메서드를 사용하여 파일을 다운로드하고, File 클래스의 writeAsBytes 메서드를 사용하여 파일을 저장합니다.

 

 

반응형

 

 

5. 다운로드 상태 표시

파일 다운로드 중에 사용자가 다운로드 상태를 확인할 수 있도록 다운로드 상태를 표시하는 방법을 추가할 수 있습니다. 이를 위해 CircularProgressIndicator를 사용하여 다운로드 중임을 표시하고, 다운로드가 완료되면 결과를 화면에 표시합니다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('File Download Example')),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _isDownloading
              ? CircularProgressIndicator()
              : ElevatedButton(
                  onPressed: () {
                    _downloadFile('https://www.example.com/sample.pdf', 'sample.pdf');
                  },
                  child: Text('Download File'),
                ),
          SizedBox(height: 20),
          _filePath.isNotEmpty ? Text('File downloaded to: $_filePath') : Container(),
        ],
      ),
    ),
  );
}

 

위 코드는 다운로드 중일 때 CircularProgressIndicator를 표시하고, 다운로드가 완료되면 파일 경로를 화면에 표시합니다.

6. 파일 열기

다운로드한 파일을 열 수 있는 기능을 추가할 수 있습니다. 이를 위해 open_file 패키지를 사용할 수 있습니다. pubspec.yaml 파일에 다음 의존성을 추가합니다.

dependencies:
  open_file: ^3.2.1

 

그리고 pub get 명령어를 실행하여 패키지를 설치합니다. 파일을 열기 위한 코드를 추가합니다.

 

import 'package:open_file/open_file.dart';

Future<void> _openFile(String filePath) async {
  final result = await OpenFile.open(filePath);
  print(result.message);
}

 

버튼을 추가하여 다운로드된 파일을 열 수 있도록 합니다.

 

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('File Download Example')),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _isDownloading
              ? CircularProgressIndicator()
              : ElevatedButton(
                  onPressed: () {
                    _downloadFile('https://www.example.com/sample.pdf', 'sample.pdf');
                  },
                  child: Text('Download File'),
                ),
          SizedBox(height: 20),
          _filePath.isNotEmpty
              ? Column(
                  children: [
                    Text('File downloaded to: $_filePath'),
                    ElevatedButton(
                      onPressed: () {
                        _openFile(_filePath);
                      },
                      child: Text('Open File'),
                    ),
                  ],
                )
              : Container(),
        ],
      ),
    ),
  );
}

 

위 코드는 파일을 다운로드한 후 파일을 열 수 있는 버튼을 추가한 예제입니다.

결론

Flutter 애플리케이션에서 파일 다운로드 기능을 구현하면 사용자가 서버로부터 파일을 가져와 로컬 저장소에 저장할 수 있습니다. http 패키지를 사용하여 파일을 다운로드하고, path_provider 패키지를 사용하여 로컬 저장소에 저장하는 방법을 통해 파일 다운로드 기능을 구현할 수 있습니다. 이번 글에서 소개한 방법들을 활용하여 Flutter 애플리케이션에서 파일 다운로드를 효율적으로 사용해보세요. 파일 다운로드 기능을 통해 애플리케이션의 기능을 확장하고, 사용자 경험을 향상시킬 수 있습니다.