Flutter网络图片Hero动画首次导航无效果，如何实现正常动画？

问题描述 #

首次从第一个页面导航到第二个页面时，网络图片会重新加载，导致Hero动画无法正常显示；当图片加载完成后重复跳转，动画则能正常执行。无论使用原生Image.network还是CachedNetworkImage都存在该问题。

问题原因 #

Hero动画的核心是前后两个页面中同tag的Hero子组件需持有相同的已渲染图像数据。首次跳转时，第二个页面的图片仍处于加载状态，没有可用的图像帧，因此动画无法触发。此外，若两个页面的图片配置参数不一致（如缓存尺寸、缩放比例等），会被ImageCache判定为不同资源，导致重复加载，进一步加剧问题。

解决方案 #

1. 预加载图片到缓存 #

在第一个页面初始化时，提前将图片加载到缓存中，确保第二个页面打开时直接读取缓存资源，无需重新请求。

原生Image.network实现：

@override
void initState() {
  super.initState();
  // 预加载目标图片
  precacheImage(NetworkImage('你的图片URL'), context);
}

CachedNetworkImage实现：

import 'package:cached_network_image/cached_network_image.dart';

@override
void initState() {
  super.initState();
  // 预加载图片到缓存
  CachedNetworkImageProvider('你的图片URL').resolve(ImageConfiguration()).addListener(
    ImageStreamListener((_, __) {
      // 预加载完成，无需额外操作
    }),
  );
}

2. 统一两个页面的图片配置参数 #

确保前后页面中图片的缓存尺寸、缩放比例、适配模式等参数完全一致，避免ImageCache将其识别为不同资源。

修改原生Image示例：

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://...',
    cacheHeight: 1080,
    cacheWidth: 1080,
    fit: BoxFit.none,
    scale: 5,
  ),
)

修改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',
    fit: BoxFit.scaleDown,
    height: 200,
    width: 200,
    memCacheHeight: 1080,
    memCacheWidth: 1080,
    errorWidget: (context, url, error) => Image.asset('assets/...'),
  ),
)

3. 自定义Hero过渡组件（兜底方案） #

通过flightShuttleBuilder指定过渡时使用的组件，直接复用第一个页面已加载完成的图片，跳过第二个页面的加载等待。

Hero(
  tag: 'tag',
  flightShuttleBuilder: (flightContext, animation, direction, fromContext, toContext) {
    // 获取第一个页面的Hero子组件（已加载完成的图片）
    final Hero fromHero = fromContext.widget as Hero;
    return FadeTransition(
      opacity: animation,
      child: fromHero.child,
    );
  },
  child: Image.network('你的图片URL'),
)

总结 #

优先采用统一图片配置+预加载的组合方案，这是解决该问题最直接高效的方式；若仍存在异常，可使用自定义过渡组件的兜底方案确保动画正常执行。

内容的提问来源于stack exchange，提问作者ravipatel0508