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

    enter image description here

    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:

    enter image description here

    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
        ),
      ],
    )