How to make a bottomModalSheet pop up from bottomNavigationBar

Question

I'm relatively new to flutter and I was wondering how to make a bottomModalSheet appear from the navigationbar. I'm currently using [persistent_bottom_Nav_Bar] (https://pub.dev/packages/persistent_bottom_nav_bar) from pub.dev. I need make the middle button open a modal sheet, like in the screenshot below. The navBar does what i need it to do, besides the middle button icon.1 Here is my code for what I am doing

PersistentTabController _controller = PersistentTabController(initialIndex: 0);

class MyNavBar extends StatelessWidget {
  const MyNavBar({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return PersistentTabView(
      context,
      controller: _controller,
      screens: _buildScreens(),
      items: _navBarsItems(),
      confineInSafeArea: true,
      backgroundColor: Colors.transparent,
      handleAndroidBackButtonPress: true,
      resizeToAvoidBottomInset: true,
      stateManagement: true,
      hideNavigationBarWhenKeyboardShows: true,
      decoration: NavBarDecoration(
        borderRadius: BorderRadius.circular(10.0),
        colorBehindNavBar: Colors.transparent,
      ),
      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,
    );
  }
}

List<Widget> _buildScreens() {
  return [
    Container(
      child: Text("Page one"),
    ),
    Container(child: Text("Page one")), //place holder
    Container(child: Text('Modal Sheet')),/// <====== NEED THIS TO MAKE A  bottom MODAL SHEET POP UP WHEN SELECTED ON THE NAV BAR
    Container(child: Text("Page 3")), //place holder text
    Container(child: Text("Page 4")) //place holder text
  ];
}

List<PersistentBottomNavBarItem> _navBarsItems() {
  return [
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.home),
      title: ("First"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.settings),
      title: ("Second"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.car_detailed),
      title: ("Add"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.bell),
      title: ("Second"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.circle_grid_hex_fill),
      title: ("Last"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
  ];
}`

Answer 1

You can create a function that provides you to a modalbottomsheet and then call it wherever you want. For example I called it by wrapping all PersistentTabView with gesture detector, Here;

PersistentTabController _controller = PersistentTabController(initialIndex: 0);
void showModalBottomSheetFunction(){
        showModalBottomSheet<void>(
        context: context,
        builder: (BuildContext context) {
          return Container(
            height: 200,
            color: Colors.amber,
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  const Text('Modal BottomSheet'),
                  ElevatedButton(
                    child: const Text('Close BottomSheet'),
                    onPressed: () => Navigator.pop(context),
                  )
                ],
              ),
            ),
          );
        },
      );          
  }
class MyNavBar extends StatelessWidget {
  const MyNavBar({Key? key}) : super(key: key);

  Widget build(BuildContext context) {
    return GestureDetector(
       onTap: () => showModalBottomSheetFunction(), 
      child: PersistentTabView(
      context,
      controller: _controller,
      screens: _buildScreens(),
      items: _navBarsItems(),
      confineInSafeArea: true,
      backgroundColor: Colors.transparent,
      handleAndroidBackButtonPress: true,
      resizeToAvoidBottomInset: true,
      stateManagement: true,
      hideNavigationBarWhenKeyboardShows: true,
      decoration: NavBarDecoration(
        borderRadius: BorderRadius.circular(10.0),
        colorBehindNavBar: Colors.transparent,
      ),
      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,
    ));
  }
}

List<Widget> _buildScreens() {
  return [
    Container(
      child: Text("Page one"),
    ),
    Container(child: Text("Page one")), //place holder
    Container(child: Text('Modal Sheet')),/// <====== NEED THIS TO MAKE A  bottom MODAL SHEET POP UP WHEN SELECTED ON THE NAV BAR
    Container(child: Text("Page 3")), //place holder text
    Container(child: Text("Page 4")) //place holder text
  ];
}

List<PersistentBottomNavBarItem> _navBarsItems() {
  return [
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.home),
      title: ("First"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.settings),
      title: ("Second"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.car_detailed),
      title: ("Add"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.bell),
      title: ("Second"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
    PersistentBottomNavBarItem(
      icon: Icon(CupertinoIcons.circle_grid_hex_fill),
      title: ("Last"),
      activeColorPrimary: CupertinoColors.activeBlue,
      inactiveColorPrimary: CupertinoColors.systemGrey,
    ),
  ];
}