Flutter页面导航触发Hero标签重复错误求助

问题原因 #

你点击保存按钮后，应该是先弹出了内容为"Data Saved"的SnackBar，紧接着触发页面跳转。而SnackBar默认启用Hero动画，它的Hero标签是基于显示文本自动生成的。当页面跳转时，当前页面的SnackBar Hero与目标页面中同标签的Hero冲突，或者SnackBar的Hero还未消失就触发路由动画，从而抛出标签重复的错误。

解决方案 #

• 给SnackBar指定唯一Hero标签
  显示SnackBar时，通过heroTag参数设置一个全局唯一的值，避免与其他Hero组件标签冲突：

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: const Text("Data Saved"),
      heroTag: "save_success_snackbar", // 设置唯一标识
    ),
  );
  

• 禁用SnackBar的Hero动画
  如果不需要SnackBar的Hero动画，直接关闭它即可消除标签冲突问题：

  ScaffoldMessenger.of(context).showSnackBar(
    SnackBar(
      content: const Text("Data Saved"),
      heroTag: null, // 禁用Hero动画
    ),
  );
  

• 延迟页面跳转，等SnackBar消失后再触发
  若想保留SnackBar的Hero动画，可等SnackBar完全关闭后再执行页面跳转：

  final snackBar = SnackBar(content: const Text("Data Saved"));
  ScaffoldMessenger.of(context).showSnackBar(snackBar).closed.then((_) {
    // SnackBar关闭后跳转目标页面
    Navigator.push(context, MaterialPageRoute(builder: (context) => TargetPage()));
  });
  

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