Search code examples
flutterdart

How to reload an image if getting an error using network image flutter


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


Solution

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