0

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

ellen100311
  • 67
  • 1
  • 6
  • Don't think you would get this solution out of the box. What you can try is to create your custom BottomNavigationBar using just a simple `Row` and buttons. Of course, you would need to handle the navigation logic, active menu item colour and so on, but that's probably a way to go having a custom design. – mkobuolys May 17 '21 at 20:58
  • hmm, i ll try, i am currently using bottom navigation bar items, but using row sounds plausible – ellen100311 May 17 '21 at 21:27
  • I just do not think it is a very elegant way too solve it, because there are some things in the bottom navigation bar class that i find very useful such as selectedLabelStyle etc, so i do not have to do them from scratch – ellen100311 May 17 '21 at 21:46
  • i am also facing same issue.anyone please help..!!!! as basic BottomNavigationBarItem behavior is perfect but i want to exclude it for one item only,which is having just icon and not text. – Shree Softech Sep 16 '22 at 12:35

1 Answers1

0

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,
    unselectedItemColor: Colors.black,
    currentIndex: _selectedScreenIndex,
    //type: BottomNavigationBarType.shifting,
    items: [
      BottomNavigationBarItem(
        icon: Icon(
          Icons.category,
        ),
        label: 'Categories',
      ),
      BottomNavigationBarItem(
        icon: Container(
          decoration: BoxDecoration(
            color: Colors.yellow,
            shape: BoxShape.circle,
          ),
          child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: IconButton(
                onPressed: () {},
                icon: Icon(
                  Icons.add,
                ),
                iconSize: 40,
              )
              // Icon(
              //   Icons.add,
              // ),
              ),
        ),
        label: 'Add',
      ),
      BottomNavigationBarItem(
        icon: Icon(
          Icons.star,
        ),
        label: 'Favorites',
      ),
    ],
  ),

Also there is this alternative option for the bottom navigation https://pub.dev/packages/convex_bottom_bar

Youssef Hegab
  • 81
  • 1
  • 6