Flutter新手求助：按文档编写的SnackBar无法在UI中显示

你的代码问题出在使用了Scaffold本身的上下文（context）调用ScaffoldMessenger，这个上下文无法正确关联到ScaffoldMessenger的状态，导致SnackBar无法触发显示。以下是两种可行的修复方案：

方法1：用Builder组件包裹按钮 #

Builder会生成一个新的子上下文，这个上下文能正确访问到当前Scaffold对应的ScaffoldMessenger：

Scaffold(
  body: Center(
    child: Builder(
      builder: (context) {
        return ElevatedButton(
          child: const Text('Show SnackBar'),
          onPressed: () {
            final snackBar = SnackBar(
              content: const Text('Yay! A SnackBar!'),
              action: SnackBarAction(
                label: 'Undo',
                onPressed: () {},
              ),
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        );
      },
    ),
  ),
);

方法2：使用GlobalKey关联ScaffoldMessenger #

先定义全局Key，再绑定到MaterialApp的scaffoldMessengerKey属性，通过Key直接调用状态：

final GlobalKey<ScaffoldMessengerState> _scaffoldMessengerKey = GlobalKey<ScaffoldMessengerState>();

// 在MaterialApp中配置Key
MaterialApp(
  scaffoldMessengerKey: _scaffoldMessengerKey,
  home: Scaffold(
    body: Center(
      child: ElevatedButton(
        child: const Text('Show SnackBar'),
        onPressed: () {
          final snackBar = SnackBar(
            content: const Text('Yay! A SnackBar!'),
            action: SnackBarAction(
              label: 'Undo',
              onPressed: () {},
            ),
          );
          _scaffoldMessengerKey.currentState?.showSnackBar(snackBar);
        },
      ),
    ),
  ),
);

问题根源说明 #

你原代码中传入ScaffoldMessenger.of(context)的context，是Scaffold所在Widget的上下文，这个上下文的层级中还未包含当前的ScaffoldMessenger，因此无法找到对应的状态来渲染SnackBar。通过Builder生成子上下文，或用GlobalKey直接关联，就能绕过这个层级问题，正常触发SnackBar显示。

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