CODEWITHSUNDEEP
flutterflutter-layout
aksn
aksn

Reputation: 2559

Set Flutter bottomNavigationBar inactive

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.

Upvotes: 4

Views: 3150

Answers (2)

Siarhei Dudko
Siarhei Dudko

Reputation: 332

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

Upvotes: 1

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29438

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

Upvotes: 2

Related Questions