Flutter中Bottom Navigation Bar不显示且无法正常工作的解决方法

核心问题1：无限嵌套+错误页面结构 #

你的MachineStatusPage返回MaterialApp(home: Nav())，而Nav的页面列表里又包含MachineStatusPage，这会触发无限组件嵌套；同时如果路由直接打开MachinePage，该页面的Scaffold完全未关联底部导航组件，自然不会显示导航栏。

核心问题2：底部导航栏被推出屏幕 #

bottomNavigationBar外层Container设置了vertical: 40的margin，数值过大导致导航栏被推到屏幕可视区域之外，无法被看到。

修复步骤 #

1. 重构页面结构，消除无限嵌套

修改MachinePage.dart中的MachineStatusPage，让它直接返回页面内容（无需用MaterialApp包裹），因为Nav本身已是带Scaffold的容器：

class MachineStatusPage extends StatelessWidget {
  const MachineStatusPage({super.key});

  @override
  Widget build(BuildContext context) {
    // 直接返回MachinePage内容，由Nav的Scaffold承载
    return MachinePage();
  }
}

2. 调整底部导航margin，避免被推出屏幕

修改bottom_navigation_bar.dart中Container的margin，缩小垂直方向的间距：

Container(
  // 缩小垂直margin，或仅保留水平间距
  margin: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
  decoration: BoxDecoration(
    boxShadow: [
      BoxShadow(
        color: Colors.black.withOpacity(0.2), // 给阴影添加透明度，提升视觉效果
        blurRadius: 25,
      ),
    ]
  ),
  child: BottomNavigationBar(...),
)

3. 确保路由导航到Nav组件

在应用入口（如main.dart）中，将Nav设为初始页面或跳转目标，而非直接打开MachinePage：

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      home: Nav(), // 将Nav作为首页
      // 或配置路由表
      routes: {
        '/nav': (context) => Nav(),
        // 其他路由配置
      },
    );
  }
}

4. （可选）支持页面参数传递

如果MachinePage需要接收machine和nickname参数，可修改Nav的页面列表，取消const限制以支持传参：

// 将pages改为函数，支持动态传参
List<Widget> get pages => [
  MachinePage(machine: "设备ID", nickname: "自定义名称"),
  waterPage(),
  DewPoint(),
  MachineInfo(),
];

// 在build中调用
body: pages[myCurrentIndex],

验证修复 #

完成修改后重新运行应用：

• 底部导航栏会正常显示在屏幕底部
• 点击导航项可切换对应页面
• 无限嵌套问题被解决

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