Flutter网络请求与缓存管理插件 flutter_cache_manager_dio 的使用

flutter_cache_manager_dio 是一个结合了 dio 和 flutter_cache_manager 的插件，旨在简化 Flutter 应用中的网络请求和缓存管理。它类似于 flutter_cache_manager_firebase，但使用的是 dio 作为 HTTP 客户端。

开始使用

初始化 DioCacheManager

首先，你需要初始化 DioCacheManager，并配置 Dio 实例。你还可以为 Dio 添加拦截器（如日志拦截器）来监控网络请求。

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

void main() {
  var dio = Dio();
  // 添加日志拦截器
  dio.interceptors.add(LogInterceptor(responseBody: false));
  
  // 初始化 DioCacheManager
  DioCacheManager.initialize(dio);

  runApp(MyApp());
}

获取缓存文件

你可以使用 DioCacheManager.instance.getSingleFile(url) 方法来获取指定 URL 的缓存文件。如果本地没有缓存，它会自动从网络下载并保存到缓存中。

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

class MyWidget extends StatelessWidget {
  final String url = "https://example.com/image.png";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return FutureBuilder<File>(
      future: DioCacheManager.instance.getSingleFile(url),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
          return Image.file(snapshot.data!);
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        }
        return CircularProgressIndicator();
      },
    );
  }
}

使用 cached_network_image 插件

flutter_cache_manager_dio 可以与 cached_network_image 插件一起使用，方便地显示带有缓存功能的网络图片。

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

class MyImageWidget extends StatelessWidget {
  final String url = "https://example.com/image.png";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return CachedNetworkImage(
      cacheManager: DioCacheManager.instance,
      imageUrl: url,
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => Container(
        child: Text('error'),
      ),
    );
  }
}

示例 Demo

下面是一个完整的示例应用，展示了如何使用 flutter_cache_manager_dio 来处理网络请求和缓存。

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';
import 'package:flutter_cache_manager_dio/flutter_cache_manager_dio.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() {
  var dio = Dio();
  dio.interceptors.add(LogInterceptor(responseBody: false));
  DioCacheManager.initialize(dio);

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Cache Manager Dio Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Cache Manager Dio Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final String imageUrl = "https://example.com/image.png";

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CachedNetworkImage(
              cacheManager: DioCacheManager.instance,
              imageUrl: imageUrl,
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
            SizedBox(height: 20),
            FutureBuilder<File>(
              future: DioCacheManager.instance.getSingleFile(imageUrl),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
                  return Image.file(snapshot.data!);
                } else if (snapshot.hasError) {
                  return Text('Error: ${snapshot.error}');
                }
                return CircularProgressIndicator();
              },
            ),
          ],
        ),
      ),
    );
  }
}