Home > other >  How make Drawer below BottomNavigationBar
How make Drawer below BottomNavigationBar

Time:12-02

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,
      ),

CodePudding user response:

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'),
    ],
  ),
)
  • Related