Flutter文件下载与查看插件download_viewer的使用

Flutter文件下载与查看插件download_viewer的使用

一个用于下载和预览文件（如图片、PDF和文档）的Flutter插件。该插件支持使用原生应用或自定义预览器来查看文件。

特性

  • 从提供的URL下载文件。
  • 预览图片、PDF和文档。
  • 选择使用原生文件查看器或自定义文件查看器。
  • 使用可自定义的小部件显示下载进度。

安装

在你的 pubspec.yaml 文件中添加以下依赖项：

dependencies:
  file_downloader_previewer: ^0.0.1

示例代码

以下是一个完整的示例代码，展示了如何使用 download_viewer 插件进行文件下载和预览。

/*
* [@Author](/user/Author): Jiten Basnet on 15/06/2024
* [@Company](/user/Company): EB Pearls
*/
import 'dart:async';
import 'dart:developer';
import 'package:download_viewer/download_viewer.dart';
import 'package:flutter/material.dart';

void main() => runZonedGuarded(() async {
      WidgetsFlutterBinding.ensureInitialized();
      runApp(const MainApp());
    },
        (Object error, StackTrace stackTrace) =>
            log('DOWNLOAD_VIEWER_ERROR::${error.toString()}));

class MainApp extends StatelessWidget {
  const MainApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: DownloadViewerWidget(),
    );
  }
}

class DownloadViewerWidget extends StatefulWidget {
  const DownloadViewerWidget({super.key});

  [@override](/user/override)
  State<DownloadViewerWidget> createState() => _DownloadViewerWidgetState();
}

class _DownloadViewerWidgetState extends State<DownloadViewerWidget> {
  Completer _dialogCompleter = Completer<void>();

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Download_Viewer'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            // 使用 [useDefaultProgressDialog] 设置为 false 来隐藏默认的下载对话框，并使用自己的下载对话框
            // 创建自己的对话框并使用 streamController 更新进度信息
            // 例如：
            // showDialog(
            //   context: context,
            //   builder: (BuildContext context) {
            //     return StreamBuilder<String>(
            //       stream: _downloadStreamController?.stream,
            //       builder: (context, snapshot) {
            //         return Center(
            //           child: Text(
            //             snapshot.data ?? '',
            //           ),
            //         );
            //       },
            //     );
            //   },
            // );

            DownloadViewer.downloadAndViewFile(
              onDownloadComplete: () {
                Navigator.of(context, rootNavigator: true).pop();
              },
              onDownloadProgress: (Stream<String> progress) {
                // 更新进度信息
                // _downloadStreamController.add(progress);
              },
              context,
              displayInNativeApp: false,
              downloadUrl:
                  "https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F869bfbaec9c64415ae68235d9b7b1425",
              fileName:
                  'assets_YJIGb4i01jvw0SRdL5Bt_869bfbaec9c64415ae68235d9b7b1425.jpeg',
              downloadFolderName: 'DownloadViewer',
              onDownloadFailed: (String fa) {},
              // customPreviewBuilder: (filename, savedPath) {
              //   final ImagePreviewWidget pdfRoute = ImagePreviewWidget(
              //       imagePath: savedPath, fileName: filename);
              //
              //   Navigator.of(context)
              //       .push(MaterialPageRoute(builder: (context) => pdfRoute));
              // },
            );
          },
          child: const Text('下载并查看'),
        ),
      ),
    );
  }
}

更多关于Flutter文件下载与查看插件download_viewer的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter文件下载与查看插件download_viewer的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用download_viewer插件来实现文件下载与查看的一个基本示例。download_viewer插件可以帮助你实现文件的下载以及使用设备上的默认应用程序打开这些文件。

首先，你需要在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  download_viewer: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的Flutter项目中，你可以按照以下步骤来实现文件下载与查看功能：

  1. 导入必要的包：
import 'package:flutter/material.dart';
import 'package:download_viewer/download_viewer.dart';
  1. 定义下载和查看文件的函数：
void _downloadAndViewFile(String fileUrl) async {
  // 下载文件
  final downloadResult = await DownloadViewer.downloadFile(
    url: fileUrl,
    fileName: 'example_file', // 你可以指定文件名，如果不指定则使用URL中的文件名
    saveDir: DownloadViewer.appDocumentsDirectory, // 保存文件的目录
  );

  if (downloadResult.status == DownloadStatus.completed) {
    // 文件下载完成后打开文件
    final openResult = await DownloadViewer.openFile(
      filePath: downloadResult.filePath!, // 下载的文件路径
      fileTypeHint: 'application/pdf', // 文件类型提示，可以是pdf, image, text等
    );

    if (openResult.status != OpenStatus.completed) {
      // 打开文件失败时处理
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Failed to open file')),
      );
    }
  } else {
    // 下载文件失败时处理
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(content: Text('Failed to download file')),
    );
  }
}
  1. 在UI中调用下载和查看文件的函数：
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Download and View File Example'),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 替换为你要下载的文件URL
              _downloadAndViewFile('https://example.com/path/to/your/file.pdf');
            },
            child: Text('Download and View File'),
          ),
        ),
      ),
    );
  }
}

这个示例展示了如何使用download_viewer插件来下载并查看一个PDF文件。你可以根据需要修改fileUrl和fileTypeHint来适应不同类型的文件。

请确保你替换https://example.com/path/to/your/file.pdf为实际的文件URL，并根据需要调整文件名和保存目录。此外，根据文件类型的不同，你可能需要调整fileTypeHint的值，以便设备能够使用正确的应用程序打开文件。

回到顶部