title: flutter BottomAppBar selected color
body: <p>So I currently have the following for my bottom navigation </p>
  
  <pre><code> bottomNavigationBar: BottomAppBar(
          shape: CircularNotchedRectangle(),
          child: Container(
            decoration:
            new BoxDecoration(color: new Color(0xFFFF0000)),
            height: 75,
            child: Row(
              mainAxisSize: MainAxisSize.max,
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: &lt;Widget&gt;[
                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);
                    });
                  },
                )
              ],
            ),
          ),
        ),
  </code></pre>
  
  <p>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.</p>
  
  <p>I am wondering what I need to add to make? Basically if selected colour should be white.</p>
  
  <p>Solution I found was to change the code to the following:</p>
  
  <pre><code>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 &lt;BottomNavigationBarItem&gt;[
                  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,
        ),
      ), 
  </code></pre>