Transparent bottom navigation bar in flutter

**It's pretty simple with BottomNavigationBar.**

Just add these attributes only in BottomNavigationBar,

backgroundColor: Color(0x00ffffff),
elevation: 0,
type: BottomNavigationBarType.fixed,

*After adding these my code looks like this.*

BottomNavigationBar(
selectedItemColor: MyTheme.primary_color,
unselectedItemColor: Color.fromRGBO(153, 153, 153, 1),
backgroundColor: Color(0x00ffffff),
elevation: 0,
type: BottomNavigationBarType.fixed,
currentIndex: _currentIndex,
onTap: (index) {
_currentIndex = index;
},
items: [

2022 solution
it's very very simpgle

1 - transparent color
2 - zero elevation

BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.transparent,
elevation: 0,

Well, good news for you, I found the solution, and it's very easy!



Widget build(BuildContext context) {
// Set Android Bar Transparent
SystemChrome.setEnabledSystemUIMode(SystemUiMode.edgeToEdge);
SystemChrome.setSystemUIOverlayStyle(
const SystemUiOverlayStyle(
//NavigationBar
systemNavigationBarColor: Colors.transparent,
systemNavigationBarContrastEnforced: false,
systemNavigationBarIconBrightness: Brightness.dark,
//StatusBar
// systemStatusBarContrastEnforced: false,
statusBarColor: Colors.transparent,
statusBarIconBrightness: Brightness.dark,
),
);

Make this three changes:-

use the `extendBody` property of the Scaffold widget and set it to **true**

set the backgrund color of BottomNavigationBar to transparent `backgroundColor: Colors.transparent`



Set `elevation` to zero to remove the shadow `elevation: 0,`






return MaterialApp(
home: Scaffold(
extendBody: true,
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.transparent,
elevation: 0,
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.explore),
label: 'Explore',
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.redAccent,
// onTap: _onItemTapped,
),
),
);