如何实现类似animations包OpenContainer效果的pushReplacement跳转路由

方案1：自定义OpenContainer的路由跳转逻辑（推荐，可100%匹配原有动画效果） #

OpenContainer内部的跳转逻辑是可配置的，你只需要重写它的路由相关回调，将默认的push替换为pushReplacement即可：

OpenContainer(
  closedBuilder: (context, openContainer) {
    return GestureDetector(
      onTap: openContainer,
      child: // 你的原有Container组件
    );
  },
  openBuilder: (context, closeContainer) {
    return const TargetScaffoldPage();
  },
  // 核心配置：替换路由跳转逻辑
  onClosed: (result) {
    // 无需处理返回逻辑，因为pushReplacement不会回到当前页
  },
  routeSettings: const RouteSettings(name: '/targetPage'),
  transitionDuration: const Duration(milliseconds: 300), // 和包默认动画时长保持一致
)

如果需要完全控制路由跳转，也可以直接调用Navigator.of(context).pushReplacement传入OpenContainer内置的_OpenContainerRoute，直接复用它的全部过渡动画实现，不需要自己重写动画曲线、插值逻辑。

方案2：条件触发动画，适配底部导航无动画需求 #

你可以给目标页面增加一个参数bool needAnimation，默认值设为false：

• 从底部导航栏跳转时不传该参数，走系统默认无自定义动画的普通路由跳转
• 点击对应组件跳转时传入needAnimation: true，走带有OpenContainer效果的自定义路由

修复Hero动画宽度突变问题 #

之前Hero出现宽度直接跳转为屏幕宽度的问题，是因为两个Hero端点的组件约束不匹配，你需要做以下配置：

1. 给前后两个Hero的子组件外层都包裹Material组件，设置type: MaterialType.transparency，避免Material布局边界导致的样式突变
2. 前后两个Hero的tag必须完全唯一，不能和页面其他Hero重复
3. 给闭合态的Container设置和打开后Scaffold匹配的边框圆角、背景色属性，过渡时会自动插值实现平滑过渡

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