Style BottomNavigationBar in Flutter
Solution 1:
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!
Solution 2:
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 ), ], )