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,
),
),
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).
User contributions licensed under CC BY-SA 3.0