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,
),
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.
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),
),
Related
How can I add error detection for a Decorated Network image? Specifically I cannot use regular NetworkImage due to the limitations when using in combination with BoxDecoration and onError not supporting what I need (onError should support another image being returned via Asset/Network/Icon).
decoration: BoxDecoration(
image:
//NetworkImage but fallback to local image if http request fails:
DecorationImage(
image: NetworkImage(mediaUrl!),
fit: BoxFit.cover,
onError: (exception, stackTrace) {
return AssetImage('assets/images/placeholder.jpg');
}
)
),
You must use onError to log the error. See DecorationImage
onError: (Object exception, StackTrace? stackTrace) {
print('Image loading error: $exception, stack trace: $stackTrace');
}),
You can use FadeInImage to add a placeholder to an image
FadeInImage(
placeholder: MemoryImage('assets/images/placeholder.jpg'),
image: NetworkImage(mediaUrl!),
),
I was able to resolve my issue and keep the circle decoration by wrapping the decoration inside of a CachedNetworkImage which already contains a good error catching method
CachedNetworkImage(
imageUrl: userProfileImg!,
imageBuilder: (context, imageProvider) => Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: imageProvider, fit: BoxFit.cover),
),
),
placeholder: (context, url) => new CircularProgressIndicator(backgroundColor: Colors.white,),
errorWidget: (context, exception, stackTrack) => Icon(Icons.person,color: Colors.grey,size: 35,),
),
Is there any way to handle image url that not containt an image by using CachedNetworkImage package?
This is my code and when I do images loading, these errors are always popping up
CachedNetworkImage(
imageUrl: imageUrl,
placeholder: (context, url) => Center(
child: CircularProgressIndicator(
color: Theme.of(context).accentColor)),
errorWidget: (context, url, error) => BookErrorImage(),
fit: BoxFit.cover,
),
[]
How can I have a fade in effect in CircleAvatar?
Type of backgroundImage of CircleAvatar is ImageProvider and FadeInImage is not a ImageProvider
Use Clip react,
for image loading i use CachedNetworkImage(cached_network_image: 2.3.3)
ClipRRect(
borderRadius: BorderRadius.circular(25.0),
child: CachedNetworkImage(
fit: BoxFit.cover,
width: 50,
height: 50,
placeholder: (context, url) => Image.asset('loadder.gif'),
imageUrl:
"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRLe5PABjXc17cjIMOibECLM7ppDwMmiDg6Dw&usqp=CAU"),
),
this is user loader image or gif(example).
placeholder: (context, url) => Image.asset('loadder.gif'),
this is your main image(example).
imageUrl:"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRLe5PABjXc17cjIMOibECLM7ppDwMmiDg6Dw&usqp=CAU"),
I want my image to have inkwell effect when tapped, previously I could do that with Ink.image widget and then Provide NetworkImage() as image attribute like this:
Ink.image(
fit: BoxFit.fitWidth,
image: NetworkImage(
product.imageUrl,
),
),
But now I want to use CachedNetworkImage() because it has placeholder property to show loading status of my network image but the problem is when I use cachedNetworkImage i can no longer wrap this widget with ink.image because it requires image as an attrubute not any other widget.
Ink.image constructor requires image param to be a ImageProvider, not a widget. You can use CachedNetworkImageProvider instead of CachedNetworkImage like this:
Ink.image(
fit: BoxFit.fitWidth,
image: CachedNetworkImageProvider(
product.imageUrl,
)
),
However with this you'll lose placeholder capacity. However you can use CachedNetworkImageProvider createStream method to get an ImageStream that can be listened for errors and completion, with which you can create your own custom widget that updates the UI based on this stream.
You can use the imageBuilder from the CachedNetworkImage and pass the imageProvider to Ink.image.
Here's a sample code.
CachedNetworkImage(
imageUrl: "$imagePath",
imageBuilder: (context, imageProvider) {
return Ink.image(
image: imageProvider,
fit: fit,
);
},
)
I want to show CachedNetworkImage in CircleAvatar Widget but backgroundImage parameter require ImageProvider.
Use CachedNetworkImageProvider
Creates an ImageProvider which loads an image from the url, using the
scale. When the image fails to load errorListener is called.
If what you want is just a circle-shaped CachedNetworkImage, you can use ClipOval:
ClipOval(
child: CachedNetworkImage(
width: 32,
height: 32,
fit: BoxFit.cover,
imageUrl: 'BLA.jpg',
placeholder: CircularProgressIndicator(),
),
),
please use imageBuilder from CachedNetworkImage
CachedNetworkImage(
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
fit: BoxFit.contain,
imageUrl: imagePath,
imageBuilder: (context, imageProvider) { // you can access to imageProvider
return CircleAvatar( // or any widget that use imageProvider like (PhotoView)
backgroundImage: imageProvider,
);
},
)
If your intention is to show the image inside a circular.
Use:
ClipRRect(borderRadius: BorderRadius.circular(100),
child: CachedNetworkImage(...))
If you want to convert the CachedNetworkImage into ImageProvider
Use:
CachedNetworkImageProvider(url)