Add custom cache key to support dynamic url images

[Hassico]

Please add this feature because it is a vital one for many apps like mine. Thank you.

[zmtzawqlp]

something like this ？

fluttercandies/extended_image_library#20

[anass-naoushi]

@zmtzawqlp ,
No, something that overrides the the url passed and identifies an image from a unique key, like this:

ExtendedImage.network(
url: 'whatever it is',
cacheKey: 'Image 1' // The image is retrieved from cache using this key as an identifier!
);

[zmtzawqlp]

store key with url+md5 now

[zmtzawqlp]

https://github.com/fluttercandies/extended_image_library/blob/e67006f75cdcdfabfe4890b9b9dd067cc17da48c/lib/src/extended_network_image_utils.dart#L14

[anass-naoushi]

But the url is dynamic, it changes every time it is fetched. Would not hashing it produce a different key every time the image is fetched?
One more thing, where do I insert the hashed url in the parameters of extendedImage. Can you please elaborate more using an example

[zmtzawqlp]

I don't want to make this library more complex. we store key as md5 now, you can override image provider and make cache logic by yourself.

[zmtzawqlp]

i will do this later

[momoDragon]

Hi, Firstly, thanks for this feature. However, i am realising that when i have the same cacheKey but different url, the widget blinks every-time there is a rebuild.

However when using cache network image, this does not occur.

ExtendedImage.network

Screen.Recording.2022-01-19.at.10.00.42.PM.mov

ExtendedImage.network(
widget.file.source,
cacheKey: widget.file.fileId,
retries: 5,
timeRetry: const Duration(seconds: 2),
enableMemoryCache: true,
loadStateChanged: (state) {
switch (state.extendedImageLoadState) {
case LoadState.loading:
return _ImageByState.loading();
case LoadState.failed:
return _ImageByState.failed();
case LoadState.completed:
return _ImageByState.successFolderFile(
image: state.imageProvider,
file: widget.file,
privateFolderController: widget.privateFolderController);
default:
return const SizedBox();
}
},
),

CachedNetworkImage

Screen.Recording.2022-01-19.at.10.01.11.PM.mov

CachedNetworkImage(
cacheKey: widget.file.fileId,
imageUrl: widget.file.source,
progressIndicatorBuilder: (context, url, downloadProgress) =>
CircularProgressIndicator(value: downloadProgress.progress),
errorWidget: (context, url, error) => Icon(Icons.error),
),

[zmtzawqlp]

Hi, Firstly, thanks for this feature. However, i am realising that when i have the same cacheKey but different url, the widget blinks every-time there is a rebuild.

However when using cache network image, this does not occur.

ExtendedImage.network

Screen.Recording.2022-01-19.at.10.00.42.PM.mov
ExtendedImage.network( widget.file.source, cacheKey: widget.file.fileId, retries: 5, timeRetry: const Duration(seconds: 2), enableMemoryCache: true, loadStateChanged: (state) { switch (state.extendedImageLoadState) { case LoadState.loading: return _ImageByState.loading(); case LoadState.failed: return _ImageByState.failed(); case LoadState.completed: return _ImageByState.successFolderFile( image: state.imageProvider, file: widget.file, privateFolderController: widget.privateFolderController); default: return const SizedBox(); } }, ),

CachedNetworkImage

Screen.Recording.2022-01-19.at.10.01.11.PM.mov
CachedNetworkImage( cacheKey: widget.file.fileId, imageUrl: widget.file.source, progressIndicatorBuilder: (context, url, downloadProgress) => CircularProgressIndicator(value: downloadProgress.progress), errorWidget: (context, url, error) => Icon(Icons.error), ),

extended_image/lib/src/extended_image.dart

Line 747 in 646c3f0

final bool gaplessPlayback;

it will help

[momoDragon]

Hi, Firstly, thanks for this feature. However, i am realising that when i have the same cacheKey but different url, the widget blinks every-time there is a rebuild.
However when using cache network image, this does not occur.
ExtendedImage.network
Screen.Recording.2022-01-19.at.10.00.42.PM.mov
ExtendedImage.network( widget.file.source, cacheKey: widget.file.fileId, retries: 5, timeRetry: const Duration(seconds: 2), enableMemoryCache: true, loadStateChanged: (state) { switch (state.extendedImageLoadState) { case LoadState.loading: return _ImageByState.loading(); case LoadState.failed: return _ImageByState.failed(); case LoadState.completed: return _ImageByState.successFolderFile( image: state.imageProvider, file: widget.file, privateFolderController: widget.privateFolderController); default: return const SizedBox(); } }, ),
CachedNetworkImage
Screen.Recording.2022-01-19.at.10.01.11.PM.mov
CachedNetworkImage( cacheKey: widget.file.fileId, imageUrl: widget.file.source, progressIndicatorBuilder: (context, url, downloadProgress) => CircularProgressIndicator(value: downloadProgress.progress), errorWidget: (context, url, error) => Icon(Icons.error), ),

extended_image/lib/src/extended_image.dart

Line 747 in 646c3f0

final bool gaplessPlayback;

it will help

just tried
gaplessPlayback: true,
does help abit that the LoadState.completed will remain even when i refresh, however it still blinks.

gaplessPlayback: false,

Screen.Recording.2022-01-20.at.9.36.51.AM.mov

gaplessPlayback: true,

Screen.Recording.2022-01-20.at.9.35.58.AM.mov

[momoDragon]

I also realised this is the case only when the url is different.

ExtendedImage.network( "https://www.planetware.com/wpimages/2020/03/best-hot-air-balloon-rides-cappadocia-turkey.jpg", cacheKey: file.fileId, retries: 5, timeRetry: const Duration(seconds: 2), enableMemoryCache: true, gaplessPlayback: false, loadStateChanged: (state) { switch (state.extendedImageLoadState) { case LoadState.loading: return _ImageByState.loading(); case LoadState.failed: return _ImageByState.failed(); case LoadState.completed: return _ImageByState.successFolderFile( image: state.imageProvider, file: file, privateFolderController: privateFolderController); default: return const SizedBox(); } }, ),

This code even with gaplessPlayback: false, it does not blink.
Its only when the url is dynamic that the images blink.

[zmtzawqlp]

i didn't get what is that url is dynamic? maybe a simple runnable demo is better

[momoDragon]

`import 'dart:math';

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';

class TestPage extends StatefulWidget {
const TestPage({Key? key}) : super(key: key);

@OverRide
_TestPageState createState() => _TestPageState();
}

class _TestPageState extends State {
@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: GridView.builder(
padding:
const EdgeInsets.symmetric(horizontal: 15, vertical: 10),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 1,
crossAxisSpacing: 10,
mainAxisSpacing: 10),
itemCount: 50,
itemBuilder: (BuildContext context, index) {
return ExtendedImage.network(
"https://www.planetware.com/wpimages/2020/03/best-hot-air-balloon-rides-cappadocia-turkey.jpg?index=" +
Random().nextInt(1000).toString(),
cacheKey: index.toString(),
retries: 5,
timeRetry: const Duration(seconds: 2),
enableMemoryCache: true,
gaplessPlayback: true,
loadStateChanged: (state) {
switch (state.extendedImageLoadState) {
case LoadState.loading:
return Container(color: Colors.yellow);
case LoadState.failed:
return Container(color: Colors.red);
case LoadState.completed:
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.black12,
image: DecorationImage(
image: state.imageProvider,
fit: BoxFit.cover,
),
),
);
default:
return const SizedBox();
}
},
);
}),
),
TextButton(
onPressed: () {
setState(() {});
print('Tapped');
},
child: Text('set state'))
],
),
);
}
}
`

Screen.Recording.2022-01-20.at.9.56.56.AM.mov

[zmtzawqlp]

"https://www.planetware.com/wpimages/2020/03/best-hot-air-balloon-rides-cappadocia-turkey.jpg?index=" +
Random().nextInt(1000).toString(),

ImageSource is changed every time, i can't find any solution. you can use CacheImageProvider instead of ExtendedImageProvider. i didn't do any thing about the dynamic url

[momoDragon]

hopefully there can be an update in the near future. this is quite common usage for when urls comes with different tokens everytime. for example
`https://domain.s3.ap-southeast-1.amazonaws.com/users/0dc26ab8-0d4d-403f-b6ae-be0fd329b3c5/privateFolders/8c0af424-3359-4f5f-a860-8ae42be44d5c/77d86382-84e2-431c-b017-621e199c0e5c.webp?AWSAccessKeyId=ASIAQ4SPHJ5HL7ULXFV5&Expires=1642644676&Signature=UQo6r3rOf2XuNGv4gxP4VmqtzJU%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEOL%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkgwRgIhAOjLUYct0vLXgCnM4kpW57X0FMA2M3VXIbA20JVyjZBwAiEApZh33s6XgzRH1%2Fs4k1bqpk5tjB%2BF2DSJ%2FlbYRsRHtIsquwII%2B%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARABGgwwNjEzNjk0MzgwMzAiDNC4Q%2BjpVlU1WUMl8CqPAt8hz6cnXJfeamLSa%2B4v3%2BcjOf053zWUqk3xl0aadd1LI73SNfcJs%2BdLiNPqPYIh6MPivILk%2BlR6KWxunsewxcQgswdvM2w7gELNFW3JWRX1Y%2BHurmxJigXnHYBlROIAvyiQwkR8X5yC3XCjWSvl%2BiqCR%2F4xmgiG2guvC58T%2BNP0d3YvWlGzEjR4mkqrbLjq8vxBK9vCtoCruKRC16cUIGHREb2KMSkFR8MIPQyCWhIK7zqH8q3wtht045aUBj2uBoWARMNz6KNNdjuTotDQsXEU5U2Irnu5B3Cfk72tc%2BEJD5TmaiB6fdVFx1YAcUFgIgjpZmdJao8QeenvBUaWUcyh2Thtlsv%2BVim30Sw%2FU7Aw3%2FWijwY6mQHU38v20vpMvI9kEhEFYFY74mQyaYdSLMXxRyGK9

`

the token is used on the backend to determine if the file access has expired or not. I am using aws s3 presigned url which uses this feature.

[zmtzawqlp]

hopefully there can be an update in the near future. this is quite common usage for when urls comes with different tokens everytime. for example `https://domain.s3.ap-southeast-1.amazonaws.com/users/0dc26ab8-0d4d-403f-b6ae-be0fd329b3c5/privateFolders/8c0af424-3359-4f5f-a860-8ae42be44d5c/77d86382-84e2-431c-b017-621e199c0e5c.webp?AWSAccessKeyId=ASIAQ4SPHJ5HL7ULXFV5&Expires=1642644676&Signature=UQo6r3rOf2XuNGv4gxP4VmqtzJU%3D&x-amz-security-token=IQoJb3JpZ2luX2VjEOL%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaDmFwLXNvdXRoZWFzdC0xIkgwRgIhAOjLUYct0vLXgCnM4kpW57X0FMA2M3VXIbA20JVyjZBwAiEApZh33s6XgzRH1%2Fs4k1bqpk5tjB%2BF2DSJ%2FlbYRsRHtIsquwII%2B%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FARABGgwwNjEzNjk0MzgwMzAiDNC4Q%2BjpVlU1WUMl8CqPAt8hz6cnXJfeamLSa%2B4v3%2BcjOf053zWUqk3xl0aadd1LI73SNfcJs%2BdLiNPqPYIh6MPivILk%2BlR6KWxunsewxcQgswdvM2w7gELNFW3JWRX1Y%2BHurmxJigXnHYBlROIAvyiQwkR8X5yC3XCjWSvl%2BiqCR%2F4xmgiG2guvC58T%2BNP0d3YvWlGzEjR4mkqrbLjq8vxBK9vCtoCruKRC16cUIGHREb2KMSkFR8MIPQyCWhIK7zqH8q3wtht045aUBj2uBoWARMNz6KNNdjuTotDQsXEU5U2Irnu5B3Cfk72tc%2BEJD5TmaiB6fdVFx1YAcUFgIgjpZmdJao8QeenvBUaWUcyh2Thtlsv%2BVim30Sw%2FU7Aw3%2FWijwY6mQHU38v20vpMvI9kEhEFYFY74mQyaYdSLMXxRyGK9

`

the token is used on the backend to determine if the file access has expired or not. I am using aws s3 presigned url which uses this feature.

fluttercandies/extended_image_library#20