flutter BottomAppBar selected color

Question

So I currently have the following for my bottom navigation

 bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          decoration:
          new BoxDecoration(color: new Color(0xFFFF0000)),
          height: 75,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.home),
                onPressed: () {
                  setState(() {
                     onTabTapped(0);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                //padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.view_headline),
                onPressed: () {
                  setState(() {
                    onTabTapped(2);
                  });
                },
              ),
          /*    IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.search),
                onPressed: () {
                  setState(() {
                    onTabTapped(1);
                  });
                },
              ),
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(left: 28.0),
                icon: Icon(Icons.notifications),
                onPressed: () {
                  setState(() {
                    onTabTapped(2);
                  });
                },
              ),*/
              IconButton(
                iconSize: 30.0,
                padding: EdgeInsets.only(right: 28.0),
                icon: Icon(Icons.info_outline),
                onPressed: () {
                  setState(() {
                    onTabTapped(1);
                  });
                },
              )
            ],
          ),
        ),
      ),

However, I have noticed that it will not make the active page or selection a different colour. For example, what I would like is because the first page is the home page the icon should be white not black.

I am wondering what I need to add to make? Basically if selected colour should be white.

Solution I found was to change the code to the following:

bottomNavigationBar: new Theme(
      data: Theme.of(context).copyWith(
    // sets the background color of the `BottomNavigationBar`
    canvasColor: Colors.red,
    // sets the active color of the `BottomNavigationBar` if `Brightness` is light
    primaryColor: Colors.black,
    textTheme: Theme
        .of(context)
        .textTheme
        .copyWith(caption: new TextStyle(color: Colors.black))), // sets the inactive color of the `BottomNavigationBar`
          child: BottomNavigationBar(
              items: const <BottomNavigationBarItem>[
                BottomNavigationBarItem(
                  icon: Icon(Icons.home),
                  title: Text('Home'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.view_headline),
                  title: Text('News'),
                ),
                BottomNavigationBarItem(
                  icon: Icon(Icons.more),
                  title: Text('More'),
                ),
              ],
              currentIndex: _selectedIndex,
              selectedItemColor: Colors.white,
              onTap: onTabTapped,
      ),
    ),

do you maintain a status for the selected index ? or default one? — Praneeth Dhanushka Fernando, Oct 31 '19 at 10:45
yes the selected Index (but I want them to all have their own colour) — RussellHarrower, Oct 31 '19 at 10:49

score 2 · Answer 1 · answered Dec 23 '20 at 19:06

Old question, but no answers, so maybe this will help guide somebody

One way you can handle this is by checking your index with a ternary. Basing it off of OP's example:

Make a reference for the int _selectedIndex in your class:

int _selectedIndex = 0;

Your IconButton in your BottomAppBar (I removed the setState call here):

IconButton(
 iconSize: 30.0,
 icon: Icon(Icons.view_headline, color: _selectedIndex == 2 ? Colors.white : Colors.black),
 onPressed: () {
  onTabTapped(2);
 },
),

Your OnTabTapped method:

  void onTabTapped(int index) {
    setState(() {
      _selectedIndex = index;
      ///call your PageController.jumpToPage(index) here too, if needed
    });
  }

Now when you tap on an Icon, it will change the _selectedIndex variable within setState, which will then rebuild your Icons and choose their color appropriately (the selected Icon will be white and the rest black).

flutter BottomAppBar selected color

1 Answers1