CODEWITHSUNDEEP
dartflutter
Falak
Falak

Reputation: 329

How to solve the error In CachedNetworkImage?

I want to load an image to cache. So I used CachedNetworkImage for that. When a user logged in through gmail account I get the image url and show the image. But I need to keep it in cache. Here is my code:

new Center(
 child: new Column(
  children: <Widget>[
   new CircleAvatar(
    new CachedNetworkImage(
      placeholder: CircularProgressIndicator(),
      imageUrl: widget.currentUser?.profilUrl,
    ),
  ),
],
),
)

I used CachedNetworkImageProvider also but same error is coming for both. The error is 

type'CachedNetworkImage'is not  a  subtype  of  type  'ImageProvider<dynamic>'

Upvotes: 5

Views: 23609

Answers (4)

Siewe Rostand
Siewe Rostand

Reputation: 41

I don't know whether it may help someone but he mention how to handle network image error. I usually used Image.Network(Flutter build widget) to handle such errors. this is an example

Image.network(
   products[index].image!,
  errorBuilder: (BuildContext context,Object exception,StackTrace 
  stackTrace) {
    return Image.asset('img/no_image.png');
     },)

the errorbuilder help to show another image in case network image has not been successfully found.

Upvotes: 1

dilshan
dilshan

Reputation: 2522

CircleAvatar backgroundImage property need ImageProvider , Not a Image widget.

ImageProviders :- NetworkImage(), AssetImage() & CachedNetworkImageProvider().

Image Widgets :- Image() , CircleAvatar() , CachedNetworkImage()

So CircleAvatar() & CachedNetworkImage() is also a image displaying widget same as Image() widget, that we used in generally.

Every image displaying widgets need image providers. So in this case you have to use CircleAvatar() widget with CachedNetworkImageProvider(), because this CachedNetworkImageProvider() provide image data that needs by CircleAvatar() widget.

Upvotes: 3

dujianchi
dujianchi

Reputation: 1014

Just like @Niklas say.

The widget CircleAvatar receives an ImageProvider.

this is how to use:

 new Center(
  child: new Column(
   children: <Widget>[
    new CircleAvatar(
     backgroundImage: new CachedNetworkImageProvider(
      widget.currentUser?.profilUrl,
     )
    ),
   ],
  ),
 )

Upvotes: 0

NiklasPor
NiklasPor

Reputation: 9765

The widget CircleAvatar receives an ImageProvider.

The cached_network_image package offers you two classes to use:

  1. CachedNetworkImage a Widget you can use to display a cached network image.
  2. CachedNetworkImageProvider an ImageProvider providing the cached image.

Therefore you gotta use CachedNetworkImageProvider(2.), if you want to pass it to the CircleAvatar.

Here is a complete example, that you can copy & paste for trying out:

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(),
      home: Scaffold(
        body: Center(
          child: CircleAvatar(
            backgroundImage: CachedNetworkImageProvider(
              'https://upload.wikimedia.org/wikipedia/commons/thumb/7/71/Bill_Gates_Buys_Skype_%285707954468%29.jpg/2560px-Bill_Gates_Buys_Skype_%285707954468%29.jpg'
            ),
          ),
        ),
      )
    );
  }
}

Upvotes: 15

Related Questions