CODEWITHSUNDEEP
flutter
user12051965
user12051965

Reputation: 147

Flutter placeholder for CachedNetworkImage

I am using cached_network_image package to display images and have placeholders while being loaded. Below is the error that I have and the widget where I use CachedNetworkImage.

The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider<Object>'

        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(3),
          image: DecorationImage(
            image: CachedNetworkImage(
              imageUrl: "https://cdn....${item.id}/${item.imageName}.jpg",
              imageBuilder: (context, imageProvider) => Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: imageProvider,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              placeholder: (context, url) => CircularProgressIndicator(),
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
            fit: BoxFit.cover,
          ),
        ),

Searched a bit and I found similar question in this Github thread and an answer that explains that CachedNetworkImage provides a callback that I can use to return image provider. I tried that example but still have that error.

https://github.com/Baseflow/flutter_cached_network_image/issues/177#issuecomment-510359079

I noticed that question in Github thread has The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider'. error, while mine is The argument type 'CachedNetworkImage' can't be assigned to the parameter type 'ImageProvider<Object>'.

Could anyone tell me please what I am doing wrong.

Upvotes: 3

Views: 6441

Answers (3)

Immanuel Quabena Cheremeh
Immanuel Quabena Cheremeh

Reputation: 31

Use CachedNetworkImageProvider() when you want it inside a Decoration Image

DecorationImage(
             image: CachedNetworkImageProvider(
                    Assets.image1,
                    errorListener: () {
                      const Text(
                        'Loading',
                        style: TextStyle(
                          color: AppColors.greyDeepColor,
                          fontSize: 20,
                        ),
                      );
                    },
                  )),

If you want to use it as a stand alone widget and not inside a decoration image , thats when you will use CachedNetworkImage().

CachedNetworkImage(
                    imageUrl: Assets.image2`enter code here`,
                    progressIndicatorBuilder:
                        (context, url, downloadProgress) => const Center(
                      child: Text(
                        'Loading',
                        style: TextStyle(
                          color: AppColors.greyDeepColor,
                          fontSize: 10,
                        ),
                      ),
                    ),
                    errorWidget: (context, url, error) => const Center(
                      child: Icon(
                        Icons.error,
                        color: AppColors.blueColor,
                        size: 30,
                      ),
                    ),
                  ),

Upvotes: 3

Rohit Sainik
Rohit Sainik

Reputation: 561

don't use cached_network_image inside decoration image instead use it directly or as a child of the container and you can customize your image inside the image builder property of cached_network_image.

Reason: cached_network_image is not a type of Imageprovider widget.

Upvotes: 1

Lang Minh Nguy&#234;n
Lang Minh Nguy&#234;n

Reputation: 5555

CachedNetworkImage need to wrap outside Widget you want to render

remove

Container(...,
decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(3),
      image: DecorationImage(
        image:

keep

CachedNetworkImage(
          imageUrl: "https://cdn....${item.id}/${item.imageName}.jpg",
          imageBuilder: (context, imageProvider) => Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: imageProvider,
                fit: BoxFit.cover,
              ),
            ),
          ),
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
        fit: BoxFit.cover,
      ),

Because argument type 'CachedNetworkImage' can't be assigned to the parameter imageis type 'ImageProvider' in Container

Upvotes: 10

Related Questions