CODEWITHSUNDEEP
flutterflutter-image
Kewitschka
Kewitschka

Reputation: 1671

Flutter: Loading images from file causes flickering

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,
          );
  }
}

Upvotes: 0

Views: 124

Answers (1)

Kewitschka
Kewitschka

Reputation: 1671

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,
             )

Upvotes: 0

Related Questions