Flutter Make Drawer Overlay over the bottom navigation bar of a Page inside the Shell Route of Go Router

Question

So in Flutter, i am using Go Router for Navigation and have created a Shell Route to provide Bottom navigation for pages. I want it such that when i open the Drawer from one of the page inside the shell route. But when i trigger the Screen's scaffold's open Drawer it shows the drawer inside the shellRoute while i want it over it. (all over the screen)

here is my route:

GoRouter myRouter = router();
final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
final shellNavigatorKey = GlobalKey<NavigatorState>();

GoRouter router({String? initialLocation}) => GoRouter(
      navigatorKey: rootNavigatorKey,
      initialLocation: initialLocation ?? Routes.explore,
      debugLogDiagnostics: true,
      routes: routesList,
    );

final List<RouteBase> routesList = [
  GoRoute(
    path: Routes.splash,
    builder: (BuildContext context, GoRouterState state) {
      return const SplashScreen();
    },
  ),
  GoRoute(
    path: Routes.intro,
    builder: (BuildContext context, GoRouterState state) {
      return const IntroScreen();
    },
  ),
  GoRoute(
    path: Routes.login,
    builder: (BuildContext context, GoRouterState state) {
      return const LoginScreen();
    },
  ),
  ShellRoute(
    navigatorKey: shellNavigatorKey,
    builder: (BuildContext context, GoRouterState state, Widget child) {
      return BottomNavigationShell(
        child: child,
      );
    },
    routes: [
      GoRoute(
        path: Routes.home,
        builder: (BuildContext context, GoRouterState state) {
          return const HomeScreen();
        },
      ),
      GoRoute(
          path: Routes.explore,
          builder: (BuildContext context, GoRouterState state) {
            return const ExploreScreen();
          }),
    ],
  ),

and here is my ExploreScreen:

class ExploreScreen extends StatefulWidget {
  const ExploreScreen({super.key});

  @override
  State<ExploreScreen> createState() => _ExploreScreenState();
}

class _ExploreScreenState extends State<ExploreScreen> {
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    final isDark = context.select((ProfileSettingsCubit value) => value.state.isDark);
    return Scaffold(
      key: _scaffoldKey,
      body: Column(
        children: [
          SizedBoxHeight48,
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 16),
            child: Row(
              children: [
                Icon(
                  Icons.search,
                  color: $styles.colors.primary1,
                  size: SizeConfig.screenHeight * 0.04,
                ),
                const Spacer(),
                SizedBoxWidth24,
                Text(
                  'Explore',
                  style: isDark ? $styles.text.pop500_18white_22 : $styles.text.pop500_18black_22,
                ),
                const Spacer(),
                Text(
                  'Filter',
                  style: $styles.text.pop500_16primary1_22,
                ),
                SizedBoxWidth4,
                GestureDetector(
                  onTap: () {
                    _scaffoldKey.currentState?.openDrawer();
                  },
                  child: Icon(
                    Icons.filter_list,
                    color: $styles.colors.primary1,
                    size: SizeConfig.screenHeight * 0.03,
                  ),
                ),
              ],
            ),
          ),
          SizedBoxHeight24,
          const ExploreTabs(),
          SizedBoxHeight8,
          Divider(
            color: $styles.colors.tff1Background,
          ),
          const ExploreListSection(),
        ],
      ),
      drawer: const SearchDrawer(),
    );
  }
}

here is App where i have mounted my router which is inside the main:

class App extends StatelessWidget {
  const App({super.key});

  @override
  Widget build(BuildContext context) {
    bool isDark = context.select((ProfileSettingsCubit value) => value.state.isDark);
    return MaterialApp.router(
      debugShowCheckedModeBanner: false,
      title: 'title',
      routerDelegate: myRouter.routerDelegate,
      routeInformationParser: myRouter.routeInformationParser,
      routeInformationProvider: myRouter.routeInformationProvider,
      theme: Themes.lightTheme,
      darkTheme: Themes.darkTheme,
      themeMode: isDark ? ThemeMode.dark : ThemeMode.light,
      builder: (context, child) {
        $styles = AppStyle(
          appSize: Size(MediaQuery.of(context).size.width, MediaQuery.of(context).size.height),
        );
        return child!;
      },
    );
  }
}

I have tried applying rootNavigatorKey and shellNavigatorKey in the ExploreScreen's scaffold key, it throws : Multiple widgets used the same GlobalKey

I also tried creating a final GlobalKey<ScaffoldState> globalScaffoldKey = GlobalKey<ScaffoldState>(); where i defined my routes , passed it in ExploreScreen's key argument and then called globalScaffoldKey.currentState?.openDrawer();. In this case the drawer does not opens.

when called the drawer from explore screen