Flutter的BottomNavigationBar如何显示图片？

Question

I need to display an image in the navigation bar like this:

but I can't because NavigationBarItem class needs an icon, so when I use ImageIcon widget I lose the colors. There are multiple colors in the image.

How to show the image in there or a way to make a colorful icon?

And when I use

BottomNavigationBarItem(
                icon: ImageIcon(
                  NetworkImage('https://picsum.photos/250?image=9'),
                ),
                title: Text('Image'),
              ),

it look like colored rectangle

Answer 1

ImageIcon(
 AssetImage("images/icon_more.png"),
 color: Color(0xFF3A5A98),
 ),

instead of

new BottomNavigationBarItem(
           icon: Icon(Icons.home),
           title: Text('Home'),
         ),

change to this

      BottomNavigationBarItem(
           icon: ImageIcon(
               AssetImage("images/icon_more.png"),
                    color: Color(0xFF3A5A98),
               ),
           title: Text('Home'),
         ),

Answer 2

so apparently the solution is to use Image.asset('image_path') for icon/activeIcon in BottomNavigationBarItem if you want to display images as bottom bar navigation icons with original color .

However, it does give an error if your items: const <BottomNavigationBarItem>[] has the keyword const in it. If you remove it you should be able to use Image.asset instead of ImageIcon (which tints to color)

Answer 3

As @asbah-riyas mentioned it can be done by providing the ImageIcon widget to the icon argument of BottomNavigationBarItem . Although you don't need to specify the color in it

You can check or play with it in codepen here.

Answer 4

The NavigationBarItem's image property needs a Widget, not an Icon, so I could just use this. BottomNavigationBarItem(icon: Image.asset('images/symbol.png')),

Answer 5

The correct answer is BottomNavigationBarItem(icon: Image.asset('images/symbol.png')),

Provided you place your png image is images folder and mentioned same as images/image.png in your pubspeq.yaml under assets

Answer 6

You can use this instead:

    BottomNavigationBarItem(
        icon: Image.asset(" your image here "),
    ),
label: 'home',
),