Flutter- add drawer into bottomNavigationBarItem with other items and navigate-CodePudding

Generally, we use drawer into appBar(position drawer/endDrawer). I've to set the drawer functionality into Bottom Navigation Bar Item with Home, Setting. These 3 items will be workable for all page and have to display selected index of these Three(3) items. How I can achieve this.

class BottomNavBar extends StatefulWidget {

  @override
  _BottomNavBarState createState() => _BottomNavBarState();
}

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: _selectedIndex,
      onTap: onTabTapped,
      //for more than three items
      type: BottomNavigationBarType.fixed,
      items: [
        BottomNavigationBarItem(
          icon: Icon(processIcon),
          label: 'My Task',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        BottomNavigationBarItem(
            icon: Icon(settingIcon),
            label: 'Setting',
        ),
        BottomNavigationBarItem(
          icon: Icon(menuIcon),
          label: 'Menu',
        ),
      ],
    );
  }
  void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
      print('index ${index}');
    });

  }
}

Here the Drawer will be navigated into Menu.

CodePudding user response：

You can use GlobalKey on Scaffold and use it to open drawer.

 void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;

      if (_selectedIndex == 3 && _scaffoldKey.currentState != null) {
        _scaffoldKey.currentState!.openDrawer();
      } });
  }

class _BottomNavBarState extends State<BottomNavBar> {
  int _selectedIndex = 1;
  final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      body: Text("B $_selectedIndex"),
      drawer: const Drawer(
        backgroundColor: Colors.cyanAccent,