如何在Flutter Column中实现可自动消失或上滑关闭的顶部通知？

方案一：自定义Overlay实现顶部通知 #

Overlay是Flutter原生组件，能灵活控制通知的位置与交互，完全自定义样式和行为：

1. 核心逻辑：

   • 自定义通知Widget，通过GestureDetector监听上滑关闭手势
   • 用OverlayEntry将通知插入屏幕顶部，设置7秒自动消失的定时器
   • 上滑手势达到速度阈值时，移除OverlayEntry完成关闭

2. 代码示例：

   class TopNotification {
     static OverlayEntry? _entry;
     static Timer? _timer;
   
     static void show(BuildContext context, String message) {
       // 先关闭已存在的通知
       dismiss();
   
       _entry = OverlayEntry(
         builder: (context) => Positioned(
           top: 0,
           left: 0,
           right: 0,
           child: GestureDetector(
             onVerticalDragEnd: (details) {
               // 上滑速度达标触发关闭
               if (details.primaryVelocity! < -200) {
                 dismiss();
               }
             },
             child: Material(
               color: Colors.transparent,
               child: Container(
                 padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
                 color: Colors.green.shade500,
                 child: Text(
                   message,
                   style: const TextStyle(color: Colors.white),
                   textAlign: TextAlign.center,
                 ),
               ),
             ),
           ),
         ),
       );
   
       Overlay.of(context).insert(_entry!);
   
       // 7秒后自动消失
       _timer = Timer(const Duration(seconds: 7), dismiss);
     }
   
     static void dismiss() {
       _timer?.cancel();
       _entry?.remove();
       _entry = null;
     }
   }
   

   使用时直接调用TopNotification.show(context, "流程已完成")，还可根据需求修改圆角、图标、阴影等样式。

方案二：推荐适配需求的第三方包 #

如果不想自定义，试试这两个包：

• fluttertoast：虽常作Toast使用，但支持自定义顶部位置、自动消失时长，套一层GestureDetector就能实现上滑关闭。
• toastification：原生支持顶部通知、自定义样式、自动消失、滑动关闭，配置灵活，能快速匹配你的需求。

修复Snackbar顶部边距导致不可点击的问题 #

若坚持用Snackbar，问题出在边距设置方式，正确做法是用SnackBarBehavior.floating配合margin属性：

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: const Text("流程已完成"),
    behavior: SnackBarBehavior.floating,
    margin: const EdgeInsets.only(top: 60, left: 16, right: 16), // 设置顶部间距
    duration: const Duration(seconds: 7),
    action: SnackBarAction(
      label: "关闭",
      onPressed: () {},
    ),
  ),
);

这种设置下Snackbar内容可正常点击，同时能固定在顶部区域。

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