Flutter网络文件缓存插件network_file

Flutter网络文件缓存插件network_file_cached的使用

network_file_cached 是一个用于在Flutter应用中缓存网络文件的插件。它可以帮助你高效地加载和缓存PDF、图片等文件，避免重复下载，提升用户体验。本文将通过两个示例来展示如何使用 network_file_cached 插件：一个是简单的PDF文件缓存显示，另一个是带有下载进度指示器的PDF文件缓存显示。

1. 简单的PDF文件缓存显示

在这个示例中，我们将展示如何使用 network_file_cached 插件来缓存并显示PDF文件。我们使用 FutureBuilder 来处理异步文件下载，并在文件下载完成后使用 PDFView 组件来显示PDF内容。

import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:network_file_cached/network_file_cached.dart';

class FileCacheSample extends StatefulWidget {
  const FileCacheSample({super.key, required this.url});

  final String url;

  [@override](/user/override)
  State<FileCacheSample> createState() => _FileCacheSampleState();
}

class _FileCacheSampleState extends State<FileCacheSample> {
  Future<File>? file;

  [@override](/user/override)
  void initState() {
    super.initState();
    // 在初始化时调用 getFile() 方法来下载或获取缓存文件
    file = getFile();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example apps'),
      ),
      body: FutureBuilder(
        future: file, // 使用 FutureBuilder 来等待文件下载完成
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            // 如果文件下载成功，使用 PDFView 显示 PDF 文件
            return PDFView(
              pdfData: snapshot.data?.readAsBytesSync(), // 将文件转换为字节数组
            );
          }
          if (snapshot.hasError) {
            // 如果出现错误，显示错误信息
            return Text(snapshot.error.toString());
          }
          // 如果文件正在下载，显示加载中的提示
          return const Text('LOADING...');
        },
      ),
    );
  }

  // 下载或获取缓存文件的方法
  Future<File> getFile() {
    return NetworkFileCached.downloadFile(widget.url);
  }
}

2. 带有下载进度指示器的PDF文件缓存显示

在这个示例中，我们将展示如何在下载文件时显示进度条，并在下载完成后显示PDF文件。我们使用 onReceiveProgress 回调来监听下载进度，并更新UI以显示当前的下载进度。

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:network_file_cached/network_file_cached.dart';

class FileCacheLoadingIndicator extends StatefulWidget {
  const FileCacheLoadingIndicator({super.key, required this.url});

  final String url;

  [@override](/user/override)
  State<FileCacheLoadingIndicator> createState() =>
      _FileCacheLoadingIndicatorState();
}

class _FileCacheLoadingIndicatorState extends State<FileCacheLoadingIndicator> {
  bool downloading = false;
  double progress = 0;
  bool isDownloaded = false;
  File? file;
  String errorMessage = '';

  [@override](/user/override)
  void initState() {
    // 在初始化时调用 load() 方法来开始下载文件
    load(widget.url);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example apps'),
      ),
      body: errorMessage.isNotEmpty
          ? Center(
              child: Text(errorMessage), // 如果有错误，显示错误信息
            )
          : file == null
              ? Center(
                  child: Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      CircularProgressIndicator(
                        value: (progress == 0) ? null : progress / 100, // 显示进度条
                      ),
                      if (progress != 0)
                        Text(
                          progress.toStringAsFixed(0), // 显示下载进度百分比
                          style: const TextStyle(fontSize: 12),
                        )
                    ],
                  ),
                )
              : PDFView(
                  pdfData: file!.readAsBytesSync(), // 下载完成后显示 PDF 文件
                ),
    );
  }

  // 下载文件的方法
  Future<void> load(String url) async {
    await NetworkFileCached.downloadFile(url, onReceiveProgress: (rcv, total) {
      setState(() {
        // 更新下载进度
        progress = ((rcv / total) * 100);
      });
    }).then((value) {
      setState(() {
        // 下载完成后保存文件
        file = value;
      });
    }).onError((error, stackTrace) {
      setState(() {
        // 如果出现错误，保存错误信息
        errorMessage = error.toString();
      });
      throw Exception(error); // 抛出异常以便捕获
    });
  }
}

3. 完整的示例代码

为了更好地理解如何在项目中使用 network_file_cached 插件，以下是一个完整的示例代码，包含主页面和两个子页面（一个用于简单的PDF文件缓存显示，另一个用于带有下载进度指示器的PDF文件缓存显示）。

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_pdfview/flutter_pdfview.dart';
import 'package:network_file_cached/network_file_cached.dart';

void main() async {
  // 初始化 network_file_cached 插件，设置缓存过期时间为5秒
  await NetworkFileCached.init(
    expired: const Duration(seconds: 5),
  );

  runApp(
    const MaterialApp(
      home: FileCache(),
    ),
  );
}

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

  final String url = 'https://example.com/sample.pdf'; // 替换为实际的PDF文件URL

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example apps'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 导航到简单的PDF文件缓存显示页面
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => FileCacheSample(url: url),
                  ),
                );
              },
              child: const Text('Sample PDF View'),
            ),
            ElevatedButton(
              onPressed: () {
                // 导航到带有下载进度指示器的PDF文件缓存显示页面
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => FileCacheLoadingIndicator(url: url),
                  ),
                );
              },
              child: const Text('PDF View With Loading Indicator'),
            )
          ],
        ),
      ),
    );
  }
}

// 简单的PDF文件缓存显示页面
class FileCacheSample extends StatefulWidget {
  const FileCacheSample({super.key, required this.url});

  final String url;

  [@override](/user/override)
  State<FileCacheSample> createState() => _FileCacheSampleState();
}

class _FileCacheSampleState extends State<FileCacheSample> {
  Future<File>? file;

  [@override](/user/override)
  void initState() {
    super.initState();
    file = getFile();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example apps'),
      ),
      body: FutureBuilder(
        future: file,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return PDFView(
              pdfData: snapshot.data?.readAsBytesSync(),
            );
          }
          if (snapshot.hasError) {
            return Text(snapshot.error.toString());
          }
          return const Text('LOADING...');
        },
      ),
    );
  }

  Future<File> getFile() {
    return NetworkFileCached.downloadFile(widget.url);
  }
}

// 带有下载进度指示器的PDF文件缓存显示页面
class FileCacheLoadingIndicator extends StatefulWidget {
  const FileCacheLoadingIndicator({super.key, required this.url});

  final String url;

  [@override](/user/override)
  State<FileCacheLoadingIndicator> createState() =>
      _FileCacheLoadingIndicatorState();
}

class _FileCacheLoadingIndicatorState extends State<FileCacheLoadingIndicator> {
  bool downloading = false;
  double progress = 0;
  bool isDownloaded = false;
  File? file;
  String errorMessage = '';

  [@override](/user/override)
  void initState() {
    load(widget.url);
    super.initState();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Plugin example apps'),
      ),
      body: errorMessage.isNotEmpty
          ? Center(
              child: Text(errorMessage),
            )
          : file == null
              ? Center(
                  child: Stack(
                    alignment: AlignmentDirectional.center,
                    children: [
                      CircularProgressIndicator(
                        value: (progress == 0) ? null : progress / 100,
                      ),
                      if (progress != 0)
                        Text(
                          progress.toStringAsFixed(0),
                          style: const TextStyle(fontSize: 12),
                        )
                    ],
                  ),
                )
              : PDFView(
                  pdfData: file!.readAsBytesSync(),
                ),
    );
  }

  Future<void> load(String url) async {
    await NetworkFileCached.downloadFile(url, onReceiveProgress: (rcv, total) {
      setState(() {
        progress = ((rcv / total) * 100);
      });
    }).then((value) {
      setState(() {
        file = value;
      });
    }).onError((error, stackTrace) {
      setState(() {
        errorMessage = error.toString();
      });
      throw Exception(error);
    });
  }
}

更多关于Flutter网络文件缓存插件network_file_cached的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

gougou168 1楼

更多关于Flutter网络文件缓存插件network_file_cached的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是一个关于如何使用Flutter中的network_file_cached插件进行网络文件缓存的示例代码。这个插件允许你从网络下载文件并将其缓存到本地存储，以便在离线时访问。

首先，确保你的pubspec.yaml文件中已经添加了network_file_cached依赖：

dependencies:
  flutter:
    sdk: flutter
  network_file_cached: ^最新版本号  # 请替换为当前最新版本号

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

接下来，你可以在你的Flutter应用中使用NetworkFileCached来下载和缓存文件。以下是一个完整的示例：

import 'package:flutter/material.dart';
import 'package:network_file_cached/network_file_cached.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Network File Cached Example'),
        ),
        body: Center(
          child: NetworkFileCachedExample(),
        ),
      ),
    );
  }
}

class NetworkFileCachedExample extends StatefulWidget {
  @override
  _NetworkFileCachedExampleState createState() => _NetworkFileCachedExampleState();
}

class _NetworkFileCachedExampleState extends State<NetworkFileCachedExample> {
  String? _cachedFilePath;
  String _url = 'https://example.com/path/to/your/file.jpg'; // 替换为实际的文件URL

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        ElevatedButton(
          onPressed: _downloadAndCacheFile,
          child: Text('Download and Cache File'),
        ),
        SizedBox(height: 20),
        if (_cachedFilePath != null)
          Image.file(
            File(_cachedFilePath!),
            width: 300,
            height: 300,
            fit: BoxFit.cover,
          ),
      ],
    );
  }

  Future<void> _downloadAndCacheFile() async {
    try {
      final NetworkFileCached networkFileCached = NetworkFileCached();
      final File cachedFile = await networkFileCached.getFile(_url);
      setState(() {
        _cachedFilePath = cachedFile.path;
      });
    } catch (e) {
      print('Error downloading and caching file: $e');
    }
  }
}

在这个示例中：

我们创建了一个简单的Flutter应用，包含一个按钮和一个用于显示缓存文件的Image组件。
当用户点击按钮时，会调用_downloadAndCacheFile方法。
NetworkFileCached实例的getFile方法被用来从网络下载文件并将其缓存到本地存储。
下载完成后，将缓存文件的路径保存到_cachedFilePath变量中，并使用setState刷新UI，以便显示缓存的文件。

请注意，这个例子假设你要缓存的是一个图片文件，所以下载完成后使用Image.file来显示它。如果你需要缓存其他类型的文件（如音频、视频或文档），你可以根据文件类型使用相应的Flutter组件或逻辑来处理缓存的文件。

确保你替换示例中的URL为你想要缓存的实际文件的URL。