backgroundColor is not changing the color on BottomNavigationBar

Question

The background color in the bottom navigation bar is not the color I want.

MaterialApp(
      theme: ThemeData(
        bottomNavigationBarTheme: BottomNavigationBarThemeData(
          backgroundColor: Color(0xFF18C37D),
        )
      ),
      home: MyBottomNavigationBar(),
      debugShowCheckedModeBanner: false,
    );
  }
}

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent, // AppBar'ın arka plan rengi transparan
        elevation: 0, // AppBar'ın gölge efekti yok
      ),
      backgroundColor: Color(0xFF333333), // Uygulamanın arka plan rengi (#333333)
      body: _pages[_selectedIndex],
      bottomNavigationBar: Container(
        decoration: BoxDecoration(
          color: Color(0xFF18C37D), // BottomNavigationBar'ın arka plan rengi (#18C37D)
        ),
        child: BottomNavigationBar(
          backgroundColor: Color(0xFF18C37D), // Bu kısmı ekleyerek bottomNavigationBar'ın rengini beyaz yapabilirsiniz
          selectedItemColor: Colors.black, // Seçili öğe rengi siyah
          unselectedItemColor: Colors.white, // Seçili olmayan öğelerin rengi beyaz
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.home),
              label: 'Anasayfa',
            ),
            BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.utensils),
              label: 'Diyet ve Egzersiz',
            ),
            BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.calendar),
              label: 'Takvim ve İlerleme',
            ),
            BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.user),
              label: 'Profil',
            ),
          ],
        ),
      ),
    );
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }
}

Answer 1

As for the backgroundColor

If [type] is [BottomNavigationBarType.shifting] and the [items] have [BottomNavigationBarItem.backgroundColor] set, the [items]' backgroundColor will splash and overwrite this color.

The default BottomNavigationBar's type:BottomNavigationBarType.shifting . You can replace with something type: BottomNavigationBarType.fixed.

child: BottomNavigationBar(
  type: BottomNavigationBarType.fixed,
  backgroundColor: Color(
      0xFF18C37D),