BottomNavigationBar is not applying background image when there is more than 3 BottomNavigationBarItem. It shows white background instead of applied image. Please review the code and let me know if I'm missing something in the code.
bottomNavigationBar: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/images/tabbar_background.png'), fit: BoxFit.fill),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
elevation: 0,
items: [
BottomNavigationBarItem(icon: Image.asset("assets/images/eplay.png"), title: Text('title')),
BottomNavigationBarItem(icon: Image.asset("assets/images/games.png"), title: Text('title')),
BottomNavigationBarItem(icon: Image.asset("assets/images/retail-location.png"), title: Text('title')),
BottomNavigationBarItem(icon: Image.asset("assets/images/scan.png"), title: Text('title')),
/* BottomNavigationBarItem(icon: Image.asset("assets/images/scan.png"), title: Text('title')),
*/
],
),
Add type: BottomNavigationBarType.fixed
as a property of the BottomNavigationBar
.
I added a demo using your code as an example:
bottomNavigationBar: Container(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage('assets/images/tabbar_background.png'), fit: BoxFit.fill),
),
child: BottomNavigationBar(
backgroundColor: Colors.transparent,
type: BottomNavigationBarType.fixed, // new line
elevation: 0,
items: [
BottomNavigationBarItem(icon: Image.asset("assets/images/eplay.png"), title: Text('title')),
BottomNavigationBarItem(icon: Image.asset("assets/images/games.png"), title: Text('title')),
BottomNavigationBarItem(icon: Image.asset("assets/images/retail-location.png"), title: Text('title')),
BottomNavigationBarItem(icon: Image.asset("assets/images/scan.png"), title: Text('title')),
/* BottomNavigationBarItem(icon: Image.asset("assets/images/scan.png"), title: Text('title')),
*/
],
),