Flutter: Loading images from file causes flickering

Question

I show images in a GridView. The images should be shown, even when the device has no internet connection. Therefore I implemented a custom class that checks if the image is available locally, if not, it downloads it and saves it to the local storage for later use. Unfortunately my images are flickering on android on every reloading, even when the images do not change. There is always a white box before the image is shown. I also added gaplessPlayback but that did not help. Is it possible to cache event the local images to prevent that?

class _ThumbnailImageState extends State<ThumbnailImage> {
  late Future<File> imageFile;

  @override
  void initState() {
    super.initState();
    if(widget.downloadImage){
      imageFile = _fetchImage();
    }
  }

  Future<File> _fetchImage() async {
    final localPath = await ImageDownloader.createLocalPath(widget.book.id);
    final file = File(localPath);
    final fileExists = await file.exists();
    if (!fileExists) {
      print("File does not exist");
      await ImageDownloader.downloadImage(
          widget.book.thumbnail, widget.book.id);
    }
    return file;
  }

  @override
  Widget build(BuildContext context) {
    return widget.downloadImage
        ? FutureBuilder<File>(
            future: imageFile,
            builder: (BuildContext context, AsyncSnapshot<File> snapshot) {
              if (snapshot.connectionState == ConnectionState.done) {
                return Image.file(
                  snapshot.data!,
                  fit: widget.fit,
                  gaplessPlayback: true,
                  height: widget.height,
                  width: widget.width,
                );
              } else {
                return const CircularProgressIndicator();
              }
            },
          )
        : Image.network(
            widget.book.thumbnail,
            fit: widget.fit,
            gaplessPlayback: true,
            height: widget.height,
            width: widget.width,
          );
  }
} 

Answer 1

I created the ThumbnailImages with an ObjectKey. When I change the ObjectKey to a ValueKey, it is working. I have no idea why:

ThumbnailImage(
             key: ValueKey(widget.book.thumbnail), //ObjectKey causes flicker
             book: widget.book,
             height: 150,
             )