Flutter drawer and button Navigation problem

Question

I am using indexedStack to show my pages and they both have a drawer. Everything is ok till now but when I open the drawer in the pages, it doesn't cover the page vertically and I will attach the image. I would be happy if you help me with it.

 body: IndexedStack(
        index: selectedTabIndex,
        children: const [
          HomePage(),
          ExplorePage(),
        ],
      ),

This is the drawer:

 drawer:  Drawer(
            child: ListView(
          padding: EdgeInsets.symmetric(vertical: 50),
          children: <Widget>[
            Icon(
              Icons.account_circle,
              size: 150,
              color: Colors.grey[600],
            ),
            const SizedBox(
              height: 15,
            ),
            Text(
              userName,
              textAlign: TextAlign.center,
            ),
            const SizedBox(
              height: 30,
            ),
            const Divider(
              height: 2,
            ),
            ListTile(
              onTap: () {},
              selected: true,
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
              leading: const Icon(Icons.group),
              title: Text(
                'Groups',
                style: themeData.textTheme.bodyMedium!
                    .copyWith(fontWeight: FontWeight.w600),
              ),
            ),
            ListTile(
              onTap: () {
                nextScreenReplace(
                    context,
                    ProfilePage(
                      userName: userName,
                      email: email,
                      nationality: nationality,
                    ));
              },
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
              leading: const Icon(Icons.person),
              title: Text(
                'Profile',
                style: themeData.textTheme.bodyMedium!
                    .copyWith(fontWeight: FontWeight.w600),
              ),
            ),
            ListTile(
              onTap: () async {
                showDialog(
                    barrierDismissible: false,
                    context: context,
                    builder: (context) {
                      return AlertDialog(
                        title: Text('Logout',
                            style: themeData.textTheme.bodyMedium!
                                .copyWith(fontWeight: FontWeight.w500)),
                        content: Text(
                          'Are you sure you want do logout?',
                          style: TextStyle(color: Colors.black),
                        ),
                        actions: [
                          IconButton(
                              onPressed: () {
                                Navigator.pop(context);
                              },
                              icon: const Icon(
                                Icons.cancel,
                                color: Colors.red,
                              )),
                          IconButton(
                              onPressed: () async {
                                await authService.logOut();
                                Navigator.of(context).pushAndRemoveUntil(
                                    MaterialPageRoute(
                                        builder: (context) =>
                                            const LoginPage()),
                                    (route) => false);
                              },
                              icon: const Icon(
                                Icons.done,
                                color: Colors.green,
                              )),
                        ],
                      );
                    });
              },
              contentPadding:
                  const EdgeInsets.symmetric(horizontal: 20, vertical: 5),
              leading: const Icon(Icons.exit_to_app),
              title: Text(
                'Logout',
                style: themeData.textTheme.bodyMedium!.copyWith(
                    fontFamily: 'OpenSans', fontWeight: FontWeight.w600),
              ),
            ),
          ],
        ))

as you see the drawer it doesn't cover the page vertically

I tried too many things like stack and ... but I couldn't find a solution. in some where i saw some answers that include some KEYS but I didn't get it.

Answer 1

I think you are using separate scaffold on each page and adding Drawer on those pages. You need to provide drawer on root scaffold to cover the vertical height which as follow,

  int selectedTabIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      drawer: Drawer(),
      bottomNavigationBar: BottomAppBar(..),
      body: IndexedStack(
        index: selectedTabIndex,