CODEWITHSUNDEEP
flutternavigationbar
lolbardsnin
lolbardsnin

Reputation: 311

FLUTTER BottomNavigationBar first item is always activated

im tinkering with an app layout and im using the nav bar but my first item is always activated regardless if i press it or not. any ideas ?

my lables as well after the first item doesnt show.

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
        ),

      bottomNavigationBar: BottomAppBar(
        notchMargin: 5,
        shape: CircularNotchedRectangle(),
       // color: Colors.black,
        child:
            BottomNavigationBar(
          elevation: 50,
          //backgroundColor: Colors.black,
          unselectedItemColor: Colors.black,
          selectedItemColor: Colors.green,
          items: [
//the first one is always activated
            BottomNavigationBarItem(
              icon: Icon(Icons.accessibility_new),
              label: ("Lo"),
              activeIcon: Icon(Icons.book),
             //IF I add background color here it will fill the entire bar
              //backgroundColor: Colors.green,
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.book),
              label: ("Ed"),
            ),
            BottomNavigationBarItem(
                icon: Icon(Icons.access_time),
                label: ("Pi"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.accessible_sharp),
              label: ("ac"),
            ),
          ],
        ),
      ),
    );
  }
}

Flutter screen

Upvotes: 1

Views: 1456

Answers (2)

Cedric
Cedric

Reputation: 1000

For the (unselected) labels to display properly, try adding this line to your BottomNavigationBar:

showUnselectedLabels: true,

If that doesn't work, maybe your unselected labels have the same color as the background.

Good luck with your project ;).
-Cedric

Upvotes: 1

dm_tr
dm_tr

Reputation: 4783

Use a variable to hold the current selected index

int selectedIndex = 0;
// ....

bottomNavigationBar: BottomAppBar(
  notchMargin: 5,
  child: BottomNavigationBar(
    unselectedItemColor: Colors.black,
    selectedItemColor: Colors.green,
    onTap: (index) {
      setState(() {
        selectedIndex = index;
      });
    },
    currentIndex: selectedIndex,
    items: [
      BottomNavigationBarItem(
        icon: Icon(Icons.accessibility_new),
        label: ("Lo"),
        activeIcon: Icon(Icons.book),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        label: ("Ed"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.access_time),
        label: ("Pi"),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.accessible_sharp),
        label: ("ac"),
      ),
    ],
  ),
),

Upvotes: 3

Related Questions