Flutter使用CachedNetworkImage跳转PhotoView出现AssertionError_throwNew错误

问题原因 #

• Hero标签重复：当前所有轮播图片的Hero组件都使用了同一个静态tag 'imageHero'，Flutter要求同一页面内Hero的tag必须唯一，否则跳转时会触发断言错误，就是你遇到的AssertionError_throwNew报错。
• PhotoView未使用缓存图片提供器：PhotoView中直接使用普通NetworkImage，无法复用CachedNetworkImage已经下载好的缓存，也存在类型不匹配的风险，导致图片加载失败白屏。

修复方案 #

1. 为每个图片设置唯一的Hero标签，直接用图片索引或者URL拼接即可。
2. 将PhotoView的imageProvider替换为CachedNetworkImageProvider，复用缓存逻辑。

修改后的核心代码 #

首先修改buildImage方法内的Hero标签：

Widget buildImage(String urlImage01, int index) => Container(
  margin: EdgeInsets.symmetric(horizontal: 5),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(20),
    child: GestureDetector(
      child: Hero(
        // 替换为带index的唯一tag
        tag: 'imageHero_$index',
        child: CachedNetworkImage(
          // 原有CachedNetworkImage其余配置保持不变
          imageUrl: urlImage01,
          imageBuilder: (context, imageProvider) => Container(
            width: 350,
            height: 405,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20),
              image: DecorationImage(
                  image: imageProvider, fit: BoxFit.cover),
            ),
          ),
          placeholder: (context, url) => SizedBox(
            width: 100,
            height: 100,
            child: Center(
                child: CircularProgressIndicator(
              valueColor:
                  AlwaysStoppedAnimation<Color>(Colors.pink.shade700),
            )),
          ),
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),

接着修改onTap跳转逻辑内的对应部分：

onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (_) {
        return Scaffold(
          extendBodyBehindAppBar: true,
          appBar: AppBar(
            elevation: 0,
            backgroundColor: Colors.transparent,
            leading: backIcon(),
          ),
          body: GestureDetector(
            child: Center(
              child: Hero(
                // 和列表页对应图片的tag保持一致
                tag: 'imageHero_$index',
                child: PhotoView(
                  backgroundDecoration:
                      BoxDecoration(color: Colors.black87),
                  minScale: PhotoViewComputedScale.contained * 0.9,
                  maxScale: PhotoViewComputedScale.covered * 2,
                  // 替换为CachedNetworkImageProvider复用缓存
                  imageProvider: CachedNetworkImageProvider(
                    urlImage01,
                  ),
                ),
              ),
            ),
          ),
        );
      },
    ),
  );
},

修改完成后即可解决断言报错和白屏问题，同时图片预览可以直接复用之前的缓存，不需要二次下载。

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