Change the background color of the entire bottom navigation bar depending on item selected in Flutter when type is fixed


I’m creating this app, and I added a bottom navigation bar, and everything is working just fine, except the background color. I would like the background to change depending which item has been selected. It works just fine when I use type: BottomNavigationBarType.shifting, but not when I change it to type: BottomNavigationBarType.fixed.

The thing is that I don’t like the "shifting" behavior, I prefer it "fixed".

I found this example online, but it uses the shifting type:

  bottomNavigationBar: BottomNavigationBar(
      items: const <BottomNavigationBarItem>[
            icon: Icon(Icons.home),
            label: 'Home',
            backgroundColor: Colors.teal
            icon: Icon(Icons.person),
            label: 'Profile',
            backgroundColor: Colors.cyan
          icon: Icon(Icons.settings),
          label: 'Settings',
          backgroundColor: Colors.lightBlue,
      type: BottomNavigationBarType.shifting,
      currentIndex: _selectedIndex,
      selectedItemColor: Colors.white,
      unselectedItemColor: Colors.grey,
      iconSize: 40,
      onTap: _onItemTap,
      elevation: 5

How could I achieve the same background color changing effect using a bottom navigation bar using type: BottomNavigationBarType.fixed?

Thanks in advance.


Use BackgroundNavigationBar.backgroundColor. Consider this modified example from the docs:

class Option {
  final String name;
  final IconData icon;
  final Color color;
  const Option({
    required this.icon,
    required this.color,

class HomePageState extends State<HomePage> {
  static const List<Option> options = [
    Option(name: "Home", icon: Icons.home, color:,),
    Option(name: "Business", icon:, color:,
    Option(name: "School", icon:, color: Colors.purple),
    Option(name: "Settings", icon: Icons.settings, color:,
  int index = 0;
  Option get option => options [index];

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('BottomNavigationBar Sample'),
      body: Center(
        child: Text("Index $index: ${}"),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: option.color,
        type: BottomNavigationBarType.fixed,
        currentIndex: index,
        onTap: (value) => setState(() => index = value),
        items: [
          for (final option in options) BottomNavigationBarItem(
            icon: Icon(option.icon),

Answered By – Levi Lesches

Answer Checked By – Jay B. (FlutterFixes Admin)

Leave a Reply

Your email address will not be published. Required fields are marked *