Flutter Image.network not updated

Question

I had an issue about updating image using Image.network in stateful widget, it doesn't update when change the url inside set State but when i do hot reload, the image updated.

anyone have idea why it's happen ?

Answer 1

If the URL is the same as before, try to add some random querystring to the url, like:

Image.network(url + "?v=1");

Answer 2

Give the Image.network a key with the url as a value.

key: ValueKey(url)

Answer 3

First you need to add a key to your widget

1. This wiil ensure that when the widget tree get rebuilded the image widget get rebuilded too

    Image(
    image: NetworkImageSSL(_imageUrlPath),
    fit: BoxFit.cover,
    key: ValueKey(new Random().nextInt(100)),),
     ),
   

2. Then clear the image cache

   In my case have to clear image cache when image is uploaded to server
   Ex=>
   
   saveDataToServer(){
   if(onSucess){
   imageCache.clear();
    imageCache.clearLiveImages();
         }
   }
   

Answer 4

Clearing the two image caches and adding a key worked, but it seemed like overkill. Ian's answer was using a parameter in the url, but I wanted a bit of caching and did not want to request the server with a parameter. So I ended up with the following solution that uses DateFormat from the intl package.

// Make parameter using DateFormat. This image will be cached for a minute.
var nowParam = DateFormat('yyyyddMMHHmm').format(DateTime.now());
// Use # instead of ? or & in url as nothing after # is transmitted to the server.
var img = Image.network(url + '#' + nowParam);