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