Home > OS >  How to reload an image if getting an error using network image flutter
How to reload an image if getting an error using network image flutter

Time:10-22

I am using a cached network image and sometimes some images throw error of course the package handle this error but what I want to reload this image again when I press this icon how can I do That

CodePudding user response:

I believe you just need to add a GestureDetector to your error widget and handle the reload there

CachedNetworkImage(
      imageUrl: "http://via.placeholder.com/350x150",
      placeholder: (context, url) => CircularProgressIndicator(),
      errorWidget: (context, url, error) => GestureDetector(
        onTap: ()  {
          // handle your reload and setState/ state management here
        },
        child: Icon(Icons.error) // the placeholder/error image,
      ),
    );

EDIT 1 : Using bloc library (cubit as is simple function)

var attempts = 0;
return BlocBuilder<YourCubit, YourState>(
        bloc: _yourCubitInstance,
        builder: (context, state) {
          return CachedNetworkImage(
            imageUrl: "http://via.placeholder.com/350x150",
            placeholder: (context, url) => CircularProgressIndicator(),
            errorWidget: (context, url, error) => GestureDetector(
                onTap: () {
                  //attempts is needed to ensure that retry state is emitted as
                  // bloc library prevents exact same states for being emitted
                  attempts  
                   _yourCubitInstance.refreshImage(attempt: attempts)
                  // above method should emit state to rebuild this widget 
                  // thus retrying the url load
                },
                child: Icon(Icons.error) // the placeholder/error image,
                ),
          );
        });
  • Related