Hero Animation for Network Image in Flutter - flutter

Question

I am trying to add Hero animation for a Network Image.
The problem is, when I navigate from one screen to another the image loads again on second screen and so I am not able to see the animation.
After loading complete, if I repeat this navigation (from 1st screen to 2nd) this is working fine.
So the question is, How can I achieve this animation when I navigate for first time?
Error-Output:
Click Here
Code:
FirstScreen.dart
Hero(
tag: 'tag',
child: Image.network(
'https://...',
cacheHeight: 1080,
cacheWidth: 1080,
fit: BoxFit.none,
scale: 5,
),
),
secondScreen.dart
Hero(
tag: 'tag',
child: Image.network(
'https://...',
),
)
With CachedNetworkImage:
firstScreen.dart
Hero(
tag: tag
child: CachedNetworkImage(
imageUrl: 'url',
fit: BoxFit.scaleDown,
height: 200,
width: 200,
memCacheHeight: 1080,
memCacheWidth: 1080,
errorWidget: (context, url, error) => Image.asset('assets/..'),
),
)
secondScreen.dart
Hero(
tag: tag,
child: CachedNetworkImage(
imageUrl: 'url',
errorWidget: (context, url, error) => Image.asset('assets/...'),
),
),

Answer 1

create loading builder in the network image widget and use a placeholder instead of image when the image is not fully loaded something like this
Image.network(
imagePath,
// width: 100,
// height: 100,
loadingBuilder: (BuildContext context,
Widget child,
ImageChunkEvent? loadingProgress) {
if (loadingProgress == null) return child;
return Container(
width: 100,
height: 100,
child: Center(
child: // PlaceHolderWidget()
),
);
},
// fit: BoxFit.none,
)