ScaffoldMessenger在await异步操作后失效问题排查与修复

问题原因 #

你提前缓存了scaffoldMessenger实例，在await异步操作完成后，当前页面的BuildContext可能已发生变化（比如widget树重建、状态更新），导致之前获取的ScaffoldMessenger引用不再指向当前活跃的Scaffold，因此调用其showSnackBar方法无法生效。而第一个SnackBar能正常工作，是因为它在异步操作前执行，此时context与ScaffoldMessenger的关联仍处于活跃状态。

修复方法 #

方法一：实时获取ScaffoldMessenger实例 #

不要提前缓存scaffoldMessenger变量，在需要显示SnackBar时，直接调用ScaffoldMessenger.of(context)获取最新的实例：

onTap: () async {
  if (formKey.currentState!.validate()) {
    try {
      final navigator = Navigator.of(context);
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
        content: Text("responseMessage!.message.toString()"),
      )); // 正常工作
      UserDetails userDetailsSend = UserDetails(
          name: name.text,
          email: email.text,
          phoneNumber: int.parse(phone.text));

      responseMessage = await UserData().register(userDetailsSend);

      if (responseMessage!.status == 201) {
        navigator.push(
          MaterialPageRoute(
            builder: (context) => OTPVerificationScreen(),
          ),
        );
      } else {
        // 实时获取最新的ScaffoldMessenger实例
        ScaffoldMessenger.of(context).showSnackBar(SnackBar(
          content: Text(responseMessage!.message.toString()),
        ));
      }
    } catch (e) {
      debugPrint(e.toString());
    }
  }
}

方法二：使用GlobalKey绑定ScaffoldMessenger #

这种方式更可靠，适合异步操作或跨widget调用的场景：

1. 在页面的State类中定义GlobalKey：

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

2. 在Scaffold组件中绑定该key：

Scaffold(
  key: _scaffoldMessengerKey,
  // 页面其他内容
)

3. 在需要显示SnackBar的地方通过key调用：

onTap: () async {
  if (formKey.currentState!.validate()) {
    try {
      final navigator = Navigator.of(context);
      _scaffoldMessengerKey.currentState?.showSnackBar(SnackBar(
        content: Text("responseMessage!.message.toString()"),
      ));
      UserDetails userDetailsSend = UserDetails(
          name: name.text,
          email: email.text,
          phoneNumber: int.parse(phone.text));

      responseMessage = await UserData().register(userDetailsSend);

      if (responseMessage!.status == 201) {
        navigator.push(
          MaterialPageRoute(
            builder: (context) => OTPVerificationScreen(),
          ),
        );
      } else {
        _scaffoldMessengerKey.currentState?.showSnackBar(SnackBar(
          content: Text(responseMessage!.message.toString()),
        ));
      }
    } catch (e) {
      debugPrint(e.toString());
    }
  }
}

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