How do I add a button in the center both vertically and horizontally in a bottom navigation bar in flutter?


i have tried so many different ways und looked for solutions online, but could not find any. can someone please help me with this problem? i want my button right in the middle of the bottom navigation bar like in picture 1

the button is right in the middle which is what i want

this is a floating action button, however i cannot put it to the place i want


What I would do is remove/replace the FAB (Floating action button) with a BottomNavigationBarItem and put it in the center of the BottomNavigationBar and create styling for it

Here is an example:

    bottomNavigationBar: BottomNavigationBar(
    onTap: _selectTab,
    showSelectedLabels: false,
    showUnselectedLabels: false,
    backgroundColor: Theme.of(context).primaryColor,
    selectedItemColor: Theme.of(context).accentColor,
    currentIndex: _selectedScreenIndex,
    //type: BottomNavigationBarType.shifting,
    items: [
        icon: Icon(
        label: 'Categories',
        icon: Container(
          decoration: BoxDecoration(
            color: Colors.yellow,
          child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                onPressed: () {},
                icon: Icon(
                iconSize: 40,
              // Icon(
              //   Icons.add,
              // ),
        label: 'Add',
        icon: Icon(
        label: 'Favorites',

Also there is this alternative option for the bottom navigation

Answered By – Youssef Hegab

Answer Checked By – Candace Johnson (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *