0

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')),
*/
              ],
            ),
Darshan HK
  • 73
  • 1
  • 8

1 Answers1

2

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')),
*/
              ],
            ),
void
  • 12,787
  • 3
  • 28
  • 42
  • Background image is working now. But i want type: BottomNavigationBarType.shifting as per my requirement. Any help? – Darshan HK Sep 04 '20 at 08:31
  • 1
    Background image doesn't appear. I see white background. – Darshan HK Sep 04 '20 at 08:35
  • So according to the docs `If [type] is null then [BottomNavigationBarType.fixed] is used when there are two or three [items], [BottomNavigationBarType.shifting] otherwise.` – void Sep 04 '20 at 08:39
  • So I cannot use BottomNavigationBarType.shifting with background image? – Darshan HK Sep 04 '20 at 08:41
  • If you are using the `shifting` type, you have to give the `selectedItemColor` and `unselectedItemColor` , that could be a reason a white screen appears. – void Sep 04 '20 at 08:50
  • If my answer helped you with the problem specified in your original post, please accept it. If not, provide more detail as to why it does not. – void Sep 04 '20 at 16:06