firebase - 在 Flutter 中保存网络图片以离线加载

Question

如何使网络图像在我的应用中离线可用？所以，当我没有网络时，下次可以从缓存中加载它。

我试过 network_to_file_image包装和 cache network image包也是如此，但它对我不起作用。

当我使用缓存网络并且我下次(没有网络)打开应用程序时，图像没有从缓存中再次加载。

这是我在 Flutter 应用程序中使用网络图像包的代码:

CarouselSlider(
          enlargeCenterPage: true,
          autoPlay: true,
          height: 350,
          initialPage: 0,
          items: keyPlans.map((key) {
            File file;
            getData() {
              DirServices().file("loacliamge_${counter++}").then((File data) {
                file = data;
              });
              return file;
            }

            return new CarousalCard(
              image: NetworkToFileImage(file: getData(), url: key, debug: true),
              onPressed: () {
                setState(() {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (context) => ImageView(
                                image: CachedNetworkImageProvider(key),
                                text: appTitle,
                              )));
                });
              },
            );
          }).toList());

network_to_file_image包总是从网络获取数据。

Answer 1

cache network image 的临时解决方案包裹。
添加 IOFileSystem类到您的项目，如 here 所述. (希望这个类可以从包中获得，我们将来可以删除这个重复的类)

import 'package:file/local.dart';
import 'package:flutter_cache_manager/src/storage/file_system/file_system.dart' as c;
import 'package:path/path.dart' as p;
import 'package:path_provider/path_provider.dart';

class IOFileSystem implements c.FileSystem {
  final Future<Directory> _fileDir;

  IOFileSystem(String key) : _fileDir = createDirectory(key);

  static Future<Directory> createDirectory(String key) async {
    // use documents directory instead of temp
    var baseDir = await getApplicationDocumentsDirectory(); 
    var path = p.join(baseDir.path, key);

    var fs = const LocalFileSystem();
    var directory = fs.directory((path));
    await directory.create(recursive: true);
    return directory;
  }

  @override
  Future<File> createFile(String name) async {
    assert(name != null);
    return (await _fileDir).childFile(name);
  }
}

然后创建 CustomCacheManager

import 'package:flutter_cache_manager/flutter_cache_manager.dart';

class CustomCacheManager extends CacheManager with ImageCacheManager {
  static const String key = "customCache";

  static CustomCacheManager _instance;

  factory CustomCacheManager() {
    return _instance ??= CustomCacheManager._();
  }

  CustomCacheManager._()
      : super(Config(key, fileSystem: IOFileSystem(key)),);
}

然后最后提供这个 CustomCacheManager到 CachedNetworkImage

CachedNetworkImage(
  cacheManager: CustomCacheManager(),
  imageUrl: "your_image_url",
)

然后缓存文件不会在 session 之间被系统删除