Flutter：如何在useEffect内显示Dialog/Snackbar并解决上下文报错？

问题原因 #

当useEffect使用空依赖数组[]时，回调会在HookState.initState阶段执行——此时组件还未完成挂载，无法访问依赖上下文的继承组件（比如ScaffoldMessenger），这就是触发错误的核心原因。

解决方案 #

要在useEffect中安全显示Snackbar或Dialog，必须把相关代码延迟到组件构建完成后执行，以下是两种常用实现方式：

方式1：使用SchedulerBinding.addPostFrameCallback

该方法会等待当前帧所有组件构建完成后再执行回调，此时上下文已完全就绪：

import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';

class YourHookPage extends HookWidget {
  @override
  Widget build(BuildContext context) {
    useEffect(() {
      SchedulerBinding.instance.addPostFrameCallback((_) {
        // 显示Snackbar
        const snackBar = SnackBar(content: Text('Test'));
        ScaffoldMessenger.of(context).showSnackBar(snackBar);

        // 显示Dialog示例
        showDialog(
          context: context,
          builder: (dialogCtx) => AlertDialog(
            title: const Text('提示'),
            content: const Text('从useEffect触发的Dialog'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(dialogCtx),
                child: const Text('确定'),
              ),
            ],
          ),
        );
      });

      return; // 无需清理逻辑时留空即可
    }, []);

    return const Scaffold(body: Center(child: Text('示例页面')));
  }
}

方式2：使用Future.delayed(Duration.zero)

这种方式会把任务放入事件队列末尾，同样能确保组件构建完成后执行：

useEffect(() {
  Future.delayed(Duration.zero, () {
    const snackBar = SnackBar(content: Text('Test'));
    ScaffoldMessenger.of(context).showSnackBar(snackBar);
  });

  return;
}, []);

注意事项 #

• 如果需要在特定依赖项变化时触发逻辑，只需将该依赖项加入useEffect的依赖数组即可，核心延迟执行逻辑不变。
• 调用showDialog时，建议使用对话框内部的上下文（示例中的dialogCtx），避免因外部上下文被释放导致异常。

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