Flutter中使用SnackBar跳转时出现Invalid context错误如何解决

该上下文失效报错，本质是触发SnackBar操作时，代码中用到的context对应的Widget已经从Element树中移除（比如添加完条目后主动pop了当前页面、路由跳转替换了当前页面等），此时再通过失效的上下文查找Navigator就会触发异常。

下面是两种最常用的稳定解法： #

解法1：全局绑定NavigatorState（最稳妥，无上下文依赖） #

直接在应用入口声明全局的Navigator引用，后续所有跳转操作都可以脱离页面上下文执行：

1. 先在全局作用域定义Navigator的全局Key：

final GlobalKey<NavigatorState> appNavigatorKey = GlobalKey<NavigatorState>();

2. 将这个Key绑定到你的MaterialApp/CupertinoApp上：

MaterialApp(
  navigatorKey: appNavigatorKey,
  // 其他原有配置...
  routes: {
    "/music/albumscreen": (context) => const AlbumScreen(),
    // 其他路由...
  }
)

3. 把SnackBar里的跳转逻辑替换为用全局Key调用：

SnackBar(
  content: const Text("Added to playlist"),
  action: SnackBarAction(
    label: "OPEN",
    onPressed: () {
      appNavigatorKey.currentState?.pushNamed(
        "/music/albumscreen",
        arguments: snapshot.data![index],
      );
    },
  ),
)

解法2：提前捕获当前页面的Navigator实例 #

如果你不想用全局Key，可以在弹出SnackBar之前（页面还处于活跃状态时）就把Navigator实例拿到，不要在点击回调里才去读取上下文：

// 在弹出SnackBar的逻辑位置，提前获取Navigator
final navigator = Navigator.of(context);
// 弹出SnackBar
ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text("Added to playlist"),
    action: SnackBarAction(
      label: "OPEN",
      onPressed: () {
        // 直接用提前拿到的navigator实例跳转，不需要再读context
        navigator.pushNamed(
          "/music/albumscreen",
          arguments: snapshot.data![index],
        );
      },
    ),
  ),
);

如果业务逻辑里添加完条目就会关闭当前页，可以在关闭页面前先隐藏已弹出的SnackBar，避免用户触发无效操作：

ScaffoldMessenger.of(context).hideCurrentSnackBar();
Navigator.of(context).pop();

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