[SOLVED] How to cache images from appwrite storages the proper way?

Hey guys! TL;DR: Can you give me an advice for caching images from appwrite storages?

I am developing an App in Flutter. I want to fetch images from the appwrite storage. Currently i am using the suggested way to implement preview images like written here: https://appwrite.io/docs/client/storage?sdk=flutter-default#storageGetFileView But i would like to Cache them after i downloaded them once. I only found the plugin cached_network_image for that, but with that i have to add an header as my pictures are not public. (like here https://stackoverflow.com/questions/73770036/caching-images-thumbnails-in-listview ). But i really would like to avoid that and use as much from appwrites out-of-the-box-solutions as possible.

Current solution: return FutureBuilder( future: storage.getFileView( bucketId: BUCKET_IMAGES_ID, fileId: FILE_ID, ), builder: (context, snapshot) { return snapshot.hasData && snapshot.data != null ? Image.memory( snapshot.data, fit: BoxFit.cover, ) : snapshot.hasError ? Image.asset( "assets/images/testbild.jpg", fit: BoxFit.cover, ) : Image.asset( "assets/images/testbild.jpg", fit: BoxFit.cover, ); }, ); }

TL;DR

The user wants to cache images from Appwrite storages in their Flutter app. They are currently using the `cached_network_image` plugin, but it requires adding a header for non-public images. They want to avoid that and use Appwrite's solutions. Another user suggests using the `CachedNetworkImage` widget, which effectively caches the images. The original poster confirms that it worked well for them and thanks for the help. No solution is provided for checking the validity of the JWT.

I think for local caching that's the only way in flutter

Btw, it's best to use 3 back ticks with multi-line code. See https://www.markdownguide.org/extended-syntax/#syntax-highlighting

I'm pretty sure the network image widget automatically caches. You can use it by passing the file url. See https://github.com/appwrite/appwrite/discussions/3474#discussioncomment-3109355

I will try that tomorrow and give you an update. Thank you very much 😊

That worked perfectly with CachedNetworkImage as Image.Network was not really caching the data on my site. Could you give me an advice on how to check wether the JWT is still valid? I read that it is limited to 100 requests by every 60 minutes and i would love to check wether the actual JWT is still valid before creating a new one. Just to save your ressources. Thanks in advance!

I'm just creating a new one every time an user reaches the main page. Probably not the best approach, but in my case seems to be effective 🤔

Good idea. But I have an app with dashboard, events and blog entries. Every page contains pictures but unfortunetaly it is not completely safe that the user reaches the main page (dashboard) every 15 minutes, wich is the lifetime of the JWT.

Best way is to use it and make a network request. Otherwise, you can decode it and check the expiration

Thanks for your help! It worked well with CachedNetworkImage and therefore i will close this post 🙂 I will make a new one for getting information about how to get information about wether the JWT is still alive. Thank you!