在 Flutter 中保存网络图像以离线加载它们答案

【问题标题】：Save network images in Flutter to load them offline在 Flutter 中保存网络图像以离线加载它们
【发布时间】：2020-06-03 23:21:12
【问题描述】：

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

我也尝试过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 包总是从网络中获取数据。

【问题讨论】：

这个问题你解决了吗？

标签： firebase flutter

【解决方案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",
)

那么系统不会在会话之间删除缓存的文件

【讨论】：