Save network images in Flutter to load them offline - firebase

Question

How can I make a network image being available offline in my app? So, when I don't have network, it can be loaded from cache next time.
I'd tried network_to_file_image package and cache network image package as well, but it didn't work for me.
When I used cached network and I opened the app next time (without network) the images didn't load again from cache memory.
Here is the code where I use network image package in my Flutter app:
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 package always fetch data from the network.

Answer 1

Temp solution for cache network image package.
Add IOFileSystem class to your project, as described here. (Hope this class will be available from package and we'll be able to remove this duplicated class in future)
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);
}
}
And then create 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)),);
}
Then finally provide this CustomCacheManager to the CachedNetworkImage
CachedNetworkImage(
cacheManager: CustomCacheManager(),
imageUrl: "your_image_url",
)
Then cached files won't be deleted by system between sessions