How can i trigger drawer from bottom navigation?

Question

I need a drawer like this-> https://i.stack.imgur.com/TWT4H.jpg

This is my current code. I'm using persistent_bottom_nav_bar. I need to trigger the drawer from the bottom navigator bar last item. did anyone got any idea? If drawer can't be accessed from bottom navigation is there any other way I could replicate that UI. Thank you

 class BottomNav extends StatefulWidget {
  const BottomNav({Key? key}) : super(key: key);

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

class _BottomNavState extends State<BottomNav> {
  late PersistentTabController _controller;

  @override
  void initState() {
    super.initState();
    _controller = PersistentTabController(initialIndex: 0);
    setState(() {});
  }

  List<Widget> _buildScreens() {
    return [
      HomePage(),
      HistoryPage(),
      ServicePage(),
      ProfilePage(),
    ];
  }

  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: ("Home"),
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        activeColorPrimary: themeBlue,
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.history),
        title: ("History"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.apps_outlined),
        title: ("Services"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(CupertinoIcons.person_alt_circle),
        title: ("Profile"),
        activeColorPrimary: themeBlue,
        inactiveColorPrimary: greyColor,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(),
        confineInSafeArea: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 200),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle:
            NavBarStyle.style6, // Choose the nav bar style with this property.
      ),
    );
  }
}

Check out [ask] to improve this question. – Alex.F Jul 15 '21 at 19:21 — Alex.F, Jul 15 '21 at 19:21

score 0 · Answer 1 · answered Jul 12 '21 at 18:23

As by declaring scaffold key to the scaffold of that page.

GlobalKey scaffoldKey = GlobalKey();

And give drawer and end drawer to the scaffold, then open on your click call the action for your choice:

drawer: scaffoldKey.currentState?.openDrawer();

end drawer: scaffoldKey.currentState?.openEndDrawer();

score 0 · Answer 2 · answered Jul 13 '21 at 08:38

Simply use the GlobalKey to access Scaffold's state. Then in the onPressed() of PersistentBottomNavBarItem use it to execute openEndDrawer().

    final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
    List<PersistentBottomNavBarItem> _navBarsItems(BuildContext context) {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: ("Home"),
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        activeColorPrimary: themeBlue,
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.history),
        title: ("History"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.apps_outlined),
        title: ("Services"),
        activeColorPrimary: themeBlue,
        textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
        inactiveColorPrimary: greyColor,
      ),
      PersistentBottomNavBarItem(
          icon: Icon(CupertinoIcons.person_alt_circle),
          title: ("Profile"),
          activeColorPrimary: themeBlue,
          inactiveColorPrimary: greyColor,
          textStyle: TextStyle(fontWeight: FontWeight.w700, fontSize: 10),
          onPressed: (_) {
            _scaffoldKey.currentState?.openEndDrawer();
          }),
    ];
  }

    
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      // to prevent endDrawer from accidentally showing by swipe
      endDrawerEnableOpenDragGesture: false,
      body: PersistentTabView(
        context,
        controller: _controller,
        screens: _buildScreens(),
        items: _navBarsItems(context),
        confineInSafeArea: true,
        backgroundColor: Colors.white,
        handleAndroidBackButtonPress: true,
        popAllScreensOnTapOfSelectedTab: true,
        popActionScreens: PopActionScreensType.all,
        itemAnimationProperties: ItemAnimationProperties(
          duration: Duration(milliseconds: 200),
          curve: Curves.ease,
        ),
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        navBarStyle:
            NavBarStyle.style6, // Choose the nav bar style with this property.
      ),
    );
  }

However, you'll probably need to implement your own BottomNavBar instead of using this package, because using PersistentBottomNavBar.onPressed() overrides default behaviour which highlights the Profile tile.

To close the end drawer use:

Navigator.of(context).pop();

Useful links:

PersistentBottomNavBar.onPressed()

ScaffoldState.openEndDrawer()

How can i trigger drawer from bottom navigation?

2 Answers2