Move endDrawer above bottomNavigationBar in Flutter

Question

We have a endDrawer that is displaying behind the bottomNavigationBar. We want it to display over the navigation bar.

We may need a refactor but for now, we have a main Scaffold like so:

return Scaffold(
      key: shellKey,
      drawer: const MainDrawer(),
      body: child,
      extendBody: true,
      bottomNavigationBar: const ExpandingBottomDrawer(),
);

The router pushes the child to this Scaffold via

ShellRoute(builder: (context, state, child) => AppLayout(child: child),...)

The children are also Scaffolds that have independent endDrawers. In the children, I am triggering opening the endDrawer via _key.currentState!.openEndDrawer(),. The issue is the endDrawer is visibly behind the bottomNavigationBar. I understand this can be fixed if the endDrawer was on the main Scaffold, but the app is not set up that way and it would be a huge refactor. Is this possible without a refactor?

Thank you!!

Answer 1

You can use another Scaffold widget.

return Scaffold(
  drawer: const Drawer(),
  bottomNavigationBar: Container(
    child: Text("Bottom navBar"),
  ),
  body: Scaffold(
    appBar: AppBar(),
    drawer: const Drawer(),
  ),
);

There might be a better way of handling this.