Style BottomNavigationBar in Flutter
The accepted answer isn't entirely wrong. However, BottomNavigationBar
does in-fact have a property of backgroundColor
. As per the documentation
If type is BottomNavigationBarType.shifting and the itemss, have BottomNavigationBarItem.backgroundColor set, the item's backgroundColor will splash and overwrite this color.
What this means is that the BottomNavigation
's backgroundColor will be overriden by the individual items backgroundColor because the default type is BottomNavigationBarType.shifting
.
To fix this, simply add the following property to the declared BottomNavigationbar
widget.
type: BottomNavigationBarType.fixed,
Note: If you do, however, want the shifting effect you will have to declare colors for each item, or wrap the widget that allows the overriding of the child widget(s) background color.
i.e Something like Container
widget.
BottomNavigationBar
could be either fixed or moving (shifting).
It is fixed if there are 3 items and changes to shifting for 4 or more items. We can override this behavior by setting BottomNavigationBar.type
parameter.
Fixed
BottomNavigationBar
BottomNavigationBar( type: BottomNavigationBarType.fixed, // Fixed backgroundColor: Colors.black, // <-- This works for fixed selectedItemColor: Colors.greenAccent, unselectedItemColor: Colors.grey, items: [ BottomNavigationBarItem( icon: Icon(Icons.call), label: 'Call', ), BottomNavigationBarItem( icon: Icon(Icons.message), label: 'Message', ), ], )
Shifting
BottomNavigationBar
:BottomNavigationBar( type: BottomNavigationBarType.shifting, // Shifting selectedItemColor: Colors.white, unselectedItemColor: Colors.grey, items: [ BottomNavigationBarItem( icon: Icon(Icons.call), label: 'Call', backgroundColor: Colors.blue, // <-- This works for shifting ), BottomNavigationBarItem( icon: Icon(Icons.message), label: 'Message', backgroundColor: Colors.green, // <-- This works for shifting ), ], )
There is no option to specify the background color of BottomNavigationBar
but to change the canvasColor
. One way you can achieve it without messing up the whole app would be by wrapping BottomNavigationBar
in a Theme
with desired canvasColor
.
Example:
bottomNavigationBar: new Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Colors.green,
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Colors.red,
textTheme: Theme
.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
child: new BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: 0,
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.add),
title: new Text("Add"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.delete),
title: new Text("Delete"),
)
],
),
),
Hope that helps!
can change by setting colors to backgroundColor property if type is fixed.
BottomNavigationBar(
backgroundColor: Colors.red,
type: BottomNavigationBarType.fixed,
items: [
BottomNavigationBarItem(
icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Home'),),
BottomNavigationBarItem(
icon: Icon(Icons.work,color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Self Help'),),
BottomNavigationBarItem(
icon:Icon(Icons.face, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Profile'),),
]
)
If the type is shifting it will use color inside bottomNavigationBarItem.
BottomNavigationBar(
backgroundColor: Colors.red,
type: BottomNavigationBarType.shifting,
items: [
BottomNavigationBarItem(
icon:Icon(Icons.home, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Home'),
backgroundColor: Colors.red),
BottomNavigationBarItem(
icon: Icon(Icons.work,color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Self Help'),
backgroundColor: Colors.blue),
BottomNavigationBarItem(
icon:Icon(Icons.face, color: Color.fromARGB(255, 255, 255, 255)),
title: new Text('Profile'),
backgroundColor: Colors.amber),
]
)
You can see even though I have set backgroundColor property it does not apply that colors and the background color inside BottomNavigationBarItem widget will override that.
Found from here