CircleAvatar Exception: Invalid image data handle in flutter - flutter

Question

Now I am using CircleAvatar to show a background image:
CircleAvatar(
radius: 20,
backgroundColor: Colors.transparent,
backgroundImage: foregroundImage.image,
),
but now it always show this error:
======== Exception caught by image resource service ================================================
The following _Exception was thrown resolving an image codec:
Exception: Invalid image data
When the exception was thrown, this was the stack:
#0 _futurize (dart:ui/painting.dart:5275:5)
#1 ImageDescriptor.encoded (dart:ui/painting.dart:5143:12)
#2 instantiateImageCodec (dart:ui/painting.dart:1999:60)
<asynchronous suspension>
Image provider: NetworkImage("https://static.poemhub.top/2021/5/18/laitn.github.io-favicon.ico", scale: 1.0)
Image key: NetworkImage("https://static.poemhub.top/2021/5/18/laitn.github.io-favicon.ico", scale: 1.0)
====================================================================================================
To fix this problem, I tried this way:
final Image defaultImage = Image.asset('images/Icon-App-83.5x83.5#3x.png');
var foregroundImage = counter.value.favIconUrl == "" ? defaultImage : Image.network(
global.staticResourceUrl + "/" + counter.value.localIconUrl,
loadingBuilder: (context,child,loadingProgress)=>(loadingProgress == null) ? child : CircularProgressIndicator(),
errorBuilder: (context, error, stackTrace) => defaultImage,
);
if image fetch failed or other error, set a default image. But still not fix this problem. I figure out maybe the image think this url icon correct, but CircleAvatar render failed. Is it possible to check the image valid before render using CircleAvatar? what should I do to avoid this problem? How to know the image could render successful? I also have tried to set both foreground picture and background picture like this:
CircleAvatar(
radius: 20,
backgroundColor: Colors.transparent,
foregroundImage: foregroundImage.image,
backgroundImage: defaultImage.image,
),
but it looks like this:
both have background and foreground picture.

Answer 1

bool isErrorOccured = false;
CircleAvatar(
radius: 36,
child: isErrorOccured?Image.asset(""):Image.network(""),
onBackgroundImageError: (_, __) {
setState(() {
isErrorOccured = true;
});
},
),
or
SizedBox(
height: height,
width: height,
child: ClipRRect(
child: networkImageUrl == ''
? Image.asset(assetImageUrl, fit: BoxFit.cover)
: CachedNetworkImage(
fit: BoxFit.cover,
imageUrl: networkImageUrl,
placeholder: (context, url) => const Center(
child: CupertinoActivityIndicator(),
),
errorWidget: (context, url, error) => Container(
color: Colors.grey[300],
child: const Icon(
Icons.error,
color: Colors.red,
),
),
),
borderRadius: BorderRadius.circular(height / 2),
))