Flutter：如何在页面跳转离开时自动关闭当前展示的SnackBar？

问题根因 #

你遇到的报错是因为dispose执行时，DetailPage已经开始从组件树中卸载，和_scaffoldKey绑定的上下文已经失效，无法通过ScaffoldMessenger.of获取到实例。

实现方案 #

我们可以在展示SnackBar时就缓存它的控制器，不需要在销毁时再依赖上下文获取实例，直接通过控制器关闭对应SnackBar即可：

1. 在_DetailPageState中声明变量存储SnackBar的控制器
2. 调用showSnackBar时将返回的控制器赋值给该变量
3. 在dispose中直接调用控制器的close方法关闭SnackBar

修正后核心代码 #

class _DetailPageState extends State<DetailPage> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
  // 声明变量存储当前页面创建的SnackBar控制器
  ScaffoldFeatureController<SnackBar, SnackBarClosedReason>? _snackBarController;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 缓存showSnackBar返回的控制器
      _snackBarController = ScaffoldMessenger.of(_scaffoldKey.currentContext!).showSnackBar(SnackBar(
        content: const Text('Entered detail page'),
        duration: const Duration(days: 1),
        action: SnackBarAction(
            label: 'Close',
            onPressed: () {
              _snackBarController?.close();
            }),
      ));
    });
  }

  @override
  void dispose() {
    // 页面销毁时直接通过控制器关闭SnackBar，无需依赖上下文
    _snackBarController?.close();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(title: const Text('Detail')),
      body: const SizedBox.expand(
        child: Center(child: Text('Detail page')),
      ),
    );
  }
}

方案优势 #

• 完全符合架构设计要求：SnackBar的创建、销毁逻辑全部封装在DetailPage内部，页面本身完全持有SnackBar的所有权
• 零额外维护成本：不需要修改其他任何页面的代码，后续页面结构调整、新增跳转路径都不需要额外处理SnackBar关闭逻辑
• 准确性高：只会关闭当前页面创建的SnackBar，不会误关闭其他页面展示的SnackBar

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