Flutter添加Drawer与TabBar出现双AppBar的解决及路由结构优化咨询

双AppBar问题解决方案 #

出现两个AppBar的核心原因是：loggedIn.dart 父页面已经自带包含AppBar的Scaffold，EmergencyHome.dart 子页面又嵌套了一层带AppBar的Scaffold，两个Scaffold的AppBar叠加显示。可按以下步骤修改：

步骤1：重构EmergencyHome.dart #

移除子页面内的Scaffold和独立AppBar，将TabBar暴露给父页面调用，仅保留TabBarView业务内容：

import 'package:flutter/material.dart';
import './finishedAnimalEmergencies.dart';
import './reportAnimalEmergency.dart';
import './ongoingAnimalEmergencies.dart';

class EmergencyHome extends StatefulWidget {
  // 对外暴露TabBar组件，供父页面AppBar挂载
  static PreferredSizeWidget get tabBar => const TabBar(
    tabs: [
      Tab(text: "Report"),
      Tab(text: "Ongoing"),
      Tab(text: "Finished"),
    ],
  );

  @override
  _EmergencyHomeState createState() => _EmergencyHomeState();
}

class _EmergencyHomeState extends State<EmergencyHome> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      // 仅返回Tab业务视图，不需要嵌套Scaffold
      child: const TabBarView(
        children: [
          ReportAnimalEmergency(),
          OngoingAnimalEmergencies(),
          FinishedAnimalEmergencies(),
        ],
      ),
    );
  }
}

步骤2：修改loggedIn.dart的AppBar配置 #

在父页面的AppBar中，根据底部导航选中状态动态挂载TabBar，同时可动态切换AppBar标题：

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      // 动态切换不同导航栏对应的标题
      title: Text(_selectedIndex == 0 
        ? "Emergency Rescue" 
        : _selectedIndex == 1 
          ? "Report Cruelty" 
          : "Blood Bank"
      ),
      actions: <Widget>[
        GestureDetector(
          onTap: () {},
          child: CircleAvatar(
            backgroundImage: AssetImage('assets/images/760279.jpg'),
          ),
        ),
        IconButton(
          icon: Icon(Icons.more_vert),
          color: Colors.white,
          onPressed: () {},
        ),
      ],
      // 仅当选中应急救援tab时显示TabBar
      bottom: _selectedIndex == 0 ? EmergencyHome.tabBar : null,
    ),
    // 其余代码保持不变
    drawer: Drawer(...),
    body: _widgetOptions[_selectedIndex],
    bottomNavigationBar: BottomNavigationBar(...),
  );
}

修改后父页面AppBar保留，Drawer汉堡菜单正常显示，TabBar挂载到父AppBar底部，不会出现双AppBar叠加问题。
双AppBar原效果参考：

应用结构与路由设计建议 #

• 路由管理：优先使用官方推荐的go_router包做声明式路由，所有页面路径统一存放在常量文件中管理，避免硬编码路径。登录态校验、权限拦截统一在路由配置中实现，不需要每个页面单独处理。
• 页面分层：将业务逻辑和UI展示分离，页面层仅做组件渲染，业务状态用Provider/Bloc/Riverpod等状态管理框架统一管理，避免State中冗余逻辑堆积。
• 导航统一：所有Drawer点击、底部导航切换、页面跳转逻辑统一封装到导航管理类中，后续调整路由规则时仅需修改一处即可全局生效。
• 组件复用：通用UI组件（如自定义输入框、按钮、列表项等）全部抽离到公共组件库中统一维护，减少重复代码。

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