Search code examples
flutterdartmenunavigation-drawer

How make Drawer below BottomNavigationBar


I want have to BottomNavigationBar and Drawer in my app. When i open Drawer then my bottom menu is below.I wish it was Drawer under bottom nav. It is possible?

my code:

Scaffold(
        key: _scaffoldKey,
        appBar: PreferredSize(
          preferredSize: Size(0.0, 0.0),
          child: Container(),
        ),
        drawer: DrawerWidget(Theme.of(context).brightness, _selectedDrawerIndex, onSelectItem, widget._operator.plannerEnabled, widget._operatorRepository),
        body: _getDrawerItemWidget(_selectedDrawerIndex),
        floatingActionButton: !_showBottoNav() && plannerEnabled
            ? FloatingActionButton(
                elevation: 0.0,
                backgroundColor: Theme.of(context).primaryColor,
                child: Icon(
                  Icons.arrow_forward,
                  color: Colors.white,
                ),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ChangeNotifierProvider(
                        create: (context) => PlannerHomeViewModel(context, widget._operator, null, null, null),
                        child: PlannerHomeScreen(),
                      ),
                    ),
                  );
                },
              )
            : null,
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        bottomNavigationBar: !_showBottoNav()
            ? BottomNav(
                onTap: changeSelectedIndex,
                openMenu: manageDrawer,
                showPlanner: plannerEnabled,
                currentIndex: _selectedDrawerIndex ?? 1,
              )
            : null,
      ),

Solution

  • You just need two Scaffolds nested like this:

    Scaffold(
      body: Scaffold(
        appBar: AppBar(),
        drawer: Drawer(),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    )