I'm having an app with a bottom navigation bar:

BottomNavigationBar(
 type: BottomNavigationBarType.fixed,
 items: [

   BottomNavigationBarItem(
    icon: Image.asset('assets/icons/inactive/sth.png'),
    activeIcon: Image.asset('assets/icons/active/sth.png'),
    title: Text('Sth')
   ),

   BottomNavigationBarItem(
    icon: Image.asset('assets/icons/inactive/sth.png'),
    activeIcon: Image.asset('assets/icons/active/sth.png'),
    title: Text('Sth')
   ),

  ],
  onTap: (int index) {
    _currentIndex = index;
  },
  currentIndex: _currentIndex
)

Now I have some use cases where I want to display the bottomNavigationBar but none of its items should be active.

When setting the currentIndex to a non-existing index, I'm getting an error as expected.

Is there any way to achieve my goal?

Thank you in advance.


Solution 1: Andrey Turkovsky

You can try something like

bool isInactive;
BottomNavigationBar(
    type: BottomNavigationBarType.fixed,
    items: [

      BottomNavigationBarItem(
          icon: Image.asset('assets/icons/inactive/sth.png'),
          activeIcon: isInactive ? Image.asset('assets/icons/active/sth.png') : Image.asset('assets/icons/inactive/sth.png'),
          title: Text('Sth')
      ),
...


Solution 2: Siarhei Dudko

// set default unselected
int _selectedIndex = -1;

BottomNavigationBar( type: BottomNavigationBarType.fixed, items: [

BottomNavigationBarItem( icon: Image.asset('assets/icons/inactive/sth.png'), activeIcon: Image.asset('assets/icons/active/sth.png'), title: Text('Sth') ),

BottomNavigationBarItem( icon: Image.asset('assets/icons/inactive/sth.png'), activeIcon: Image.asset('assets/icons/active/sth.png'), title: Text('Sth') ),

], onTap: (int index) { setState(() { _selectedIndex = index; }); }, // if unselected change select index to 0, else you will get error currentIndex: (_selectedIndex != -1) ? _selectedIndex : 0, // add unselected color unselectedItemColor: Colors.grey, // if unselected change color to unselectedItemColor selectedItemColor: (_selectedIndex != -1) ? Colors.blueGrey : Colors.grey, )