Flutter报错：子树内多Hero组件共享同一tag异常求助

这个错误的核心原因是Flutter的Hero动画要求同一个子树内的Hero组件必须拥有唯一的tag，当跳转前后的页面存在tag重复的Hero时就会触发该异常。针对你的代码，可按以下步骤排查修复：

1. 检查AppBar中的购物车图标 #

你在MyItemDetailsScreen和CartItem两个页面的AppBar中都使用了Icons.shopping_cart的IconButton，Flutter默认会对这类导航图标自动添加Hero动画，导致tag重复。

修复方案：手动给图标添加唯一Hero tag #

在MyAppBar的购物车IconButton外层包裹Hero组件：

Hero(
  tag: 'cart-icon-details-page', // 唯一tag
  child: IconButton(
    icon: const Icon(Icons.shopping_cart, color: Colors.cyan),
    onPressed: () {
      Navigator.push(
          context,
          MaterialPageRoute(
              builder: (c) => CartItem(ifoodUID: widget.ifoodUID)));
    },
  ),
)

在CartItem页面的AppBar购物车IconButton外层也包裹Hero，使用不同的tag：

Hero(
  tag: 'cart-icon-cart-page', // 唯一tag，与上面不同
  child: IconButton(
    icon: const Icon(Icons.shopping_cart, color: Colors.cyan),
    onPressed: () {
      print("clicked");
    },
  ),
)

2. 排查第三方RadialMenu组件 #

你的CartItem页面使用了RadialMenu和RadialButton，这类组件内部可能默认使用了Hero动画且未设置唯一tag，导致多个RadialButton的tag重复。

修复方案： #

• 如果RadialButton组件支持自定义Hero tag，给每个按钮设置唯一值：

RadialButton(
  tag: 'radial-btn-clear-cart', // 唯一tag
  icon: const Icon(Icons.navigate_next),
  buttonColor: Colors.teal,
  onPress: () {
    clearCartNow(context);
    Fluttertoast.showToast(msg: "Cart has been cleared.");
  },
),
RadialButton(
  tag: 'radial-btn-empty-action', // 另一个唯一tag
  icon: const Icon(Icons.clear_all),
  buttonColor: Colors.green,
  onPress: () {},
),

• 如果组件不支持自定义tag，可修改RadialButton的源码，给内部的Hero组件添加动态生成的唯一tag，或者直接移除其中的Hero动画逻辑。

3. 备选方案：禁用页面跳转的Hero动画 #

如果不需要Hero过渡效果，可使用PageRouteBuilder替代默认的MaterialPageRoute，完全禁用Hero动画：

Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => CartItem(ifoodUID: widget.ifoodUID),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 可保留其他过渡效果，比如淡入淡出
      return FadeTransition(opacity: animation, child: child);
      // 或者直接无过渡：return child;
    },
  ),
);

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