How to display an image in the BottomNavigationBar in Flutter?

user_11262288 0
Viewed 9295

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

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 enter image description here

dart flutter
6 Answers
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'),
         ),
user_127484990

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.

user_55615280

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)

user_82415870

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

user_112622880

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

user_47208690

You can use this instead:

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