Riverpod를 사용하여 파일 다운로드 기능 추가하기

Riverpod는 Flutter 상태 관리 라이브러리로, 앱의 상태를 효과적으로 관리하고 공유하는 데 도움을 줍니다. 이 기능을 이용하면 파일 다운로드 기능을 간단하게 구현할 수 있습니다.

Step 1: Riverpod 라이브러리를 추가하기

먼저, pubspec.yaml 파일에서 Riverpod 라이브러리를 추가해야 합니다. 다음 코드를 dependencies 섹션에 추가하세요:

dependencies:
  flutter:
    sdk: flutter
  riverpod: ^0.15.0

라이브러리를 추가한 후, 터미널에서 flutter pub get 명령어를 실행하여 의존성을 설치하세요.

Step 2: Provider 생성하기

파일 다운로드 기능을 구현하기 위해, Provider를 사용하여 앱의 상태를 관리합니다. 다음과 같은 코드를 작성하여 Provider를 생성하세요:

import 'package:flutter_riverpod/flutter_riverpod.dart';

final fileProvider = Provider<File>((ref) => null);

위 코드에서 fileProvider는 파일을 나타내는 Provider입니다. Provider의 초기 값은 null로 설정되어 있습니다.

Step 3: 파일 다운로드 처리하기

이제 파일 다운로드 기능을 처리할 수 있도록 코드를 작성합니다. 파일을 다운로드하고, 다운로드 완료 후에 fileProvider 값을 업데이트합니다. 다음과 같은 코드를 사용하여 파일 다운로드 로직을 구현하세요:

import 'package:dio/dio.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

final fileProvider = Provider<File>((ref) => null);

final downloadFile = FutureProvider.family<File, String>((ref, url) async {
  final dio = Dio();
  final response = await dio.get(url);
  
  final file = File('${ref.read(fileProvider).path}/downloaded_file');
  await file.writeAsBytes(response.data);

  ref.read(fileProvider).update((value) => file);
  return file;
});

위 코드에서 downloadFile은 파일을 다운로드하는 FutureProvider입니다. url 매개 변수를 통해 다운로드할 파일의 URL을 전달합니다. downloadFile 메서드 내에서 파일을 다운로드하고, 다운로드가 완료되면 fileProvider 값을 업데이트합니다.

Step 4: UI와 연결하기

마지막으로, 파일 다운로드 기능을 UI와 연결합니다. Consumer 위젯을 사용하여 Provider 값을 구독하고, 파일 다운로드 버튼을 표시합니다. 다음 코드를 사용하여 파일 다운로드 버튼을 구현하세요:

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

void main() {
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('File Downloader')),
        body: Center(
          child: Consumer(
            builder: (context, watch, _) {
              final fileState = watch(fileProvider);
              if (fileState == null) {
                return ElevatedButton(
                  onPressed: () => context.read(downloadFile('your_file_url')),
                  child: Text('Download File'),
                );
              } else {
                return Text('File Downloaded: ${fileState.path}');
              }
            },
          ),
        ),
      ),
    );
  }
}

위 코드에서 downloadFile('your_file_url')의 'your_file_url'을 다운로드할 파일의 실제 URL로 대체하세요.

이제 앱을 실행하면 파일 다운로드 버튼이 표시되고, 버튼을 클릭하면 파일이 다운로드됩니다. 다운로드가 완료되면 파일 경로가 표시됩니다.

결론

Riverpod를 사용하여 파일 다운로드 기능을 구현하는 방법에 대해 알아보았습니다. Riverpod의 Provider를 사용하면 앱의 상태를 관리하고 공유하기가 매우 간단해집니다. 이를 활용하여 다른 기능도 추가해보세요.

참고 자료: