Flutter中如何通过Indexed Stacking让Container显示在所有Widget顶层

你遇到的问题本质是Flutter的组件绘制层级遵循父组件约束和树结构绘制顺序，当前通知弹窗的父组件（高度50的顶部标题栏）层级低于下方的页面内容区域，所以弹窗会被遮挡。以下是3种可行的实现方案：

方案1：使用Overlay（最贴近CSS position: fixed; z-index:9999的原生能力） #

Overlay是Flutter全局的悬浮层，所有插入Overlay的组件都会默认绘制在整个应用页面的最顶层，不会被其他页面组件遮挡。
实现步骤：

• 给通知图标添加点击交互，点击时获取当前通知图标的坐标位置，用于定位弹窗
• 创建OverlayEntry实例，传入通知列表组件作为内容
• 调用Overlay.of(context)?.insert(entry)将弹窗插入全局悬浮层
• 管理弹窗状态，点击外部区域/再次点击通知图标时调用entry.remove()关闭弹窗

示例代码（修改NotificationBar为StatefulWidget）：

class NotificationBar extends StatefulWidget {
  const NotificationBar({super.key});

  @override
  State<NotificationBar> createState() => _NotificationBarState();
}

class _NotificationBarState extends State<NotificationBar> {
  OverlayEntry? _notificationEntry;

  void _toggleNotificationList() {
    if (_notificationEntry != null) {
      _notificationEntry?.remove();
      _notificationEntry = null;
      return;
    }
    // 获取通知图标位置，用于定位弹窗
    final renderBox = context.findRenderObject() as RenderBox;
    final offset = renderBox.localToGlobal(Offset.zero);

    _notificationEntry = OverlayEntry(builder: (context) {
      return Positioned(
        top: offset.dy + 30, // 图标下方30px位置
        right: 35, // 和NotificationBar的padding对应
        child: Container(
          width: 300,
          height: 500,
          color: Colors.blue,
          // 这里放通知列表内容
        ),
      );
    });
    Overlay.of(context)?.insert(_notificationEntry!);
  }

  @override
  void dispose() {
    _notificationEntry?.remove();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.only(top: 10, bottom: 10, right: 35),
      alignment: Alignment.centerRight,
      child: InkWell(
        onTap: _toggleNotificationList,
        child: Stack(
          clipBehavior: Clip.none,
          children: [
            const Icon(
              Icons.notifications,
              size: 25,
            ),
            Positioned(
              left: 12,
              bottom: 12,
              child: Badge(
                label: const Text("2"),
                smallSize: 12,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

方案2：调整页面结构，使用根Stack托管弹窗 #

如果你的通知按钮固定在页面顶部右上角，可以直接修改Scaffold的根布局为Stack，将通知弹窗放在Stack的最后一个子节点，利用Flutter后绘制的组件层级更高的特性，让弹窗盖在所有内容上方：
修改Scaffold代码：

bool _showNotificationList = false;

return Scaffold(
  backgroundColor: Get.theme.colorScheme.primary.darken(.05),
  body: Stack(
    clipBehavior: Clip.none,
    children: [
      // 原有页面内容
      Column(
        children: [
          SizedBox(
            height: 50,
            child: WindowTitleBarBox(
              child: MoveWindow(
                child: NotificationBar(
                  onToggleNotification: () {
                    // 这里控制通知列表的显隐状态
                    setState(() {
                      _showNotificationList = !_showNotificationList;
                    });
                  },
                ),
              ),
            ),
          ),
          Expanded(
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                MainNavigation(),
                Flexible(child: this.child!),
              ],
            ),
          ),
        ],
      ),
      // 通知弹窗放在最后，层级最高
      if(_showNotificationList)
        Positioned(
          top: 50, // 顶部标题栏高度
          right: 35,
          child: Container(
            width: 300,
            height: 500,
            color: Colors.blue,
          ),
        )
    ],
  ),
);

这种方案不需要管理Overlay，状态管理更简单，适合固定位置的悬浮弹窗场景。

方案3：使用第三方组件简化实现 #

可以使用flutter_portal组件，它封装了Overlay的定位逻辑，只需要将触发组件和弹窗组件绑定，就可以自动实现悬浮在顶层、跟随触发元素位置的效果，无需手动计算坐标。

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