Flutter网络请求缓存代理插件flutter_cache_manager_dio_proxy的使用

简介

flutter_cache_manager_dio_proxy 是一个用于在 Flutter 中实现网络请求缓存的插件。它结合了 flutter_cache_manager 和 dio，可以方便地处理网络请求并缓存响应数据。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_cache_manager: ^3.0.0
  dio: ^5.0.0
  flutter_cache_manager_dio_proxy: ^1.0.0

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

2. 初始化Dio和缓存管理器

在应用启动时初始化 Dio 和 DioCacheManager：

import 'package:dio/dio.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:flutter_cache_manager_dio_proxy/flutter_cache_manager_dio_proxy.dart';

void main() async {
  // 初始化Dio
  var dio = Dio();

  // 添加日志拦截器（可选）
  dio.interceptors.add(LogInterceptor(responseBody: false));

  // 初始化DioCacheManager
  await DioCacheManager.initialize(dio);

  // 启动应用
  runApp(MyApp());
}

3. 使用缓存代理获取文件

可以通过 getSingleFile 方法从网络请求中获取文件，并自动缓存到本地：

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _cachedImageUrl = '';

  Future<void> fetchAndCacheImage() async {
    // 定义要请求的URL
    final String url = 'https://example.com/image.png';

    // 获取缓存管理器实例
    final DioCacheManager cacheManager = DioCacheManager.instance;

    // 获取文件路径
    final File file = await cacheManager.getSingleFile(url);

    // 更新UI状态
    setState(() {
      _cachedImageUrl = file.path;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Cache Manager Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: fetchAndCacheImage,
              child: Text('Fetch and Cache Image'),
            ),
            SizedBox(height: 20),
            if (_cachedImageUrl.isNotEmpty)
              Image.file(
                File(_cachedImageUrl),
                width: 200,
                height: 200,
              ),
          ],
        ),
      ),
    );
  }
}

4. 使用CachedNetworkImage展示缓存图片

如果需要直接在 CachedNetworkImage 中使用缓存管理器，可以这样做：

import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:cached_network_image/cached_network_image.dart';

class CachedImageExample extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cached Network Image Example'),
      ),
      body: Center(
        child: CachedNetworkImage(
          cacheManager: DioCacheManager.instance, // 使用DioCacheManager
          imageUrl: 'https://example.com/image.png', // 图片URL
          placeholder: (context, url) => CircularProgressIndicator(), // 加载中占位符
          errorWidget: (context, url, error) => Icon(Icons.error), // 错误占位符
        ),
      ),
    );
  }
}