Flutter CachedNetworkImageProvider does not have a loading spinner

Question

Please let me know how to enable loading spinner for flutter CachedNetworkImageProvider. This works fine with CachedNetworkImage. But the problem is CachedNetworkImage is not a valid image provider.

Container(
  width: 80.0,
  height: 80.0,
  decoration: BoxDecoration(
    shape: BoxShape.circle,
    image: DecorationImage(
      image: CachedNetworkImageProvider('https://pbs.twimg.com/profile_images/945853318273761280/0U40alJG_400x400.jpg'),
    ),
  ),
)

Solution 1

I have achieved this to some extent by using AdvancedNetworkImage The issue now I am facing is rounding of top left and right corners does not work in the below code.

new Column(
  children: [

  Container (
    height: 250.0,
    width : double.infinity,
    margin: const EdgeInsets.only(top:20.0, left: 20.0, right:20.0),

    child: TransitionToImage(

    AdvancedNetworkImage(getImage(context, i), timeoutDuration: Duration(minutes: 1), useDiskCache: true),
    // placeholder: CircularProgressIndicator(),
    duration: Duration(milliseconds: 300),
    fit: BoxFit.cover,
    loadingWidget: const CircularProgressIndicator(),
    placeholder: const Icon(Icons.refresh),
    enableRefresh: true,                    
    ),
    decoration: BoxDecoration(                    

    borderRadius: new BorderRadius.only( topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0) ),
    ),
  ),


  Container(
    width: double.infinity,
    margin: const EdgeInsets.only(bottom:20.0, left: 20.0, right:20.0),
    padding: const EdgeInsets.all(10.0),
    decoration: new BoxDecoration(
    color: Colors.black,
    borderRadius: new BorderRadius.only( bottomLeft: Radius.circular(10.0), bottomRight: Radius.circular(10.0)  ),
    boxShadow: <BoxShadow>[
        BoxShadow(
        color: Colors.black,
        offset: Offset(0.0, -12.0),
        blurRadius: 20.0,
        ),
    ],
    ),

    // alignment: TextAlign.left,
    child: new Text( getTitle(context, i), style: TextStyle( color: Colors.white, fontSize: 30.0,fontWeight: FontWeight.normal) ),
  ),

  ],
)

If anyone know the issue with rounding corners, please comment.

Solution 2

You can use imageBuilder property of CachedNetworkImage

CachedNetworkImage(
    imageUrl: 'yourURL',
    imageBuilder: (context, imageProvider) => Container(
       decoration: BoxDecoration(
       borderRadius: BorderRadius.circular(16),
       image: DecorationImage(
       image: imageProvider,
       fit: BoxFit.cover),
                                  ),
                                ),

This way you can decorate your CachedNetworkImage like a Container

Solution 3

A little late but I followed this approach

https://flutter.dev/docs/cookbook/images/fading-in-images

Using Stack, Padding, and the Container should do it. The bad thing here is the CircularProgressIndicator running in the background but it's invisible for the user. The Image should be bigger than the CircularProgressIndicator.

An example here

Stack(
      children: <Widget>[
         Padding(padding: const EdgeInsets.only(left: 10, top: 15),
                 child: CircularProgressIndicator(),
         ),
         Container(
              width: 80.0,
              height: 80.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                image: DecorationImage(
                  image: CachedNetworkImageProvider(
               'https://www.seti.org/sites/default/files/styles/original/public/2019-09/Zork%20alien%20head%20PPR.jpg?itok=T7eTYzCZ'),
                ),
              ),
            ),
          ],
        )

The purpose of the Padding is to be behind the Image, no matter where it is. For small images like this I think it is better the FadeInImage

FadeInImage(image: CachedNetworkImageProvider(url),
            fit: BoxFit.cover,
            placeholder: MemoryImage(kTransparentImage),
            )

Comments

[Nagaraj Alagusundaram]

AdvancedNetworkImage package is now discontinued.

[Sisir]

This is not proper answer. Please check this: stackoverflow.com/a/64394772/3197387