Flutter Web应用底部导航栏不持久与返回路径异常问题求助

问题根源 #

1. 底部导航栏消失：侧边抽屉点击后用Navigator.push跳转全新页面，新页面未嵌入带底部导航栏的主Scaffold框架中。
2. 返回按钮跳登录页：登录进入主页面时未清除登录页路由，或退出登录时的路由跳转方式错误，导致路由栈中残留登录页。

解决方案 #

一、让侧边抽屉页面在主框架内显示（保留底部导航栏） #

核心思路：将侧边抽屉的目标页面整合到主页面的内容切换逻辑中，而非跳转独立页面，所有页面共享同一个带底部导航栏的Scaffold。

1. 主页面（MainScreen）改造

在MainScreen的State类中添加页面栈管理逻辑，用于记录页面切换历史，支持返回操作：

final List<Widget> appScreens = [
  const CompanyDashboardScreen(),
  const TransactionDetailScreen(true, true),
  const AppointmentCalendarScreen(),
  const UserProfileScreen(),
  const ChatScreen(),
];

// 新增：页面栈，记录侧边抽屉打开的页面历史
final List<Widget> _pageStack = [];
// 当前显示的页面
Widget _currentScreen = const CompanyDashboardScreen();

@override
void initState() {
  super.initState();
  // 初始化时将首页加入页面栈
  _pageStack.add(_currentScreen);
}

2. 侧边抽屉（SideDrawer）改造

添加回调函数，通知主页面切换内容，而非跳转新页面：

class SideDrawer extends StatelessWidget {
  // 新增：页面切换回调
  final Function(Widget screen) onScreenSelected;
  const SideDrawer({super.key, required this.onScreenSelected});

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          UserAccountsDrawerHeader(
            accountName: Text("$userFName $userLName"),
            accountEmail: Text(auth.currentUser!.email ?? 'No Email Found'),
          ),
          Column(
            children: <Widget>[
              ListTile(
                leading: const Icon(Icons.add_business, color: Colors.blueAccent),
                title: const Text('Edit Company'),
                onTap: () {
                  Navigator.pop(context);
                  // 调用回调切换主页面内容
                  onScreenSelected(const CompanyScreen(false));
                },
              ),
              ListTile(
                leading: const Icon(Icons.person, color: Colors.lightBlueAccent),
                title: const Text('Add Company Agent'),
                onTap: () {
                  Navigator.pop(context);
                  onScreenSelected(const UserProfileScreen(true));
                },
              ),
              // 其余侧边栏项均按此方式修改，替换Navigator.push为onScreenSelected回调
              // ...
              ListTile(
                leading: const Icon(Icons.logout, color: Colors.red),
                title: const Text('Log Out'),
                onTap: () {
                  signOut();
                  Navigator.pop(context);
                  // 用pushReplacement替换路由，避免返回时回到主页面
                  Navigator.pushReplacement(
                    context,
                    MaterialPageRoute(builder: (context) => const LoginScreen()),
                  );
                },
              ),
            ],
          ),
        ],
      ),
    );
  }
}

3. 主页面Build方法更新

修改主页面的内容展示逻辑，添加返回按钮处理：

@override
Widget build(BuildContext context) {
  return ScreenUtilInit(
    ensureScreenSize: true,
    child: MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WillPopScope(
        // 处理返回按钮逻辑
        onWillPop: () async {
          if (_pageStack.length > 1) {
            // 页面栈长度大于1，返回上一页
            setState(() {
              _pageStack.removeLast();
              _currentScreen = _pageStack.last;
            });
            return false; // 阻止系统默认返回行为
          }
          // 页面栈仅存首页，允许系统默认返回（可根据需求调整）
          return true;
        },
        child: Scaffold(
          appBar: const CustomAppBar(),
          // 直接展示当前页面，不再用appScreens[_pageIndex]
          body: SafeArea(child: _currentScreen),
          drawer: SideDrawer(
            onScreenSelected: (screen) {
              setState(() {
                // 新页面加入栈
                _pageStack.add(screen);
                _currentScreen = screen;
              });
            },
          ),
          bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.white,
            selectedIconTheme: const IconThemeData(color: Colors.red),
            selectedItemColor: Colors.red,
            unselectedItemColor: Colors.black45,
            type: BottomNavigationBarType.fixed,
            currentIndex: _pageIndex,
            onTap: (value) {
              setState(() {
                _pageIndex = value;
                // 底部导航切换时重置页面栈，避免残留侧边栏页面
                _currentScreen = appScreens[value];
                _pageStack.clear();
                _pageStack.add(_currentScreen);
              });
              if (value == 3) {
                ref.read(globalsNotifierProvider.notifier).updatenewUser(false);
              }
            },
            items: const [
              BottomNavigationBarItem(
                  icon: FaIcon(FontAwesomeIcons.house), label: "Home"),
              BottomNavigationBarItem(
                  icon: FaIcon(FontAwesomeIcons.fileInvoiceDollar), label: "Trxn"),
              BottomNavigationBarItem(
                  icon: FaIcon(FontAwesomeIcons.calendar), label: "Calendar"),
              BottomNavigationBarItem(
                  icon: FaIcon(FontAwesomeIcons.person), label: "User Profile"),
              BottomNavigationBarItem(icon: Icon(Icons.chat), label: 'Chat'),
            ],
          ),
        ),
      ),
    ),
  );
}

二、修复返回按钮跳登录页问题 #

1. 登录成功跳转时：使用pushReplacement替换登录页路由，清除路由栈中的登录页：

// 登录成功后的跳转代码示例
Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => const MainScreen()),
);

2. 退出登录时：同样使用pushReplacement，避免在路由栈中新增登录页，保证返回逻辑正常。

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