Flutter BottomNavigationBar with more than 3 items automatically applies padding depending on the selected item

Question

In my App there is an BottomNavigationBar with, at the moment, 4 items. The code of it is following:

  bottomNavigationBar: BottomNavigationBar(
    items: [
      BottomNavigationBarItem(icon: Icon(Icons.home), label: "Startseite"),
      BottomNavigationBarItem(icon: Icon(Icons.star), label: "Favoriten"),
      BottomNavigationBarItem(icon: Icon(Icons.casino), label: "Quiz"),
      BottomNavigationBarItem(icon: Icon(Icons.map), label: "Karte"),
    ],
    currentIndex: _selectedIndex,
    unselectedItemColor: Colors.grey,
    showUnselectedLabels: true,
    selectedItemColor: Colors.blue,
    onTap: _onItemTapped,
  ),

_selectedIndex is just an integer. The _onItemTapped function:

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    setState(() {
      if (index == 0) {
        SwipePage();
      } else if (index == 1) {
        DatabaseProvider.db.queryDb();
        Navigator.of(context).push(
          toFavouritesPage(),
        );
      } else if (index == 2) {
        Navigator.of(context).push(
          toQuizPage(),
        );
      } else if (index == 3) {
        Navigator.of(context).push(
          toMapsPage(),
        );
      }
    });
  }

With 3 items it looks like this (everything evenly spaced):

With 4 items it looks like this (I dont understand where this padding comes from):

How do I get rid of the padding so that everything stays evenly spaced?

Answer 1

Set bottomNavigationBarType: to fixed. By default on four or more items, it's shifting. This will highlight the selected item by making it more distinct.