Overlay组件中onTap无法跳转页面，移除Overlay则报“No Overlay Widget”错误求助

问题根源 #

你现在的代码有两个核心问题：

1. 手动嵌套Overlay导致导航上下文丢失：MaterialApp的builder里手动创建的Overlay替换了框架默认维护的导航Overlay，Drawer里ListTile的context属于OverlayEntry，找不到正确的Navigator实例，所以导航跳转失效。
2. 结构错误导致Overlay缺失：之前直接用Drawer+AppBar时出现的"No Overlay Widget"，是因为没有把它们放在正确的MaterialApp/Scaffold结构里——Scaffold内部已经自带了所需的Overlay，根本不需要手动添加。

修正方案 #

直接移除手动的Overlay和OverlayEntry，把WelcomeScreen作为Scaffold的body，让框架自行处理Overlay和导航上下文：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            SizedBox(
              height: 65.0,
              child: DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.green.shade900,
                ),
                child: const Row(
                  children: [
                    Text(
                      'Menu',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 24.0,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            ListTile(
              leading: const Icon(Icons.account_circle),
              title: const Text('Profile'),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => const Profile(
                      profileId: '',
                    ),
                  ),
                );
              },
            ),
          ],
        ),
      ),
      appBar: AppBar(
        title: const Text(
          'welcome',
          style: TextStyle(
            color: Colors.white,
          ),
        ),
        backgroundColor: Colors.green.shade900,
      ),
      body: const WelcomeScreen(), // 把原来的home页面作为Scaffold的body
    ),
  );
}

关键修改说明 #

• 移除了所有手动的Overlay相关代码，让MaterialApp和Scaffold自行管理Overlay层
• 将原home的WelcomeScreen移到Scaffold的body中，保证页面结构完整
• 现在ListTile的context能正确关联到MaterialApp的Navigator，导航跳转功能正常

特殊场景补充（如果确实需要自定义Overlay） #

如果你的业务场景真的需要添加全局Overlay组件（比如悬浮按钮），不要替换整个默认Overlay，而是在原有Overlay基础上添加新的Entry，示例：

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: const WelcomeScreen(),
    builder: (context, child) {
      return Overlay(
        initialEntries: [
          OverlayEntry(builder: (context) => child!), // 保留原页面的OverlayEntry
          OverlayEntry(builder: (context) {
            // 这里放你的全局Overlay组件，比如悬浮按钮
            return Positioned(
              bottom: 20,
              right: 20,
              child: FloatingActionButton(
                onPressed: () {},
                child: const Icon(Icons.add),
              ),
            );
          }),
        ],
      );
    },
  );
}

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