0

I have created a bottom navigation menu in my app and i would like to create an animated circular menu when i click on the transact button.

enter image description here

When i click on transact i want it to pull up like this

enter image description here

This is my current bottomNav code

bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        label: 'Home',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.swap_horiz),
        label: 'Transact',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.settings),
        label: 'Settings',
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: MyColors.greenSuccess,
    onTap: _onItemTapped,
  ),

//function when item is tapped
void _onItemTapped(int index) {
setState(() {
  _selectedIndex = index;
});

//check which item is selected
if(index == 0){
  //go home
}
else if(index == 1){
  //open trans menu here

}
else{
  // go to settings

}
}
Tinovimba Mawoyo
  • 400
  • 4
  • 19

1 Answers1

0

there is a lot of bottom nav variation package you can check at this website

or you can try to use bottom nav with this FAB put in in the center of the nav

CCP
  • 886
  • 1
  • 10
  • 30