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

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(
                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,
        ),
      );
    );
  };