消除应用栏和侧边栏导航之间不需要的空白

Question

我正在开发一个 Flutter 应用程序，但我遇到了布局问题，无法解决。具体来说，我的应用程序栏和侧边栏导航之间出现了一行空白，我想将其删除以实现无缝外观。

这是我的应用程序的结构：

• 我将

  AutoTabsRouter.tabBar

  与三个路由一起使用：HomeRoute、InvoiceRoute 和 ProfileRoute。
• 我的

  AppBar

  包含自定义标题和

  Row

  小部件作为其底部 PreferredSize。

  Row

  包含一个用于菜单的 IconButton 和一个带有与我的路线相对应的三个选项卡的 TabBar。
• AppBar 的灵活空间充满了

  FlexibleSpaceBar

  ，我正在使用

  CustomPaint

  来绘制背景。
• 我的脚手架的主体包含第二个脚手架，其中包括作为抽屉的

  NavDrawer

  和活动选项卡的小部件作为其主体。

这是我的 Flutter 代码：

  Widget build(BuildContext context) {
    return AutoTabsRouter.tabBar(
      routes: const [
        HomeRoute(),
        InvoiceRoute(),
        ProfileRoute(),
      ],
      builder: (context, child, controller) {
        final tabsRouter = AutoTabsRouter.of(context);
        final size = MediaQuery.of(context).size;
        return Scaffold(
          appBar: AppBar(
            automaticallyImplyLeading: false,
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            toolbarHeight: size.height * 0.34,
            title: title(context),
            bottom: PreferredSize(
              preferredSize: const Size.fromHeight(12),
              child: Row(
                children: [
                  IconButton(
                      onPressed: () {
                        _scaffoldKey.currentState!.isDrawerOpen
                            ? _scaffoldKey.currentState!.closeDrawer()
                            : _scaffoldKey.currentState!.openDrawer();
                      },
                      icon: Icon(
                        menuIcon,
                        color: Colors.white,
                      )),
                  SizedBox(
                    width: size.width * 0.85,
                    child: TabBar(
                      controller: controller,
                      tabs: [
                        tab("Home"),
                        tab("Invoice"),
                        tab("Profile"),
                      ],
                      onTap: (index) {
                        tabsRouter.setActiveIndex(index);
                      },
                      indicatorColor: Colors.white,
                      indicatorSize: TabBarIndicatorSize.tab,
                      indicatorPadding: const EdgeInsets.all(4),
                    ),
                  ),
                ],
              ),
            ),
            centerTitle: false,
            flexibleSpace: FlexibleSpaceBar(
              background: CustomPaint(
                painter: AppBarBackground(),
                size: Size(MediaQuery.of(context).size.width,
                    (MediaQuery.of(context).size.width * 0.8305555555555556)),
              ),
            ),
          ),
          body: Scaffold(
            key: _scaffoldKey,
            onDrawerChanged: (isOpened) => setState(() {
              if (isOpened) {
                menuIcon = Icons.close;
              } else {
                menuIcon = Icons.menu;
              }
            }),
            drawer: const NavDrawer(),
            body: GestureDetector(child: Builder(
              builder: (context) {
                if (mounted) {
                  return child;
                }
                return Container();
              },
            ), onHorizontalDragEnd: (details) {
              if (details.primaryVelocity! > 0) {
                controller.animateTo(controller.index - 1);
              } else if (details.primaryVelocity! < 0) {
                controller.animateTo(controller.index + 1);
              }
            }),
          ),
        );
      },
    );
  }
}

尽管如此设置，AppBar 和侧边栏导航之间仍然出现了不需要的空白。如果有人能指出我如何消除这一差距的正确方向，我将不胜感激。值得注意的是，即使我使用FlexibleSpaceBar来填充AppBar中的空间，也会出现此问题。

我在此处提供了屏幕截图以供参考：