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

score 11 · Accepted Answer · answered Jun 14 '20 at 02:36

11

You can try add type to BottomNavigationBar

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

answered Jun 14 '20 at 02:36

dangngocduc

1,588
8
13

Thanks, that helped me a lot! – 1encore Sep 23 '21 at 17:07
This isn't the correct answer. You need to also set selectedFontSize: xx, unselectedFontSize: xx, as in the below answer. – Domenico Feb 02 '23 at 14:32

Benjamin Bisinger · Answer 2 · 2021-03-05T15:22:56.293

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>,
),

Jitesh Mohite · Answer 3 · 2020-06-13T14:46:24.843

2

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

BottomNavigationBar(
        selectedFontSize: 15.0,
        unselectedFontSize: 15.0,

edited Jun 13 '20 at 14:46

answered Jun 13 '20 at 14:31

Jitesh Mohite

31,138
12
157
147

not working, this seems working just for animation type (sliding, fixed, ecc). Even with fixed there's the text grow – Arfmann Jun 13 '20 at 14:33
as I already said in the question, I have already tried setting the same font size and is still not working – Arfmann Jun 13 '20 at 18:06

Flutter - Disable Bottom Navigation Bar Animation (growing text)

3 Answers3