How to make popup menu from bottomnavigationbar in Flutter?

Question

IM trying to achieve something like in this screenshot, which is, bottomnavbar swiching through pages but middle button launching bottom sheet or other action like popup menu and stay on that page...

class _HomePageState extends State<HomePage> {
  PersistentTabController _controller;

  @override
  void initState() {
    super.initState();

    _controller = PersistentTabController(initialIndex: 0);
    _hideNavBar = false;
  }

  List<Widget> _buildScreens() {
    return [
      MyHomePage(),

      AddPage(), // this need to be action button not new page...

      MyActivity(),
    ];
  }
  List<PersistentBottomNavBarItem> _navBarsItems() {
    return [
      PersistentBottomNavBarItem(
        icon: Icon(Icons.home),
        title: "Home",
        activeColor: Colors.purpleAccent,
        inactiveColor: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.add),
        title: ("Add"),
        activeColor: Colors.purpleAccent,
        inactiveColor: Colors.grey,
      ),
      PersistentBottomNavBarItem(
        icon: Icon(Icons.search),
        title: ("MyAct"),
        activeColor: Colors.purpleAccent,
        inactiveColor: Colors.grey,
      ),
    ];
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PersistentTabView.custom(
        context,
        controller: _controller,
        screens: _buildScreens(),
        confineInSafeArea: true,
        itemCount: 3,
        handleAndroidBackButtonPress: true,
        resizeToAvoidBottomInset: false,
        stateManagement: true,
        hideNavigationBar: _hideNavBar,
        screenTransitionAnimation: ScreenTransitionAnimation(
          animateTabTransition: true,
          curve: Curves.ease,
          duration: Duration(milliseconds: 200),
        ),
        customWidget: CustomNavBarWidget(
          items: _navBarsItems(),
          onItemSelected: (index) {

            setState(() {
              _controller.index = index; // THIS IS CRITICAL!! Don't miss it!
            });
          },
          selectedIndex: _controller.index,
        ),
      ),
);
}

IM using persistenNavBar, but I think with regular bottom navigation situation is the same... I guess I can make custom bottomnav bar, or List with different widget type?

Answer 1

You can use the

showModalBottomSheet()

from Flutter and set the arguments as following:

showModalBottomSheet(
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), //for the round edges
    builder: (context) {
        return Container(
            //specify height, so that it does not fill the entire screen
            child: Column(children: []) //what you want to have inside, I suggest using a column
        );
    }
    context: context,
    isDismissible: //boolean if you want to be able to dismiss it
    isScrollControlled: //boolean if something does not display, try that
);

Then you can just execute this function on BottomNavigationBar tap.