Flutter Radial Menu报错：子树内存在多个共享同一标签的Hero

问题根源 #

你遇到的错误本质是Flutter的Hero动画冲突：尽管你没有手动使用FloatingActionButton或给RadialButton设置tag，但**RadialButton的内部实现大概率默认封装了Hero组件**，且所有RadialButton使用了相同的默认Hero tag。当点击按钮触发页面跳转时，同一子树内多个相同tag的Hero会触发断言错误。

解决方案 #

方案1：给每个RadialButton指定唯一Hero tag

如果RadialButton支持传入自定义Hero tag（查看组件文档或源码确认），直接给每个按钮设置唯一标识：

RadialButton(
  icon: const Icon(Icons.ac_unit),
  buttonColor: Colors.teal,
  heroTag: 'ac_unit_button', // 新增唯一tag
  onPress: () => Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => const TargetScreen()),
  ),
),
RadialButton(
  icon: const Icon(Icons.camera_alt),
  buttonColor: Colors.green,
  heroTag: 'camera_button', // 新增唯一tag
  onPress: () => Navigator.push(
    context,
    MaterialPageRoute(builder: (_) => const TargetScreen()),
  ),
),

方案2：禁用Hero动画（如果不需要共享元素过渡）

如果不需要页面跳转时的Hero过渡动画，可以通过自定义路由来禁用：

// 替换原来的Navigator.push逻辑
onPress: () => Navigator.push(
  context,
  PageRouteBuilder(
    pageBuilder: (context, animation, secondaryAnimation) => const TargetScreen(),
    transitionsBuilder: (context, animation, secondaryAnimation, child) {
      // 使用普通过渡代替Hero动画，比如淡入淡出
      return FadeTransition(opacity: animation, child: child);
    },
  ),
),

方案3：修改RadialButton内部实现（如果有权限）

如果RadialButton是你自己封装的组件，检查内部是否使用了Hero，并确保每个实例的tag唯一：

// 修改RadialButton的build方法，确保Hero tag唯一
class RadialButton extends StatelessWidget {
  final Icon icon;
  final Color buttonColor;
  final VoidCallback onPress;
  final String? heroTag; // 新增可选tag参数

  const RadialButton({
    super.key,
    required this.icon,
    required this.buttonColor,
    required this.onPress,
    this.heroTag,
  });

  @override
  Widget build(BuildContext context) {
    return Hero(
      tag: heroTag ?? UniqueKey().toString(), // 使用传入的tag或自动生成唯一标识
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(backgroundColor: buttonColor, shape: const CircleBorder()),
        onPressed: onPress,
        child: icon,
      ),
    );
  }
}

验证 #

修改后点击每个RadialButton，页面跳转时不会再出现Hero tag冲突的断言错误。

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