CODEWITHSUNDEEP
dartflutter
M. Plant
M. Plant

Reputation: 493

Flutter Image.network not updated

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 ?

Upvotes: 12

Views: 12334

Answers (6)

Manoj Reddy
Manoj Reddy

Reputation: 127

If we attach some random number to the url or some random key to the widget whenever you call setState(() {}) method image will be requested from the server which is not good, so maintain version number for the url & update the version number whenever you want image to be updated.

class ImageRefreshDemo extends StatefulWidget {
  ImageRefreshDemo({
    Key? key,
  }) : super(key: key);

  @override
  _ImageRefreshDemoState createState() => _ImageRefreshDemoState();
}

class _ImageRefreshDemoState extends State<ImageRefreshDemo> {
  final String _imageUrl = 'image url';
  int _imageVersion = 1;

  Future<void> _refreshImage() async {
    //call API & update the image
    _imageVersion++;
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image Refresh Demo'),
      ),
      body: Image.network(
        '$_imageUrl?v=$_imageVersion',
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(
          Icons.edit,
          color: Colors.white,
        ),
        onPressed: _refreshImage,
      ),
    );
  }
}

Upvotes: 0

slowie
slowie

Reputation: 51

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

Upvotes: 5

naman kashyap
naman kashyap

Reputation: 730

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

Upvotes: 7

Zizheng
Zizheng

Reputation: 107

I solved this issue by adding a key vaule to the Image.newtwork then u need to delete the cache evertime before it reolards.

imageCache.clear();
Image myimage = Image.network('url', key: ValueKey(new Random().nextInt(100)),);

Upvotes: 0

Martyns
Martyns

Reputation: 3885

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

key: ValueKey(url)

Upvotes: 14

Ian
Ian

Reputation: 2984

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

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

Upvotes: 14

Related Questions