Style BottomNavigationBar in Flutter

Question

I am trying out Flutter and I am trying to change the colour of the BottomNavigationBar on the app but all I could achieve was change the colour of the Bo

Answer 1

Earlier there was no direct way to set the colors, but now you can use.

BottomNavigationBar(
  backgroundColor: Colors.red,
  selectedItemColor: Colors.black,
  unselectedItemColor: Colors.white,
  ...
)  

Answer 2

The title is deprecated. We use label instead.
For label, we can use corresponding attributes: selectedLabelStyle, unselectedLabelStyle.
For example:

bottomNavigationBar: BottomNavigationBar(
          type: BottomNavigationBarType.fixed,
          selectedItemColor: Theme.of(context).accentColor,
          selectedFontSize: 0,
          unselectedFontSize: 0,
          iconSize: 22,
          elevation: 0,
          backgroundColor: Colors.transparent,
          selectedIconTheme: IconThemeData(size: 28),
          unselectedItemColor: Theme.of(context).focusColor.withOpacity(1),
          selectedLabelStyle: Theme.of(context).textTheme.bodyText1.merge(TextStyle(fontSize: 12)),
          unselectedLabelStyle: Theme.of(context).textTheme.button.merge(TextStyle(fontSize: 11)),
          showUnselectedLabels: true,
          currentIndex: widget.currentTabIdx,
          onTap: (int i) {
            this._selectTab(i);
          },
          showSelectedLabels: true,
          // this will be set when a new tab is tapped
          items: [
            BottomNavigationBarItem(
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_HOME) ,
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_HOME, color: Theme.of(context).accentColor),
              label: 'Home',
            ),
            BottomNavigationBarItem(
                label: 'Categories',
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CATEGORY),
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CATEGORY, color: Theme.of(context).accentColor) ,
            ),
            BottomNavigationBarItem(
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_ORDER_HISTORY, ) ,
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_ORDER_HISTORY, color: Theme.of(context).accentColor ) ,
              label: 'Order History',
            ),
            BottomNavigationBarItem(
              icon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CART,) ,
              activeIcon: SvgPicture.asset(IMAGE_ASSETS_ICONS_CART, color: Theme.of(context).accentColor) ,
              label: 'Cart',
            ),
          ],

Answer 3

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!

Answer 4

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

Answer 5

Try wrapping your BottomNavigationBar in a Container then set its color.

Example:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new Container(
        color: Colors.green,
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: const Icon(Icons.home),
                title: Text("Home")
            ),
            BottomNavigationBarItem(
                icon: const Icon(Icons.work),
                title: Text("Self Help")
            ),
            BottomNavigationBarItem(
                icon: const Icon(Icons.face),
                title: Text("Profile")
            )
          ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        ),
      );
    );
  };

Answer 6

Simply add the backgroundColor property to BottomNavigationBarwidget.

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        backgroundColor: Colors.black45,
      ),
    );
  }