How can I show an asset Image while NetworkImage is loading

Question

I am not able to show a circular loading indicator or an image while flutter is loading the image from the network.

image: DecorationImage(
                      image: NetworkImage(
                        Juegos_de_siempre[index].url_foto,
                      ),
                      fit: BoxFit.fill,
                    ),

Answer 1

Use CacheNetworkImage Package.Click here.

This is sample code.

CachedNetworkImage(
                  width: 100,
                  height: 100,
                  fit: BoxFit.cover,
                  imageUrl: imageUrl,
                  placeholder: (context, url) => const Center(
                    child: CupertinoActivityIndicator(),
                  ), // replace with your asset image
                  errorWidget: (context, url, error) =>
                      const Icon(Icons.error),
                ),    

Answer 2

Flutter's documentation suggested the usage of FadeInImage for the placeholder functionality. Here's a link to an example on Flutter's documentation.

You cannot use FadeInImage inside a DecorationImage, so you have to wrap it inside a Stack instead like shown in this thread.