Flutter中如何实现点击Snackbar上的按钮关闭当前Snackbar

你的代码存在两个问题，导致报错、点击关闭功能失效：

• 你在onPressed属性位置直接执行了ScaffoldMessenger.of(context).hideCurrentSnackBar()，这行代码会在showSnackBar构建组件阶段立刻运行，此时SnackBar还没完成渲染，提前调用隐藏方法就会触发上下文异常。
• hideCurrentSnackBar()执行后返回值是void，但你自定义的SystemMessagesSnackBar组件要求onPressed传入Function()?类型的函数引用，参数类型本身就不匹配。

方案1：回调包裹原逻辑（适配你现有的自定义组件） #

只需要把直接执行的隐藏逻辑，套在匿名箭头函数里传给onPressed，保证逻辑只有点击按钮时才会触发，修改后的代码如下：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    duration: const Duration(seconds: 3),
    backgroundColor: Colors.transparent,
    elevation: 0,
    content: SystemMessagesSnackBar(
      message: 'No internet access. Check your connection',
      textButton: 'Refresh',
      // 改为传回调函数，不要直接执行方法
      onPressed: () => ScaffoldMessenger.of(context).hideCurrentSnackBar(),
      icon: SvgPicture.asset(constants.Assets.no_connection),
    ),
  ),
);

如果运行后还是报上下文相关错误，只需要给SystemMessagesSnackBar外层套一个Builder组件，获取SnackBar挂载位置的合法context即可，绝大多数场景下上面的写法已经可以正常运行。

方案2：使用SnackBar原生action能力（可选） #

Flutter内置的SnackBar自带action配置项，专门用来承载操作按钮，点击这个原生按钮时框架会自动关闭当前SnackBar，不需要手动调用隐藏方法，示例代码：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    duration: const Duration(seconds: 3),
    backgroundColor: constants.Colors.purpleDark,
    elevation: 0,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(100)),
    content: Row(
      children: [
        SvgPicture.asset(constants.Assets.no_connection),
        const SizedBox(width: 12),
        Text(
          'No internet access. Check your connection',
          style: constants.Styles.smallBookTextStyleWhite,
        ),
      ],
    ),
    action: SnackBarAction(
      label: 'Refresh',
      textColor: Colors.white,
      onPressed: () {
        // 此处写点击Refresh后需要执行的业务逻辑，比如重试网络检测
        // 无需手动调用hideCurrentSnackBar，点击后会自动关闭
      },
    ),
  ),
);

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