Question 75902 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter bottomNavBar with FAB button not working properly

So starting out I have this simple bottomNavBar which changes pages. What I wanted to do was add a FAB bar in the middle.

original bottomNavBar
original bottomNavBar

 bottomNavigationBar: BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    currentIndex: 0,
    backgroundColor: Color(0xFF0066EE),
    selectedItemColor: Colors.white,
    unselectedItemColor: Colors.white,
    items: const [
      BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
      BottomNavigationBarItem(label: 'Diary', icon: Icon(Icons.book)),
      BottomNavigationBarItem(
          label: 'Plans', icon: Icon(Icons.spoke_rounded)),
      BottomNavigationBarItem(label: 'More', icon: Icon(Icons.more)),
    ],
    onTap: (index) {
      if (index == 1) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) {
              final foodItemsModel =
                  Provider.of<FoodItemsModel>(context, listen: false);
              return MealPlanPage(mealList: foodItemsModel.foodItems);
            },
          ),
        );
      } else if (index == 2) {
        Navigator.of(context).push(
          MaterialPageRoute(
            builder: (BuildContext context) {
              return PlanPage();
            },
          ),
        );
      }
    },
  ),

desired bottomNavBar
enter image description here

My attempt of including the FAB bar involved wrapping the existing bottomNavBar in a bottomAppBar and then adding the floatingActionButton, the reason was because I assumed it was caused by BottomAppBar having a height that is larger than the bottomNavBar.
enter image description here

 floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    child: BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      backgroundColor: Color(0xFF0066EE),
      selectedItemColor: Colors.white,
      unselectedItemColor: Colors.white,
      items: const [
        BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
        BottomNavigationBarItem(label: 'Diary', icon: Icon(Icons.book)),
        BottomNavigationBarItem(
            label: 'Plans', icon: Icon(Icons.spoke_rounded)),
        BottomNavigationBarItem(label: 'More', icon: Icon(Icons.more)),
      ],
      onTap: (index) {
        if (index == 1) {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                final foodItemsModel =
                    Provider.of<FoodItemsModel>(context, listen: false);
                return MealPlanPage(mealList: foodItemsModel.foodItems);
              },
            ),
          );
        } else if (index == 2) {
          Navigator.of(context).push(
            MaterialPageRoute(
              builder: (BuildContext context) {
                return PlanPage();
              },
            ),
          );
        }
      },
    ),
  ),

I tried setting the height of the bottomAppBar to match the height of the bottomNavBar but just ended up with a mess and improper FAB button placement still.
enter image description here

floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
  bottomNavigationBar: BottomAppBar(
    color: Color(0xFF0066EE),
    elevation: 0,
    shape: CircularNotchedRectangle(),
    child: SizedBox(
      height: kBottomNavigationBarHeight,
      child: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: 0,
        backgroundColor: Color(0xFF0066EE),
        selectedItemColor: Colors.white,
        unselectedItemColor: Colors.white,
        items: const [
          BottomNavigationBarItem(label: 'Home', icon: Icon(Icons.home)),
          BottomNavigationBarItem(label: 'Diary', icon: Icon(Icons.book)),
          BottomNavigationBarItem(
              label: 'Plans', icon: Icon(Icons.spoke_rounded)),
          BottomNavigationBarItem(label: 'More', icon: Icon(Icons.more)),
        ],
        onTap: (index) {
          if (index == 1) {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) {
                  final foodItemsModel =
                      Provider.of<FoodItemsModel>(context, listen: false);
                  return MealPlanPage(mealList: foodItemsModel.foodItems);
                },
              ),
            );
          } else if (index == 2) {
            Navigator.of(context).push(
              MaterialPageRoute(
                builder: (BuildContext context) {
                  return PlanPage();
                },
              ),
            );
          }
        },
      ),
    ),
  ),
Tags:

2

Answers


  1. 0

    In android there’s no problem with it. I think you are using ios.
    This can happen when you have SafeArea if you have it set bottom property to false.

    Or if you don’t have SafeArea, try to set notchMargin property of BottomAppBar to 0.
    example:

       BottomAppBar(
    notchMargin: 0,
    color: Colors.black,
    child: BottomNavigationBar(
      backgroundColor: Colors.blue,
      type: BottomNavigationBarType.fixed,
      onTap: (v) {}, items: [
      BottomNavigationBarItem(icon: 
      Icon(Icons.baby_changing_station),label: ""),
      BottomNavigationBarItem(icon: Icon(Icons.ac_unit),label: ""),
    ]),
  ),`
    Login or Signup to reply.
  2. 0

    Check your main MaterialApp or the Parent Widget if there is any margin or Padding set, Because otherwise your code should work.

    Working Code:

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Bottom Navigation Bar Demo'),
        ),
        body: _pages[_currentIndex],
        bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedFontSize: 14,
          unselectedFontSize: 14,
          currentIndex: _currentIndex,
          selectedItemColor: Colors.blue,
          unselectedItemColor: Colors.grey, 
          onTap: (int index) {
            setState(() {
              _currentIndex = index;
            });
          },
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.headphones),
              label: 'Headphones',
            ),
          ],
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {},
        ),
      ),
    );

    Output:

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search