Flutter中实现底部导航栏在所有页面持久显示的问题

问题根源 #

你的底部导航栏消失，核心原因是导航栈结构错误：如果Navbar不是应用的根路由，或者子页面跳转时使用了会移除Navbar的导航方法（比如pushReplacement），返回时Navbar会被移出导航栈，导致底部导航栏消失。另外，重复创建多个Homepage实例属于不必要的资源浪费。

修复步骤 #

1. 将Navbar设为应用根路由 #

确保Navbar是整个应用的最顶层页面，所有其他页面都在它的基础上跳转。示例代码：

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Your App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const Navbar(), // 这里设置Navbar为根页面
    );
  }
}

2. 使用正确的子页面跳转方式 #

在Homepage、LoanApplication等子页面中，跳转新页面时必须使用Navigator.push，禁止使用pushReplacement、popUntil这类会破坏导航栈结构的方法。示例：

// 在Homepage内的跳转代码示例
ElevatedButton(
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => const TargetPage()),
    );
  },
  child: const Text('打开新页面'),
);

这样从TargetPage返回时，会回到对应的子页面（如Homepage），而Navbar的底部导航栏会始终保持显示。

3. 优化Navbar的页面列表（可选） #

你当前重复创建了4个Homepage实例，完全可以复用同一个实例，减少资源消耗：

final screens = [
  const Homepage(),
  const Homepage(), // 若对应不同功能，替换为实际页面组件；否则复用同一个实例
  const Homepage(),
  const Homepage(),
  const LoanApplication(),
];

4. 正确处理返回操作 #

在子页面中返回时，必须使用Navigator.pop(context)，不要使用SystemNavigator.pop()（会直接关闭应用）。

关键注意点 #

• 始终保证Navbar在导航栈的最顶层，所有页面跳转都基于它的子页面展开。
• 不要在子页面中直接修改导航栈的根节点，避免Navbar被移出栈。

内容的提问来源于stack exchange，提问作者SEYRAM EMMANUEL AGBANYO