Flutter图片缓存与加载插件firebase_cached_image的使用

Firebase_Cached_Image

firebase_cached_image 是一个用于缓存和加载来自Firebase Cloud Storage对象的图片的Flutter插件。它提供了 Cache Manager 和 Cached ImageProvider 功能，可以方便地管理和加载云端存储的图片资源。

Set up

在使用 firebase_cached_image 之前，需要先设置 Firebase 环境。请参考 Firebase Flutter 设置文档。

注意事项

• Web平台不支持缓存：所有内容将直接从服务器下载。

Firebase Image Provider

如果想显示来自云存储的图片，可以通过传递 FirebaseImageProvider 作为 ImageProvider 给 Image Widget，并传入 FirebaseUrl。

声明 FirebaseUrl 的方式：

1. 使用 Google Cloud Storage URL 格式：

   FirebaseUrl("gs://bucket_f233/logo.jpg")
   

2. 使用 HTTPS URL 格式：

   FirebaseUrl("https://firebasestorage.googleapis.com/b/bucket/o/logo.jpg")
   

3. 通过 FirebaseStorage 引用创建：

   FirebaseUrl.fromReference(FirebaseStorage.instance.ref("images/image.jpg"));
   

示例代码：

Image(
  image: FirebaseImageProvider(
    FirebaseUrl("gs://bucket_f233/logo.jpg"),
    options: CacheOptions(
      source: Source.server, // 默认为 Source.cacheServer
    ),
    errorBuilder: (context, error, stackTrace) {
      if (error is ImageNotFoundException) {
        return const Text('Image not found on Cloud Storage.');
      } else {
        return Text('Error loading image: $error');
      }
    },
    loadingBuilder: (_, Widget child, ImageChunkEvent? loadingProgress) {
      if (loadingProgress == null) {
        return child;
      } else {
        return CircularProgressIndicator();
      }
    },
  ),
),

默认情况下，它会先尝试从缓存中获取图片，如果不存在则从服务器获取并缓存。

Firebase Cache Manager

FirebaseCacheManager 提供了更丰富的文件缓存功能，适用于任何类型的云存储文件。

下载并缓存文件

final file = await FirebaseCacheManager().getSingleFile(
  FirebaseUrl("gs://bucket_f233/doc.docx"),
);
print(file); // 输出缓存文件路径

预缓存文件

await FirebaseCacheManager().preCache(
  FirebaseUrl("gs://bucket_f233/profile_pic.jpg"),
);

刷新已缓存文件

await FirebaseCacheManager().refreshCachedFile(
  FirebaseUrl("gs://bucket_f233/profile_pic.jpg"),
);

手动复制文件到缓存

final filePath = "/storage/file.jpg";
final cachedFilePath = await FirebaseCacheManager().copyToCache(
  FirebaseUrl("gs://bucket_f233/profile_pic.jpg"),
  filePath,
);

删除特定文件

await FirebaseCacheManager().delete(
  FirebaseUrl("gs://bucket_f233/logo.jpg"),
);

清除所有缓存

await FirebaseCacheManager().clearCache();

// 删除超过20天未修改的文件
await FirebaseCacheManager().clearCache(modifiedBefore: Duration(days: 20));

自定义子目录

final manager = FirebaseCacheManager(subDir: "profile_pictures");

多个缓存目录管理

final profilePicturesCacheManager = FirebaseCacheManager(subDir: "profile_pictures");
final postsCacheManager = FirebaseCacheManager(subDir: "posts");

// 仅删除帖子目录中的文件
await postsCacheManger.clearCache();

示例Demo

以下是一个完整的示例应用程序，展示了如何使用 firebase_cached_image 加载和缓存图片：

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Firebase Cached Image',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Cached Image Demo'),
    );
  }
}

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

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Firebase Image Example'),
      ),
      body: Center(
        child: Image(
          image: FirebaseImageProvider(
            FirebaseUrl("gs://your_bucket/your_image.jpg"),
            options: const CacheOptions(
              source: Source.server,
              checkIfFileUpdatedOnServer: true,
            ),
            subDir: "custom_cache_directory",
          ),
          errorBuilder: (context, error, stackTrace) {
            if (error is ImageNotFoundException) {
              return const Text('Image not found on Cloud Storage.');
            } else {
              return Text('Error loading image: $error');
            }
          },
          loadingBuilder: (_, Widget child, ImageChunkEvent? loadingProgress) {
            if (loadingProgress == null) {
              return child;
            } else {
              return const CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

这个示例展示了如何配置 FirebaseImageProvider 并处理加载过程中的错误和进度更新。希望这些信息对你有所帮助！