Flutter - Disable Bottom Navigation Bar Animation (growing text)

Question

I want to disable the Bottom Navigation Bar animation for selected item to get the same text/icon size of unselected items.

That's my code:

 class BottomNavigationBarHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
        unselectedItemColor: Colors.black38,
        backgroundColor: Colors.white,
        items: [
          BottomNavigationBarItem(
              icon: Icon(BalanceIcon.scale_balance, size: 15.0),
              title: Text('Item 1', style: TextStyle(

              ),)
          ),
          BottomNavigationBarItem(
              icon: Icon(BalanceIcon.scale_balance),
              title: Text('Item 2')
          ),
          BottomNavigationBarItem(
              icon: Icon(BalanceIcon.scale_balance),
              title: Text('Item 3')
          ),
        ]
    );
  }
}

I have already tried setting the same font size, the animation is still here

Solution 1

You can try add type to BottomNavigationBar

BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    ...
)

Solution 2

Add selectedFontSize & unselectedFontSize in BottomNavigationBar and set the same font sizes

BottomNavigationBar(
        selectedFontSize: 15.0,
        unselectedFontSize: 15.0,

Solution 3

The previous answers are correct but you need a combination of both, fixed type and defined font sizes:

BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    selectedFontSize: 12.0,
    unselectedFontSize: 12.0,
    ...
)

BottomNavigationBarType.fixed prevents the items from moving horizontally and makes the labels of the unselected items visible.

selectedFontSize: 12.0, unselectedFontSize: 12.0 prevents the font size change when selecting an item that happens even if the type is fixed.

To re-add the gap between icon and label that disappears with this configuration, you can add a bottom padding to the icons in your BottomNavigationBarItem:

BottomNavigationBarItem(
  icon: Padding(
    padding: EdgeInsets.only(bottom: 2.5),
    child: <your icon>,
  ),
  label: <your title>,
),